{"id":23843436,"url":"https://github.com/warnier-zhang/vuetify3-plus","last_synced_at":"2026-02-26T21:01:54.258Z","repository":{"id":239516583,"uuid":"799740034","full_name":"Warnier-zhang/Vuetify3-Plus","owner":"Warnier-zhang","description":"A useful complement and improvement to Vuetify 3","archived":false,"fork":false,"pushed_at":"2024-12-03T02:32:36.000Z","size":1866,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T21:43:58.737Z","etag":null,"topics":["plus","vue3","vuetify3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Warnier-zhang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-13T02:10:04.000Z","updated_at":"2025-02-24T03:30:09.000Z","dependencies_parsed_at":"2025-01-02T19:37:07.496Z","dependency_job_id":"03a24c43-b448-4a55-a28b-e7d46c3b288a","html_url":"https://github.com/Warnier-zhang/Vuetify3-Plus","commit_stats":null,"previous_names":["warnier-zhang/vuetify3-plus"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Warnier-zhang/Vuetify3-Plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Warnier-zhang%2FVuetify3-Plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Warnier-zhang%2FVuetify3-Plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Warnier-zhang%2FVuetify3-Plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Warnier-zhang%2FVuetify3-Plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Warnier-zhang","download_url":"https://codeload.github.com/Warnier-zhang/Vuetify3-Plus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Warnier-zhang%2FVuetify3-Plus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29872669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T18:42:30.764Z","status":"ssl_error","status_checked_at":"2026-02-26T18:41:47.936Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plus","vue3","vuetify3"],"created_at":"2025-01-02T19:36:55.984Z","updated_at":"2026-02-26T21:01:54.210Z","avatar_url":"https://github.com/Warnier-zhang.png","language":"Vue","readme":"# Vuetify3 Plus\n\n顾名思义，Vuetify3 Plus，不是一套全新的UI框架，而是对Vuetify 3的补充和加强。\n\n在我们把Vuetify从v2升级到v3的时候，Vuetify的最新版本是3.3.x，此时的组件库还不够完备，`VDataTable`、`VDatePicker`等尚在Labs积极开发中，`VTimePicker`、`VTreeView`等还不见踪影，而上述组件对To B应用来说是不可或缺的，加上部分组件不匹配我们的使用习惯，为了：\n\n* 进一步扩大组件库；\n* 补位尚在规划、开发中的组件；\n* 提升组件的可用性、易用性；\n\n我们只好自己动手寻找合适的替代品、扩展现有的组件库，最终的成果就是——Vuetify3 Plus，后期基于Vuetify 3.4.0+，部分组价（或灵感）来自于Element Plus和Quasar。\n\n组件名称前缀——“C”，可以解释成“Core”、“Common”；\n\n## 安装方法\n\n1. 克隆Vuetify3-Plus项目源码：\n\n   ```\n   git clone https://github.com/Warnier-zhang/Vuetify3-Plus.git\n   ```\n\n2. 编译、打包项目：\n\n   ```\n   npm install \u0026\u0026 npm run build\n   ```\n\n3. 在新项目中，编辑`package.json`文件，引入Vuetify3 Plus，并安装：\n\n   ```\n   package.json\n   ---\n   \"dependencies\": {\n       ...\n       \"vuetify3-plus\": \"file:../Vuetify3-Plus\",\n       ...\n   }\n   \n   npm install\n   ```\n\n### 运行示例\n\n在克隆下来的项目源码中，执行`npm run dev`脚本，然后，访问http://localhost:5173\n\n## 使用指南\n### 表格（3）\n\n#### 增删改查表格（CCrudTable）\n\n扩展自`VDataTableServer`组件，在保留`VDataTableServer`用法、优点的基础上，参考**EasyUI**、**miniUI**时代的`DataGrid`，进一步封装查询、新增、更新、删除、过滤、刷新、导出Excel等操作逻辑。\n\n```\n\u003cCCrudTable\n    title=\"文件资源管理器\"\n    :columns=\"columns\"\n    fixed-index\n    load-items-url=\"/api/file-explorer/files/search\"\n    add-item-url=\"/api/file-explorer/files/save\"\n    update-item-url=\"/api/file-explorer/files/save\"\n    remove-item-url=\"/api/file-explorer/files/delete\"\n    show-refresh-btn\n    show-export-btn\n    show-icon-btn\n    row-key=\"id\"\n    row-title=\"name\"\u003e\n\t...\n\n    \u003ctemplate v-slot:filter=\"{ conditions }\"\u003e\n\t\t...\n    \u003c/template\u003e\n    \n    ...\n    \n    \u003ctemplate v-slot:editor=\"{ editedItem, type }\"\u003e\n\t\t...\n    \u003c/template\u003e\n    \n    ...\n\u003c/CCrudTable\u003e\n```\n\n[完整的示例参考Table1.vue](./src/demos/Table1.vue)\n\n效果图：\n\n![CCrudTable](./images/c-crud-table1.png)\n\n![CCrudTable](./images/c-crud-table2.png)\n\n![CCrudTable](./images/c-crud-table3.png)\n\n![CCrudTable](./images/c-crud-table4.png)\n\n* 属性\n\n  * | 名称                 | 描述                                                         | 类型             | 默认值   |\n    | -------------------- | ------------------------------------------------------------ | ---------------- | -------- |\n    | `title`              | 标题                                                         | `string`         | `null`   |\n    | `columns`            | 表头列，同`VDataTableServer`的`headers`属性                  | `array`          | `[]`     |\n    | `total`              | 数据集总数，同`VDataTableServer`的`items-length`属性         | `array`          | `0`      |\n    | `data`               | 数据集记录，同`VDataTableServer`的`items`属性                | `array`          | `[]`     |\n    | `showIndex`          | 是否显示序号列                                               | `boolean`        | `true`   |\n    | `fixedIndex`         | 是否固定序号列                                               | `boolean`        | `false`  |\n    | `showOperation`      | 是否显示操作列                                               | `boolean`        | `true`   |\n    | `showIconBtn`        | 是否显示图标按钮                                             | `boolean`        | `false`  |\n    | `showAddBtn`         | 是否显示新增按钮                                             | `boolean`        | `true`   |\n    | `showRefreshBtn`     | 是否显示刷新按钮                                             | `boolean`        | `false`  |\n    | `showFilterBtn`      | 是否显示过滤按钮                                             | `boolean`        | `true`   |\n    | `showExportBtn`      | 是否显示导出按钮                                             | `boolean`        | `false`  |\n    | `exportType`         | 导出类型，可选值有`excel`、`image`等                         | `string`         | `excel`  |\n    | `showUpdateBtn`      | 是否显示更新按钮                                             | `boolean`        | `true`   |\n    | `showDeleteBtn`      | 是否显示删除按钮                                             | `boolean`        | `true`   |\n    | `loadItemsUrl`       | 加载记录API地址，返回值必须包含`total`、`items`属性，例如：`{total: 10, items: [{...}, ...]}` | `string`         | `null`   |\n    | `loadItemsImmediate` | 是否立即加载                                                 | `boolean`        | `true`   |\n    | `filterCondition`    | 默认的过滤条件                                               | `object`         | `{}`     |\n    | `addItemUrl`         | 新增记录API地址                                              | `string`         | `null`   |\n    | `updateItemUrl`      | 更新记录API地址                                              | `string`         | `null`   |\n    | `removeItemUrl`      | 删除记录API地址                                              | `string`         | `null`   |\n    | `removeItemTip`      | 删除记录提示                                                 | `function`       | `null`   |\n    | `rowKey`             | 记录ID对应的属性                                             | `string`         | `null`   |\n    | `rowTitle`           | 记录名称对应的属性                                           | `string`         | `null`   |\n    | `sortMode`           | 排序模式，可选值有`client`、`server`，支持客户端、服务端排序 | `string`         | `server` |\n    | `sortKey`            | 默认的排序属性                                               | `string`         | `null`   |\n    | `sortOrder`          | 默认的排序顺序                                               | `string`         | `null`   |\n    | `disablePagination`  | 是否禁用分页                                                 | `boolean`        | `false`  |\n    | `pages`              | 页数，**适用于CCrudTable**                                   | `string、number` | `null`   |\n    | `pageSize`           | 每页记录数，**适用于CCrudTable**                             | `string、number` | `10`     |\n    | `widthPadding`       | 多余的宽度，用于计算表格宽度，实现宽度自适应                 | `number`         | `-1`     |\n    | `heightPadding`      | 多余的高度，用于计算表格高度，实现高度自适应                 | `number`         | `-1`     |\n    | `editorWidth`        | 编辑记录弹窗宽度                                             | `number`         | `600`    |\n    \n  * 其中，`columns`属性：\n\n    * 同`VDataTableServer`的`headers`属性；\n\n    * | 名称         | 描述                                                         | 类型       | 默认值      |\n      | ------------ | ------------------------------------------------------------ | ---------- | ----------- |\n      | `type`       | 列类型，配合`format`属性一起使用，可以对列的原始值进行转换、格式化。`type`的可选值有\u003cbr /\u003e（1）`code`：代码，代码列的最终显示由`codesRef`、`codes`，或`url`加载到代码集确定\u003cbr /\u003e（2）`index`：序号（组件内置）\u003cbr /\u003e（3）`operation`：操作（组件内置）\u003cbr /\u003e（4）`number`：数字，可以是整数，也可以是小数\u003cbr /\u003e（5）`integer`：整数\u003cbr /\u003e（6）`decimal`：小数\u003cbr /\u003e（7）`percent`：百分比\u003cbr /\u003e（8）`currency`：货币\u003cbr /\u003e（9）`datetime`：日期时间\u003cbr /\u003e（10）`longtext`：长文本 | `string`   | `null`      |\n      | `format`     | 列类型格式化参数，具体内容参考组合式函数[useFormat](./src/composables/format.js) | `any`      | `null`      |\n      | `codes`      | 代码集                                                       | `array`    | `[]`        |\n      | `url`        | 代码集API地址，若`codes`的值不为空，则以`codes`的值为主      | `string`   | `null`      |\n      | `codesRef`   | 与其他代码列共享代码集，值同属性`key`                        | `string`   | `null`      |\n      | `codeName`   | 代码名称对应的属性                                           | `string`   | `null`      |\n      | `codeValue`  | 代码值对应的属性                                             | `string`   | `null`      |\n      | `children`   | 子表头                                                       | `array`    | `[]`        |\n      | `renderable` | 是否允许自定义列显示效果，需要配合`item.${string}`插槽一起使用 | `boolean`  | `false`     |\n      | `hidden`     | 列是否隐藏                                                   | `boolean`  | `false`     |\n      | `editable`   | 列是否允许编辑                                               | `boolean`  | `true`      |\n      | `default`    | 列的默认值，支持**异步**，**用于新增**                       | `function` | `undefined` |\n      | `converter`  | 列的值转换器，支持**异步**，**用于新增、更新**               | `function` | `undefined` |\n      | `exportable` | 列是否允许导出                                               | `boolean`  | `true`      |\n      | `excelValue` | 列的值转换器，**用于导出**                                   | `function` | `undefined` |\n\n* 事件\n\n  * | 名称           | 描述                 | 参数                                                         |\n    | -------------- | -------------------- | ------------------------------------------------------------ |\n    | `load`         | 在加载记录**时**触发 | `{conditions: 过滤条件, sortState: 排序方式, page: 页码, size: 每页条数}` |\n    | `after-load`   | 在加载记录**后**触发 | `{total: 总数, items: 记录，conditions: 过滤条件, sortState: 排序方式, page: 页码, size: 每页条数}` |\n    | `add`          | 在新增记录**时**触发 | `{editedItem: 编辑的记录, conditions: 过滤条件, sortState: 排序方式}` |\n    | `after-add`    | 在新增记录**后**触发 |                                                              |\n    | `update`       | 在更新记录**时**触发 | `{editedItem: 编辑的记录, conditions: 过滤条件, sortState: 排序方式}` |\n    | `after-update` | 在更新记录**后**触发 |                                                              |\n    | `remove`       | 在删除记录**时**触发 | `{id: 记录ID, conditions: 过滤条件, sortState: 排序方式}`    |\n    | `after-remove` | 在删除记录**后**触发 |                                                              |\n    | `export`       | 在导出记录**时**触发 | `{items: 记录，conditions: 过滤条件}`                        |\n\n* 插槽\n\n  * | 名称                   | 描述                                       | 作用域                                                       |\n    | ---------------------- | ------------------------------------------ | ------------------------------------------------------------ |\n    | `title`                | 表格名称                                   |                                                              |\n    | `more-operations`      | 标题栏除了新增、刷新、导出额外的操作       | `{items: 记录}`                                              |\n    | `top`                  | 表格上方区域                               |                                                              |\n    | `item.${string}`       | 同`VDataTableServer`的插槽`item.${string}` | `{items: 所有记录, index: 索引, item: 当前记录, raw-value: 原始值, value: 格式化后的值}` |\n    | `item.more-operations` | 记录行除了更新、删除额外的操作             | `{item: 当前记录}`                                           |\n    | `filter`               | 过滤表单                                   | `{conditions: 过滤条件}`                                     |\n    | `editor`               | 编辑表单                                   | `{editorType: add（新增） / update（更新）, editedItem: 编辑的记录}` |\n    | `bottom`               | 表格下方区域                               | `{total: 总数, items: 记录, page: 页数, size: 每页数目}`     |\n\n* 方法\n\n  * | 名称              | 描述                 | 参数                                  | 返回值               |\n    | ----------------- | -------------------- | ------------------------------------- | -------------------- |\n    | `reload`          | 重新加载记录         |                                       |                      |\n    | `loadByCondition` | 根据过滤条件加载记录 | `additions：附加条件`                 |                      |\n    | `onAddClick`      | 打开新增弹窗         | `title: 标题`                         |                      |\n    | `onUpdateClick`   | 打开编辑弹窗         | `item: 编辑的记录`\u003cbr /\u003e`title: 标题` |                      |\n    | `saveAsImage`     | 把表格内容另存为图片 |                                       | Base64编码格式的图片 |\n\n#### （虚拟滚动）增删改查表格（CCrudTableV2）\n\n扩展自`VDataTableVirtual`组件，扩展内容同`CCrudTable`。\n\n```\n\u003cCCrudTableV2\n    title=\"文件资源管理器\"\n    :columns=\"columns\"\n    fixed-index\n    load-items-url=\"/api/file-explorer/files/search\"\n    add-item-url=\"/api/file-explorer/files/save\"\n    update-item-url=\"/api/file-explorer/files/save\"\n    remove-item-url=\"/api/file-explorer/files/delete\"\n    show-refresh-btn\n    show-export-btn\n    show-icon-btn\n    row-key=\"id\"\n    row-title=\"name\"\u003e\n    ...\n\u003c/CCrudTableV2\u003e\n```\n\n[完整的示例参考Table2.vue](./src/demos/Table2.vue)\n\n* 属性\n  * 同`CCrudTable`；\n* 事件\n\n  * 同`CCrudTable`；\n* 插槽\n\n  * 同`CCrudTable`；\n* 方法\n  * 同`CCrudTable`；\n\n\n### 交互（3）\n\n#### 消息框（CMessage）\n\n```\nimport {CMessage} from 'vuetify3-plus';\n\nCMessage.success('Hello, World');\nCMessage.info('Hello, World');\nCMessage.warning('Hello, World');\nCMessage.error('Hello, World');\n```\n\n* 属性\n\n  * 无；\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  | 名称      | 描述                  | 参数       | 返回值 |\n  | --------- | --------------------- | ---------- | ------ |\n  | `success` | 显示`success`类型消息 | `[string]` | 无     |\n  | `info`    | 显示`info`类型消息    | `[string]` | 无     |\n  | `warning` | 显示`warning`类型消息 | `[string]` | 无     |\n  | `error`   | 显示`error`类型消息   | `[string]` | 无     |\n\n#### 弹出框（CModal）\n\n用于替代`window.alert`、`window.confirm`和`window.prompt`。\n\n```\nimport {CModal} from 'vuetify3-plus';\n\nCModal.alert({\n    title: 'Alert',\n    message: 'Hello, World',\n});\n\nCModal.confirm({\n    title: 'Confirm',\n    message: 'Are you OK?',\n    onOkClick() {\n    \tCMessage.success('Yes');\n    },\n    onCancelClick() {\n    \tCMessage.error('No');\n    },\n});\n\nCModal.prompt({\n    title: 'Prompt',\n    message: 'Please input numbers:',\n    onOkClick(input) {\n    \tCMessage.success(`Numbers are ${input}`);\n    },\n    onCancelClick() {\n    \tCMessage.error('Cancel');\n    },\n});\n```\n\n* 属性\n\n  * 无；\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  | 名称      | 描述                             | 参数          | 返回值 |\n  | --------- |-------------| ---------- | ------ |\n  | `alert`   | 显示警告弹窗，并等待用户关闭     | `[object]`  | 无     |\n  | `confirm` | 显示确认弹窗，并等待用户确定     | `[object]`  | 无     |\n  | `prompt`  | 显示输入弹窗，并返回用户输入结果 | `[object]`  | 无     |\n  \n  参数说明：\n  \n  ```\n  {\n      title: 标题,\n      message: 消息,\n      onOkClick: 回调函数，当用户点击确定按钮时触发,\n      onCancelClick: 回调函数，当用户点击取消按钮时触发,\n  }\n  ```\n\n#### 加载（CLoading）\n\n```\nimport {CLoading} from 'vuetify3-plus';\n\nCLoading.open();\nCLoading.close();\n```\n\n* 属性\n\n  * 无；\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  | 名称    | 描述     | 参数 | 返回值 |\n  | ------- | -------- | ---- | ------ |\n  | `open`  | 显示加载 | 无   | 无     |\n  | `close` | 关闭加载 | 无   | 无     |\n\n### 表单（11）\n\n#### 密码（CPassword）\n\n```\n\u003cCPassword\n    v-model=\"password\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CPassword\u003e\n```\n效果图：\n\n![CPassword](./images/c-password.png)\n\n* 属性\n    * 同`VTextField`；\n* 事件\n    * 同`VTextField`；\n* 插槽\n    * 无；\n* 方法\n    * 无；\n\n#### 验证码（CCaptcha）\n```\n\u003cCCaptcha\n    v-model=\"captcha\"\n    url=\"/demos/captcha.jpg\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CCaptcha\u003e\n```\n效果图：\n\n![CCaptcha](./images/c-captcha.png)\n\n* 属性\n\n    * 同`VTextField`；\n\n    * | 名称  | 描述           | 类型     | 默认值 |\n      | ----- | -------------- | -------- | ------ |\n      | `url` | 验证码图片地址 | `string` | `null` |\n\n* 事件\n    * 同`VTextField`；\n\n* 插槽\n    * 无；\n\n* 方法\n    * 无；\n\n#### 邮件（CEmail）\n邮件地址输入自动补全。\n```\n\u003cCEmail\n    v-model=\"email\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CEmail\u003e\n```\n效果图：\n\n![CEmail](./images/c-email.png)\n\n* 属性\n\n    * 同`VTextField`；\n\n    * | 名称      | 描述       | 类型    | 默认值                                                       |\n        | --------- | ---------- | ------- | ------------------------------------------------------------ |\n        | `servers` | 邮件服务器 | `array` | `['gmail.com', 'qq.com', '163.com', 'vip.163.com', '126.com', 'vip.126.com', 'outlook.com', 'hotmail.com', 'foxmail.com', '139.com', '188.com']` |\n\n* 事件\n    * 同`VTextField`；\n\n* 插槽\n    * 无；\n\n* 方法\n    * 无；\n\n#### 日期选择（CDatePicker）\n```\n\u003cCDatePicker\n    v-model=\"date\"\n    label=\"日期\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CDatePicker\u003e\n```\n效果图：\n\n![CDatePicker](./images/c-datepicker.png)\n\n* 属性\n    * 同`VTextField`；\n* 事件\n    * 同`VTextField`；\n* 插槽\n    * 无；\n* 方法\n    * 无；\n\n#### 日期时间选择（CDatetimePicker）\n```\n\u003cCDatetimePicker\n    v-model=\"time\"\n    pick-second\n    label=\"日期时间\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CDatetimePicker\u003e\n```\n效果图：\n\n![CDatetimePicker](./images/c-datetimepicker.png)\n\n* 属性\n\n    * 同`VTextField`；\n\n    * | 名称         | 描述                                                     | 类型      | 默认值       |\n      | ------------ | -------------------------------------------------------- | --------- | ------------ |\n      | `pickSecond` | 是否允许选择秒                                           | `boolean` | `false`      |\n      | `dateFormat` | 日期格式                                                 | `string`  | `yyyy-MM-dd` |\n      | `timeFormat` | 时间格式，值可由用户自定义，或者根据`pickSecond`的值变化 | `string`  | `HH:mm`      |\n\n* 事件\n    * 同`VTextField`；\n\n* 插槽\n    * 无；\n\n* 方法\n    * 无；\n\n#### 级联选择（CCascader）\n```\n\u003cCCascader\n    v-model=\"productId1\"\n    label=\"商品\"\n    url=\"/demos/products1.json\"\n    variant=\"outlined\"\n    density=\"compact\"\n    multiple\n    clearable\u003e\n\u003c/CCascader\u003e\n```\n效果图：\n\n![CCascader](./images/c-cascader.png)\n\n* 属性\n\n    * 同`VTextField`；\n\n    * | 名称           | 描述                                                    | 类型      | 默认值     |\n      | -------------- | ------------------------------------------------------- | --------- | ---------- |\n      | `items`        | 数据集                                                  | `array`   | `[]`       |\n      | `url`          | 数据集API地址，若`items`的值不为空，则以`items`的值为主 | `string`  | `null`     |\n      | `itemId`       | 数据项的值对应属性                                      | `string`  | `id`       |\n      | `itemTitle`    | 数据项名称对应属性                                      | `string`  | `title`    |\n      | `itemChildren` | 数据项子集对应属性                                      | `string`  | `children` |\n      | `multiple`     | 是否允许多选                                            | `boolean` | `false`    |\n\n* 事件\n    * 同`VTextField`；\n\n* 插槽\n    * 无；\n\n* 方法\n    * 无；\n\n#### 树形选择（CTree）\n\n```\n\u003cCTree\n    v-model=\"productId\"\n    label=\"商品\"\n    url=\"/demos/products1.json\"\n    variant=\"outlined\"\n    density=\"compact\"\n    multiple\n    clearable\u003e\n\u003c/CTree\u003e\n```\n\n效果图：\n\n![CTree](./images/c-tree.png)\n\n* 属性\n\n  * 同`CCascader`；\n\n  * | 名称         | 描述                                                         | 类型      | 默认值  |\n    | ------------ | ------------------------------------------------------------ | --------- | ------- |\n    | `simple`     | 是否支持简单数据格式，例如：`[{id: 1, title: \"蔬菜\"}, {id: 11, pid: 1, title: \"白菜\"}...]` | `boolean` | `false` |\n    | `itemParent` | 数据项父记录对应属性                                         | `string`  | `pid`   |\n\n* 事件\n\n  * 同`CCascader`；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 下拉选择（CSelect）\n\n\u003e 选择类的组件，如VSelect、VAutocomplete等，鉴于它们的属性、数据结构类似，并且，对它们有部分相同的扩展需求——比如通过URL加载数据，返回选中项及名称等，因此，创建了一个无渲染组件——BaseSelect来达到上述目的。\n\n```\n\u003cCSelect\n    v-model=\"productId2\"\n    v-model:title=\"productTitle2\"\n    v-model:selected=\"selectedProducts2\"\n    label=\"商品\"\n    url=\"/demos/products2.json\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CSelect\u003e\n```\n\n* 属性\n\n    * 同`VSelect`；\n\n    * | 名称        | 描述                                                    | 类型     | 默认值  |\n      | ----------- | ------------------------------------------------------- | -------- | ------- |\n      | `items`     | 数据集                                                  | `array`  | `[]`    |\n      | `url`       | 数据集API地址，若`items`的值不为空，则以`items`的值为主 | `string` | `null`  |\n      | `itemValue` | 数据项的值对应属性                                      | `string` | `value` |\n      | `itemTitle` | 数据项名称对应属性                                      | `string` | `title` |\n\n* 事件\n\n    * 同`VSelect`；\n\n    * | 名称              | 描述         | 参数         |\n      | ----------------- | ------------ | ------------ |\n      | `update:selected` | 在选中时触发 | 选中项       |\n      | `update:title`    | 在选中时触发 | 选中项的名称 |\n\n* 插槽\n\n    * 无；\n\n* 方法\n\n    * 无；\n\n#### 自动补全（CAutocomplete）\n\n```\n\u003cCAutocomplete\n    v-model=\"productId2\"\n    v-model:title=\"productTitle2\"\n    label=\"商品\"\n    url=\"/demos/products2.json\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CAutocomplete\u003e\n```\n\n* 属性\n    * 同`VAutocomplete`和`CSelect`；\n* 事件\n    * 同`VAutocomplete`；\n* 插槽\n    * 无；\n* 方法\n    * 无；\n\n#### 纸片组（CChipGroup）\n\n```\n\u003cCChipGroup\n    v-model=\"productId2\"\n    url=\"/demos/products2.json\"\n    selected-class=\"text-warning\"\n    column\n    chip-size=\"small\"\n    chip-variant=\"outlined\"\n    chip-filter\u003e\n\u003c/CChipGroup\u003e\n```\n\n效果图：\n\n![CChipGroup](./images/c-chipgroup.png)\n\n* 属性\n    * 同`VChipGroup`和`CSelect`；\n    * 前缀是`chip-`的属性同`VChip`；\n* 事件\n    * 同`VChipGroup`；\n* 插槽\n    * 无；\n* 方法\n    * 无；\n\n#### 上传文件（CFileUpload）\n\n与`VFileInput`仅是一个输入框不同，`CFileUpload`能够识别文件类型，若文件是图片，则允许预览，否则支持下载。\n\n```\n\u003cCFileUpload\n    v-model=\"fileId\"\n    label=\"上传文件\"\n    upload-file-url=\"/api/file-explorer/files/upload\"\n    browse-file-url=\"/api/file-explorer/files/download\"\n    variant=\"outlined\"\n    density=\"compact\"\n    clearable\u003e\n\u003c/CFileUpload\u003e\n```\n\n效果图：\n\n![CFileUpload](./images/c-fileupload1.png)\n\n![CFileUpload](./images/c-fileupload2.png)\n\n![CFileUpload](./images/c-fileupload3.png)\n\n* 属性\n\n    * 同`VFileInput`；\n\n    * | 名称            | 描述                                                         | 类型     | 默认值 |\n      | --------------- | ------------------------------------------------------------ | -------- | ------ |\n      | `uploadFileUrl` | 文件上传地址，该API需要接收参数`upload`，返回文件信息，文件信息包含名称、缩略图、类型等。文件类型同MIME。 | `string` | `null` |\n      | `browseFileUrl` | 文件预览、下载地址，该API需要接收参数`id`（文件ID），并且支持`HEAD`方法，响应头中包含文件信息`file-info`。 | `string` | `null` |\n\n* 事件\n\n    * 同`VFileInput`；\n\n* 插槽\n\n    * 无；\n\n* 方法\n\n    * 无；\n\n### 图表（8）\n\n\u003e 图表类的组件，如CLineChart、CPieChart等，鉴于它们的属性、数据结构类似，并且，对它们有部分相同的扩展需求——比如通过URL加载数据，锁定宽高比、本地化等，因此，创建了一个公共的组件——BaseChart来达到上述目的。\n\n#### 折线图（CLineChart）\n\n```\n\u003cCLineChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    :smooth=\"true\"\n    :steped=\"false\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CLineChart\u003e\n\n\u003cCLineChart\n    url=\"/demos/chart-data2.json\"\n    title=\"2014、2024年浏览器份额排行榜\"\n    subtitle=\"近十年\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    show-legend\n    :show-point=\"false\"\n    multiple\n    :aspect-ratio=\"1\"\u003e\n\u003c/CLineChart\u003e\n```\n\n效果图：\n\n![CLineChart](./images/c-line-chart.png)\n\n* 属性\n\n  * | 名称            | 描述                                                         | 类型               | 默认值      |\n    | --------------- | ------------------------------------------------------------ | ------------------ | ----------- |\n    | `title`         | 标题                                                         | `string`           | `null`      |\n    | `subtitle`      | 副标题                                                       | `string`           | `null`      |\n    | `xAxisType`     | X轴类型，值同ECharts的`xAxis. type`属性                      | `string`           | `category`  |\n    | `xAxisTitle`    | X轴名称                                                      | `string`           | `null`      |\n    | `xAxisScale`    | X轴是否不从0开始                                             | `boolean`          | `false`     |\n    | `yAxisType`     | Y轴类型，值同ECharts的`yAxis. type`属性                      | `string`           | `value`     |\n    | `yAxisTitle`    | Y轴名称                                                      | `string`           | `null`      |\n    | `yAxisScale`    | Y轴是否不从0开始                                             | `boolean`          | `false`     |\n    | `yAxisUnit`     | Y轴单位                                                      | `string`           | `null`      |\n    | `yAxisMin`      | Y轴最小值                                                    | `string`、`number` | `null`      |\n    | `yAxisMax`      | Y轴最大值                                                    | `string`、`number` | `null`      |\n    | `series`        | 数据集，`key-value`方式                                      | `array`            | `[]`        |\n    | `url`           | 数据集API访问地址，若`series`的值不为空，则以`series`的值为主 | `string`           | `null`      |\n    | `itemSerieName` | 序列名称对应的属性                                           | `string`           | `serieName` |\n    | `itemName`      | 点名称对应的属性                                             | `string`           | `name`      |\n    | `nameTitle`     | 点名称的标题，**适用于气泡图**                               | `string`           | `''`        |\n    | `itemX`         | X轴对应的属性                                                | `string`           | `x`         |\n    | `itemY`         | Y轴对应的属性                                                | `string`           | `y`         |\n    | `itemZ`         | Z轴对应的属性，配合`minPointSize`和`maxPointSize`属性规定的气泡大小尺寸范围，自动确定气泡大小，**适用于气泡图** | `string`           | `null`      |\n    | `maxPointSize`  | 气泡最大的尺寸，**适用于气泡图**                             | `number`           | `100`       |\n    | `minPointSize`  | 气泡最小的尺寸，**适用于气泡图**                             | `number`           | `10`        |\n    | `aspectRatio`   | 宽高比                                                       | `string`、`number` | `auto`      |\n    | `multiple`      | 是否支持多个序列                                             | `boolean`          | `false`     |\n    | `showPoint`     | 是否显示点                                                   | `boolean`          | `true`      |\n    | `showLegend`    | 是否显示图例                                                 | `boolean`          | `false`     |\n    | `lines`         | 划线                                                         | `array`            | `[]`        |\n    | `smooth`        | 是否显示平滑曲线，**适用于折线图、面积图**                   | `boolean`          | `false`     |\n    | `steped`        | 是否显示梯形折线，**适用于折线图、面积图**                   | `boolean`          | `false`     |\n    | `stacked`       | 是否折叠，**适用于柱形图**                                   | `boolean`          | `false`     |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 面积图（CAreaChart）\n\n```\n\u003cCAreaChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CAreaChart\u003e\n\n\u003cCAreaChart\n    url=\"/demos/chart-data2.json\"\n    title=\"2014、2024年浏览器份额排行榜\"\n    subtitle=\"近十年\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    show-legend\n    multiple\n    :aspect-ratio=\"1\"\u003e\n\u003c/CAreaChart\u003e\n```\n\n效果图：\n\n![CAreaChart](./images/c-area-chart.png)\n\n* 属性\n\n  * 同`CLineChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n#### 柱形图（CColumnChart）\n\n```\n\u003cCColumnChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CColumnChart\u003e\n\n\u003cCColumnChart\n    url=\"/demos/chart-data2.json\"\n    title=\"2014、2024年浏览器份额排行榜\"\n    subtitle=\"近十年\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    show-legend\n    multiple\n    :stacked=\"false\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CColumnChart\u003e\n```\n\n效果图：\n\n![CColumnChart](./images/c-column-chart.png)\n\n* 属性\n\n  * 同`CLineChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n#### 气泡图（CBubbleChart）\n\n```\n\u003cCBubbleChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CBubbleChart\u003e\n\n\u003cCBubbleChart\n    url=\"/demos/chart-data2.json\"\n    title=\"2014、2024年浏览器份额排行榜\"\n    subtitle=\"近十年\"\n    x-axis-title=\"浏览器\"\n    y-axis-title=\"市占率\"\n    y-axis-unit=\"%\"\n    show-legend\n    multiple\n    :aspect-ratio=\"1\"\u003e\n\u003c/CBubbleChart\u003e\n```\n\n效果图：\n\n![CBubbleChart](./images/c-bubble-chart.png)\n\n* 属性\n\n  * 同`CLineChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n#### 饼图（CPieChart）\n\n```\n\u003cCPieChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    item-value=\"y\"\n    value-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CPieChart\u003e\n```\n\n效果图：\n\n![CPieChart](./images/c-pie-chart.png)\n\n* 属性\n\n  * | 名称          | 描述                                                         | 类型               | 默认值  |\n    | ------------- | ------------------------------------------------------------ | ------------------ | ------- |\n    | `title`       | 标题                                                         | `string`           | `null`  |\n    | `subtitle`    | 副标题                                                       | `string`           | `null`  |\n    | `series`      | 数据集，`key-value`方式                                      | `array`            | `[]`    |\n    | `url`         | 数据集API访问地址，若`series`的值不为空，则以`series`的值为主 | `string`           | `null`  |\n    | `itemName`    | 名称对应的属性                                               | `string`           | `name`  |\n    | `itemValue`   | 值对应的属性                                                 | `string`           | `value` |\n    | `valueUnit`   | 值的单位                                                     | `string`           | `''`    |\n    | `aspectRatio` | 宽高比                                                       | `string`、`number` | `auto`  |\n    | `showLegend`  | 是否显示图例                                                 | `boolean`          | `false` |\n    | `rounded`     | 是否显示圆角分割                                             | `boolean`          | `false` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 环形图（CDonutChart）\n\n```\n\u003cCDonutChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    item-value=\"y\"\n    value-unit=\"%\"\n    :rounded=\"false\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CDonutChart\u003e\n```\n\n效果图：\n\n![CDonutChart](./images/c-donut-chart.png)\n\n* 属性\n\n  * 同`CPieChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n#### 半环形图（CHalfDonutChart）\n\n```\n\u003cCHalfDonutChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    item-value=\"y\"\n    value-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CHalfDonutChart\u003e\n```\n\n效果图：\n\n![CHalfDonutChart](./images/c-half-donut-chart.png)\n\n* 属性\n\n  * 同`CPieChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n#### 鸡冠花图（CCoxcombChart）\n\n```\n\u003cCCoxcombChart\n    url=\"/demos/chart-data1.json\"\n    title=\"浏览器份额排行榜\"\n    subtitle=\"2024\"\n    item-value=\"y\"\n    value-unit=\"%\"\n    :aspect-ratio=\"1\"\u003e\n\u003c/CCoxcombChart\u003e\n```\n\n效果图：\n\n![CCoxcombChart](./images/c-coxcomb-chart.png)\n\n* 属性\n\n  * 同`CPieChart`；\n* 事件\n\n  * 无；\n* 插槽\n\n  * 无；\n* 方法\n\n  * 无；\n\n### 统计（9）\n\n\u003e 根据标题、副标题、文本等布局的不同，把统计类组件分成2类，并创建了2个父类组件——BaseStat1、BaseStat2来简化设计、开发。\n\n#### v1（CStat1）\n\n```\n\u003cCStat1\n    title=\"245k\"\n    subtitle=\"Sales\"\n    text=\"Calculated in last 7 days\"\n    color=\"red\"\n    variant=\"text\"\u003e\n\u003c/CStat1\u003e\n```\n\n效果图：\n\n![CStat1](./images/c-stat1.png)\n\n* 属性\n\n  * | 名称       | 描述   | 类型     | 默认值 |\n    | ---------- | ------ | -------- | ------ |\n    | `title`    | 标题   | `string` | `null` |\n    | `subtitle` | 副标题 | `string` | `null` |\n    | `text`     | 文本   | `string` | `null` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * | 名称       | 描述   | 作用域 |\n    | ---------- | ------ | ------ |\n    | `title`    | 标题   | 无     |\n    | `subtitle` | 副标题 | 无     |\n    | `text`     | 文本   | 无     |\n\n* 方法\n\n  * 无；\n\n#### v2（CStat2）\n\n```\n\u003cCStat2\n    title=\"245k\"\n    subtitle=\"Sales\"\n    icon=\"mdi-trending-up\"\n    color=\"red\"\n    text=\"Calculated in last 7 days\"\n    :chip=\"false\"\n    chip-text=\"+15%\"\u003e\n\u003c/CStat2\u003e\n```\n\n效果图：\n\n![CStat2](./images/c-stat2.png)\n\n* 属性\n\n  * | 名称        | 描述               | 类型      | 默认值  |\n    | ----------- | ------------------ | --------- | ------- |\n    | `title`     | 标题               | `string`  | `null`  |\n    | `subtitle`  | 副标题             | `string`  | `null`  |\n    | `text`      | 文本               | `string`  | `null`  |\n    | `icon`      | 图标               | `string`  | `null`  |\n    | `color`     | 颜色（图标）       | `string`  | `null`  |\n    | `chip`      | 是否以纸片形式显示 | `boolean` | `false` |\n    | `chip-text` | 纸片内容           | `string`  | `null`  |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * | 名称    | 描述 | 作用域 |\n    | ------- | ---- | ------ |\n    | `title` | 标题 | 无     |\n    | `icon`  | 图标 | 无     |\n    | `text`  | 文本 | 无     |\n\n* 方法\n\n  * 无；\n\n#### v3（CStat3）\n\n```\n\u003cCStat3\n    title=\"245k\"\n    subtitle=\"Sales\"\n    color=\"red\"\n    expected=\"999\"\n    actual=\"245\"\u003e\n\u003c/CStat3\u003e\n```\n\n效果图：\n\n![CStat3](./images/c-stat3.png)\n\n* 属性\n\n  * | 名称       | 描述           | 类型               | 默认值 |\n    | ---------- | -------------- | ------------------ | ------ |\n    | `title`    | 标题           | `string`           | `null` |\n    | `subtitle` | 副标题         | `string`           | `null` |\n    | `color`    | 颜色（进度条） | `string`           | `null` |\n    | `actual`   | 实际值         | `string`、`number` | `null` |\n    | `expected` | 预期值         | `string`、`number` | `null` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * | 名称       | 描述   | 作用域 |\n    | ---------- | ------ | ------ |\n    | `title`    | 标题   | 无     |\n    | `subtitle` | 副标题 | 无     |\n\n* 方法\n\n  * 无；\n\n#### v4（CStat4）\n\n```\n\u003cCStat4\n    title=\"245k\"\n    subtitle=\"Sales\"\n    text=\"Calculated in last 7 days\"\n    hint=\"+15%\"\n    color=\"red\"\u003e\n\u003c/CStat4\u003e\n```\n\n效果图：\n\n![CStat4](./images/c-stat4.png)\n\n* 属性\n\n  * | 名称       | 描述               | 类型     | 默认值 |\n    | ---------- | ------------------ | -------- | ------ |\n    | `title`    | 标题               | `string` | `null` |\n    | `subtitle` | 副标题             | `string` | `null` |\n    | `text`     | 文本               | `string` | `null` |\n    | `hint`     | 提示               | `string` | `null` |\n    | `color`    | 颜色（标记、强调） | `string` | `null` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * | 名称       | 描述   | 作用域 |\n    | ---------- | ------ | ------ |\n    | `title`    | 标题   | 无     |\n    | `subtitle` | 副标题 | 无     |\n    | `text`     | 文本   | 无     |\n    | `emphasis` | 强调   | 无     |\n\n* 方法\n\n  * 无；\n\n#### v5（CStat5）\n\n```\n\u003cCStat5\n    title=\"245k\"\n    subtitle=\"Sales\"\n    text=\"Calculated in last 7 days\"\n    icon=\"mdi-trending-up\"\n    color=\"red\"\u003e\n\u003c/CStat5\u003e\n```\n\n效果图：\n\n![CStat5](./images/c-stat5.png)\n\n* 属性\n\n  * | 名称       | 描述         | 类型     | 默认值 |\n    | ---------- | ------------ | -------- | ------ |\n    | `title`    | 标题         | `string` | `null` |\n    | `subtitle` | 副标题       | `string` | `null` |\n    | `text`     | 文本         | `string` | `null` |\n    | `icon`     | 图标         | `string` | `null` |\n    | `color`    | 颜色（图标） | `string` | `null` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 暂无；\n\n* 方法\n\n  * 无；\n\n#### v6（CStat6）\n\n```\n\u003cCStat6\n    title=\"245k\"\n    subtitle=\"Sales\"\n    icon=\"mdi-trending-up\"\n    color=\"red\"\u003e\n\u003c/CStat6\u003e\n```\n\n效果图：\n\n![CStat6](./images/c-stat6.png)\n\n* 属性\n\n  * | 名称       | 描述                                                         | 类型      | 默认值     |\n    | ---------- | ------------------------------------------------------------ | --------- | ---------- |\n    | `title`    | 标题                                                         | `string`  | `null`     |\n    | `subtitle` | 副标题                                                       | `string`  | `null`     |\n    | `icon`     | 图标                                                         | `string`  | `null`     |\n    | `color`    | 颜色（图标）                                                 | `string`  | `null`     |\n    | `rounded`  | 形状是否是圆角矩形，默认圆形                                 | `boolean` | `true`     |\n    | `variant`  | 变体，可选值有`flat`、`text`、`elevated`、`tonal`、`outlined`、`plain`等 | `string`  | `elevated` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * | 名称       | 描述   | 作用域 |\n    | ---------- | ------ | ------ |\n    | `title`    | 标题   | 无     |\n    | `subtitle` | 副标题 | 无     |\n    | `icon`     | 图标   | 无     |\n\n* 方法\n\n  * 无；\n\n#### v7（CStat7）\n\n```\n\u003cCStat7\n    title=\"Google Drive\"\n    subtitle=\"Automate your file upload workflow\"\n    icon=\"mdi-google-drive\"\n    avatar\n    color=\"grey\"\n    btn-text=\"Connected\"\n    btn-color=\"red\"\u003e\n\u003c/CStat7\u003e\n```\n\n效果图：\n\n![CStat7](./images/c-stat7.png)\n\n* 属性\n\n  * | 名称       | 描述               | 类型      | 默认值  |\n    | ---------- | ------------------ | --------- | ------- |\n    | `title`    | 标题               | `string`  | `null`  |\n    | `subtitle` | 副标题             | `string`  | `null`  |\n    | `avatar`   | 是否显示头像       | `boolean` | `false` |\n    | `icon`     | 图标               | `string`  | `null`  |\n    | `color`    | 颜色（头像、图标） | `string`  | `null`  |\n    | `btnText`  | 按钮文本           | `string`  | `null`  |\n    | `btnColor` | 按钮颜色           | `string`  | `null`  |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 暂无；\n\n* 方法\n\n  * 无；\n\n#### v8（CStat8）\n\n```\n\u003cCStat8\n    title=\"245k\"\n    subtitle=\"Sales\"\n    color=\"red\"\n    type=\"trend\"\n    :items=\"[4, 2, 5, 7, 1, 6, 3]\"\u003e\n\u003c/CStat8\u003e\n\n\u003cCStat8\n    title=\"245k\"\n    subtitle=\"Sales\"\n    color=\"red\"\n    type=\"bar\"\n    :items=\"[4, 2, 5, 6, 17, 1, 3]\"\u003e\n\u003c/CStat8\u003e\n```\n\n效果图：\n\n![CStat8](./images/c-stat8.png)\n\n* 属性\n\n  * | 名称       | 描述                                  | 类型     | 默认值  |\n    | ---------- | ------------------------------------- | -------- | ------- |\n    | `title`    | 标题                                  | `string` | `null`  |\n    | `subtitle` | 副标题                                | `string` | `null`  |\n    | `text`     | 文本                                  | `string` | `null`  |\n    | `icon`     | 图标                                  | `string` | `null`  |\n    | `color`    | 颜色                                  | `string` | `null`  |\n    | `type`     | Sparkline类型，可选值有`trend`、`bar` | `string` | `trend` |\n    | `items`    | Sparkline数据                         | `array`  | `[]`    |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 暂无；\n\n* 方法\n\n  * 无；\n\n#### v9（CStat9）\n\n```\n\u003cCStat9\n    title=\"245k\"\n    subtitle=\"Sales\"\n    color=\"red\"\n    expected=\"999\"\n    actual=\"245\"\u003e\n\u003c/CStat9\u003e\n```\n\n效果图：\n\n![CStat9](./images/c-stat9.png)\n\n* 属性\n\n  * | 名称       | 描述   | 类型             | 默认值 |\n    | ---------- | ------ | ---------------- | ------ |\n    | `title`    | 标题   | `string`         | `null` |\n    | `subtitle` | 副标题 | `string`         | `null` |\n    | `text`     | 文本   | `string`         | `null` |\n    | `icon`     | 图标   | `string`         | `null` |\n    | `color`    | 颜色   | `string`         | `null` |\n    | `actual`   | 实际值 | `string、number` | `null` |\n    | `expected` | 预估值 | `string、number` | `null` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 暂无；\n\n* 方法\n\n  * 无；\n\n### 其他（5）\n\n#### 图片（CImg）\n\n结合`VImg`和`v-viewer`，支持放大缩小、旋转、翻转图片等。\n\n```\n\u003cCImg src=\"/demos/bear.jpg\"\u003e\u003c/CImg\u003e\n```\n\n效果图：\n\n![CImg](./images/c-img1.png)\n\n![CPassword](./images/c-img2.png)\n\n* 属性\n  * 同`VImg`；\n* 事件\n  * 同`VImg`；\n* 插槽\n  * 无；\n* 方法\n  * 无；\n\n#### 链接（CAnchor）\n\n```\n\u003cCAnchor\n    text=\"百度\"\n    href=\"https://www.baidu.com/\"\n    hint=\"百度一下，你就知道\"\n    show-hint\u003e\n\u003c/CAnchor\u003e\n```\n\n* 属性\n\n  * | 名称       | 描述                             | 类型      | 默认值    |\n    | ---------- | -------------------------------- | --------- | --------- |\n    | `text`     | 名称                             | `string`  | `null`    |\n    | `href`     | 链接                             | `string`  | `null`    |\n    | `disabled` | 是否禁用                         | `boolean` | `false`   |\n    | `hint`     | 提示                             | `string`  | `null`    |\n    | `icon`     | 图标，若不为空，则以图标形式显示 | `string`  | `null`    |\n    | `color`    | 颜色                             | `string`  | `primary` |\n  \n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 标签（CLabel）\n\n```\n\u003cCLabel\n    :value=\"21\"\n    url=\"/demos/products2.json\"\u003e\n\u003c/CLabel\u003e\n```\n\n* 属性\n\n  * | 名称        | 描述                                                    | 类型     | 默认值  |\n    | ----------- | ------------------------------------------------------- | -------- | ------- |\n    | `value`     | 值                                                      | `any`    | `null`  |\n    | `items`     | 数据集                                                  | `array`  | `[]`    |\n    | `url`       | 数据集API地址，若`items`的值不为空，则以`items`的值为主 | `string` | `null`  |\n    | `itemTitle` | 数据项的值对应属性                                      | `string` | `title` |\n    | `itemValue` | 数据项名称对应属性                                      | `string` | `value` |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 旋转器（CSpinner）\n\n参考Quasar框架实现。\n\n```\n\u003cCSpinner \n    class=\"ml-2\" \n    size=\"2em\" \n    :thickness=\"2\"\u003e\n \u003c/CSpinner\u003e\n```\n\n效果图：\n\n![CSpinner](./images/c-spinner.png)\n\n* 属性\n\n  * | 名称        | 描述     | 类型               | 默认值    |\n    | ----------- | -------- | ------------------ | --------- |\n    | `color`     | 颜色     | `string`           | `primary` |\n    | `size`      | 尺寸大小 | `string`、`number` | `1em`     |\n    | `thickness` | 粗细程度 | `number`           | `5`       |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * 无；\n\n#### 富文本编辑器（CCKEditor5）\n\n```\n\u003cCCKEditor5\n    ref=\"ckeditor\"\n    v-model=\"html\"\n    upload-file-url=\"/api/file-explorer/files/upload\"\n    browse-file-url=\"/api/file-explorer/files/download\"\u003e\n\u003c/CCKEditor5\u003e\n```\n\n效果图：\n\n![CCKEditor5](./images/c-ckeditor5.png)\n\n* 属性\n\n  * | 名称            | 描述                                                         | 类型     | 默认值      |\n    | --------------- | ------------------------------------------------------------ | -------- | ----------- |\n    | `modelValue`    | 值                                                           | `string` | `null`      |\n    | `adapter`       | 文件上传适配器，可选的值有`simple`，`ckeditor5`。若值为`simple`时，则使用CKEditor 5内置的`SimpleUploadAdapter`。 | `string` | `ckeditor5` |\n    | `uploadFileUrl` | 文件上传地址，当`adapter`的值为`ckeditor5`时，该API需要接收参数`upload`，返回文件信息。 | `string` | `null`      |\n    | `browseFileUrl` | 文件预览、下载地址，当`adapter`的值为`ckeditor5`时，该API需要接收参数`id`（文件ID）。 | `string` | `null`      |\n\n* 事件\n\n  * 无；\n\n* 插槽\n\n  * 无；\n\n* 方法\n\n  * | 名称      | 描述                           | 参数 | 返回值   |\n    | --------- | ------------------------------ | ---- | -------- |\n    | `getHtml` | 获取HTML，同属性`modelValue`。 | 无   | `string` |\n    | `getText` | 获取纯文本。                   | 无   | `string` |\n\n    ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarnier-zhang%2Fvuetify3-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarnier-zhang%2Fvuetify3-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarnier-zhang%2Fvuetify3-plus/lists"}