Vuetify3 Plus

顾名思义，Vuetify3 Plus，不是一套全新的UI框架，而是对Vuetify 3的补充和加强。

在我们把Vuetify从v2升级到v3的时候，Vuetify的最新版本是3.3.x，此时的组件库还不够完备，VDataTable、VDatePicker等尚在Labs积极开发中，VTimePicker、VTreeView等还不见踪影，而上述组件对To B应用来说是不可或缺的，加上部分组件不匹配我们的使用习惯，为了：

• 进一步扩大组件库；
• 补位尚在规划、开发中的组件；
• 提升组件的可用性、易用性；

我们只好自己动手寻找合适的替代品、扩展现有的组件库，最终的成果就是——Vuetify3 Plus，后期基于Vuetify 3.4.0+，部分组价（或灵感）来自于Element Plus和Quasar。

组件名称前缀——“C”，可以解释成“Core”、“Common”；

安装方法

1. 克隆Vuetify3-Plus项目源码：

   git clone https://github.com/Warnier-zhang/Vuetify3-Plus.git
   

2. 编译、打包项目：

   npm install && npm run build
   

3. 在新项目中，编辑package.json文件，引入Vuetify3 Plus，并安装：

   package.json
   ---
   "dependencies": {
       ...
       "vuetify3-plus": "file:../Vuetify3-Plus",
       ...
   }
   
   npm install
   

运行示例

在克隆下来的项目源码中，执行npm run dev脚本，然后，访问http://localhost:5173

使用指南

表格（3）

增删改查表格（CCrudTable）

扩展自VDataTableServer组件，在保留VDataTableServer用法、优点的基础上，参考EasyUI、miniUI时代的DataGrid，进一步封装查询、新增、更新、删除、过滤、刷新、导出Excel等操作逻辑。

<CCrudTable
    title="文件资源管理器"
    :columns="columns"
    fixed-index
    load-items-url="/api/file-explorer/files/search"
    add-item-url="/api/file-explorer/files/save"
    update-item-url="/api/file-explorer/files/save"
    remove-item-url="/api/file-explorer/files/delete"
    show-refresh-btn
    show-export-btn
    show-icon-btn
    row-key="id"
    row-title="name">
	...

    <template v-slot:filter="{ conditions }">
		...
    </template>
    
    ...
    
    <template v-slot:editor="{ editedItem, type }">
		...
    </template>
    
    ...
</CCrudTable>

完整的示例参考Table1.vue

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    columns	表头列，同VDataTableServer的headers属性	array	[]
    total	数据集总数，同VDataTableServer的items-length属性	array	0
    data	数据集记录，同VDataTableServer的items属性	array	[]
    showIndex	是否显示序号列	boolean	true
    fixedIndex	是否固定序号列	boolean	false
    showOperation	是否显示操作列	boolean	true
    showIconBtn	是否显示图标按钮	boolean	false
    showAddBtn	是否显示新增按钮	boolean	true
    showRefreshBtn	是否显示刷新按钮	boolean	false
    showFilterBtn	是否显示过滤按钮	boolean	true
    showExportBtn	是否显示导出按钮	boolean	false
    exportType	导出类型，可选值有excel、image等	string	excel
    showUpdateBtn	是否显示更新按钮	boolean	true
    showDeleteBtn	是否显示删除按钮	boolean	true
    loadItemsUrl	加载记录API地址，返回值必须包含total、items属性，例如：{total: 10, items: [{...}, ...]}	string	null
    loadItemsImmediate	是否立即加载	boolean	true
    filterCondition	默认的过滤条件	object	{}
    addItemUrl	新增记录API地址	string	null
    updateItemUrl	更新记录API地址	string	null
    removeItemUrl	删除记录API地址	string	null
    removeItemTip	删除记录提示	function	null
    rowKey	记录ID对应的属性	string	null
    rowTitle	记录名称对应的属性	string	null
    sortMode	排序模式，可选值有client、server，支持客户端、服务端排序	string	server
    sortKey	默认的排序属性	string	null
    sortOrder	默认的排序顺序	string	null
    disablePagination	是否禁用分页	boolean	false
    pages	页数，适用于CCrudTable	string、number	null
    pageSize	每页记录数，适用于CCrudTable	string、number	10
    widthPadding	多余的宽度，用于计算表格宽度，实现宽度自适应	number	-1
    heightPadding	多余的高度，用于计算表格高度，实现高度自适应	number	-1
    editorWidth	编辑记录弹窗宽度	number	600

  • 其中，columns属性：

    • 同VDataTableServer的headers属性；

    • 名称	描述	类型	默认值
      type	列类型，配合format属性一起使用，可以对列的原始值进行转换、格式化。type的可选值有 （1）code：代码，代码列的最终显示由codesRef、codes，或url加载到代码集确定 （2）index：序号（组件内置） （3）operation：操作（组件内置） （4）number：数字，可以是整数，也可以是小数 （5）integer：整数 （6）decimal：小数 （7）percent：百分比 （8）currency：货币 （9）datetime：日期时间 （10）longtext：长文本	string	null
      format	列类型格式化参数，具体内容参考组合式函数useFormat	any	null
      codes	代码集	array	[]
      url	代码集API地址，若codes的值不为空，则以codes的值为主	string	null
      codesRef	与其他代码列共享代码集，值同属性key	string	null
      codeName	代码名称对应的属性	string	null
      codeValue	代码值对应的属性	string	null
      children	子表头	array	[]
      renderable	是否允许自定义列显示效果，需要配合item.${string}插槽一起使用	boolean	false
      hidden	列是否隐藏	boolean	false
      editable	列是否允许编辑	boolean	true
      default	列的默认值，支持异步，用于新增	function	undefined
      converter	列的值转换器，支持异步，用于新增、更新	function	undefined
      exportable	列是否允许导出	boolean	true
      excelValue	列的值转换器，用于导出	function	undefined

• 事件

  • 名称	描述	参数
    load	在加载记录时触发	{conditions: 过滤条件, sortState: 排序方式, page: 页码, size: 每页条数}
    after-load	在加载记录后触发	{total: 总数, items: 记录，conditions: 过滤条件, sortState: 排序方式, page: 页码, size: 每页条数}
    add	在新增记录时触发	{editedItem: 编辑的记录, conditions: 过滤条件, sortState: 排序方式}
    after-add	在新增记录后触发
    update	在更新记录时触发	{editedItem: 编辑的记录, conditions: 过滤条件, sortState: 排序方式}
    after-update	在更新记录后触发
    remove	在删除记录时触发	{id: 记录ID, conditions: 过滤条件, sortState: 排序方式}
    after-remove	在删除记录后触发
    export	在导出记录时触发	{items: 记录，conditions: 过滤条件}

• 插槽

  • 名称	描述	作用域
    title	表格名称
    more-operations	标题栏除了新增、刷新、导出额外的操作	{items: 记录}
    top	表格上方区域
    item.${string}	同VDataTableServer的插槽item.${string}	{items: 所有记录, index: 索引, item: 当前记录, raw-value: 原始值, value: 格式化后的值}
    item.more-operations	记录行除了更新、删除额外的操作	{item: 当前记录}
    filter	过滤表单	{conditions: 过滤条件}
    editor	编辑表单	{editorType: add（新增） / update（更新）, editedItem: 编辑的记录}
    bottom	表格下方区域	{total: 总数, items: 记录, page: 页数, size: 每页数目}

• 方法

  • 名称	描述	参数	返回值
    reload	重新加载记录
    loadByCondition	根据过滤条件加载记录	additions：附加条件
    onAddClick	打开新增弹窗	title: 标题
    onUpdateClick	打开编辑弹窗	item: 编辑的记录 title: 标题
    saveAsImage	把表格内容另存为图片		Base64编码格式的图片

（虚拟滚动）增删改查表格（CCrudTableV2）

扩展自VDataTableVirtual组件，扩展内容同CCrudTable。

<CCrudTableV2
    title="文件资源管理器"
    :columns="columns"
    fixed-index
    load-items-url="/api/file-explorer/files/search"
    add-item-url="/api/file-explorer/files/save"
    update-item-url="/api/file-explorer/files/save"
    remove-item-url="/api/file-explorer/files/delete"
    show-refresh-btn
    show-export-btn
    show-icon-btn
    row-key="id"
    row-title="name">
    ...
</CCrudTableV2>

完整的示例参考Table2.vue

• 属性

  • 同CCrudTable；

• 事件

  • 同CCrudTable；

• 插槽

  • 同CCrudTable；

• 方法

  • 同CCrudTable；

交互（3）

消息框（CMessage）

import {CMessage} from 'vuetify3-plus';

CMessage.success('Hello, World');
CMessage.info('Hello, World');
CMessage.warning('Hello, World');
CMessage.error('Hello, World');

• 属性

  • 无；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  名称	描述	参数	返回值
  success	显示success类型消息	[string]	无
  info	显示info类型消息	[string]	无
  warning	显示warning类型消息	[string]	无
  error	显示error类型消息	[string]	无

弹出框（CModal）

用于替代window.alert、window.confirm和window.prompt。

import {CModal} from 'vuetify3-plus';

CModal.alert({
    title: 'Alert',
    message: 'Hello, World',
});

CModal.confirm({
    title: 'Confirm',
    message: 'Are you OK?',
    onOkClick() {
    	CMessage.success('Yes');
    },
    onCancelClick() {
    	CMessage.error('No');
    },
});

CModal.prompt({
    title: 'Prompt',
    message: 'Please input numbers:',
    onOkClick(input) {
    	CMessage.success(`Numbers are ${input}`);
    },
    onCancelClick() {
    	CMessage.error('Cancel');
    },
});

• 属性

  • 无；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  名称	描述	参数	返回值
  alert	显示警告弹窗，并等待用户关闭	[object]	无
  confirm	显示确认弹窗，并等待用户确定	[object]	无
  prompt	显示输入弹窗，并返回用户输入结果	[object]	无

  参数说明：

  {
      title: 标题,
      message: 消息,
      onOkClick: 回调函数，当用户点击确定按钮时触发,
      onCancelClick: 回调函数，当用户点击取消按钮时触发,
  }
  

加载（CLoading）

import {CLoading} from 'vuetify3-plus';

CLoading.open();
CLoading.close();

• 属性

  • 无；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  名称	描述	参数	返回值
  open	显示加载	无	无
  close	关闭加载	无	无

表单（11）

密码（CPassword）

<CPassword
    v-model="password"
    variant="outlined"
    density="compact"
    clearable>
</CPassword>

效果图：

• 属性
  • 同VTextField；
• 事件
  • 同VTextField；
• 插槽
  • 无；
• 方法
  • 无；

验证码（CCaptcha）

<CCaptcha
    v-model="captcha"
    url="/demos/captcha.jpg"
    variant="outlined"
    density="compact"
    clearable>
</CCaptcha>

效果图：

• 属性

  • 同VTextField；

  • 名称	描述	类型	默认值
    url	验证码图片地址	string	null

• 事件

  • 同VTextField；

• 插槽

  • 无；

• 方法

  • 无；

邮件（CEmail）

邮件地址输入自动补全。

<CEmail
    v-model="email"
    variant="outlined"
    density="compact"
    clearable>
</CEmail>

效果图：

• 属性

  • 同VTextField；

  • 名称	描述	类型	默认值
    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']

• 事件

  • 同VTextField；

• 插槽

  • 无；

• 方法

  • 无；

日期选择（CDatePicker）

<CDatePicker
    v-model="date"
    label="日期"
    variant="outlined"
    density="compact"
    clearable>
</CDatePicker>

效果图：

• 属性
  • 同VTextField；
• 事件
  • 同VTextField；
• 插槽
  • 无；
• 方法
  • 无；

日期时间选择（CDatetimePicker）

<CDatetimePicker
    v-model="time"
    pick-second
    label="日期时间"
    variant="outlined"
    density="compact"
    clearable>
</CDatetimePicker>

效果图：

• 属性

  • 同VTextField；

  • 名称	描述	类型	默认值
    pickSecond	是否允许选择秒	boolean	false
    dateFormat	日期格式	string	yyyy-MM-dd
    timeFormat	时间格式，值可由用户自定义，或者根据pickSecond的值变化	string	HH:mm

• 事件

  • 同VTextField；

• 插槽

  • 无；

• 方法

  • 无；

级联选择（CCascader）

<CCascader
    v-model="productId1"
    label="商品"
    url="/demos/products1.json"
    variant="outlined"
    density="compact"
    multiple
    clearable>
</CCascader>

效果图：

• 属性

  • 同VTextField；

  • 名称	描述	类型	默认值
    items	数据集	array	[]
    url	数据集API地址，若items的值不为空，则以items的值为主	string	null
    itemId	数据项的值对应属性	string	id
    itemTitle	数据项名称对应属性	string	title
    itemChildren	数据项子集对应属性	string	children
    multiple	是否允许多选	boolean	false

• 事件

  • 同VTextField；

• 插槽

  • 无；

• 方法

  • 无；

树形选择（CTree）

<CTree
    v-model="productId"
    label="商品"
    url="/demos/products1.json"
    variant="outlined"
    density="compact"
    multiple
    clearable>
</CTree>

效果图：

• 属性

  • 同CCascader；

  • 名称	描述	类型	默认值
    simple	是否支持简单数据格式，例如：[{id: 1, title: "蔬菜"}, {id: 11, pid: 1, title: "白菜"}...]	boolean	false
    itemParent	数据项父记录对应属性	string	pid

• 事件

  • 同CCascader；

• 插槽

  • 无；

• 方法

  • 无；

下拉选择（CSelect）

选择类的组件，如VSelect、VAutocomplete等，鉴于它们的属性、数据结构类似，并且，对它们有部分相同的扩展需求——比如通过URL加载数据，返回选中项及名称等，因此，创建了一个无渲染组件——BaseSelect来达到上述目的。

<CSelect
    v-model="productId2"
    v-model:title="productTitle2"
    v-model:selected="selectedProducts2"
    label="商品"
    url="/demos/products2.json"
    variant="outlined"
    density="compact"
    clearable>
</CSelect>

• 属性

  • 同VSelect；

  • 名称	描述	类型	默认值
    items	数据集	array	[]
    url	数据集API地址，若items的值不为空，则以items的值为主	string	null
    itemValue	数据项的值对应属性	string	value
    itemTitle	数据项名称对应属性	string	title

• 事件

  • 同VSelect；

  • 名称	描述	参数
    update:selected	在选中时触发	选中项
    update:title	在选中时触发	选中项的名称

• 插槽

  • 无；

• 方法

  • 无；

自动补全（CAutocomplete）

<CAutocomplete
    v-model="productId2"
    v-model:title="productTitle2"
    label="商品"
    url="/demos/products2.json"
    variant="outlined"
    density="compact"
    clearable>
</CAutocomplete>

• 属性
  • 同VAutocomplete和CSelect；
• 事件
  • 同VAutocomplete；
• 插槽
  • 无；
• 方法
  • 无；

纸片组（CChipGroup）

<CChipGroup
    v-model="productId2"
    url="/demos/products2.json"
    selected-class="text-warning"
    column
    chip-size="small"
    chip-variant="outlined"
    chip-filter>
</CChipGroup>

效果图：

• 属性
  • 同VChipGroup和CSelect；
  • 前缀是chip-的属性同VChip；
• 事件
  • 同VChipGroup；
• 插槽
  • 无；
• 方法
  • 无；

上传文件（CFileUpload）

与VFileInput仅是一个输入框不同，CFileUpload能够识别文件类型，若文件是图片，则允许预览，否则支持下载。

<CFileUpload
    v-model="fileId"
    label="上传文件"
    upload-file-url="/api/file-explorer/files/upload"
    browse-file-url="/api/file-explorer/files/download"
    variant="outlined"
    density="compact"
    clearable>
</CFileUpload>

效果图：

• 属性

  • 同VFileInput；

  • 名称	描述	类型	默认值
    uploadFileUrl	文件上传地址，该API需要接收参数upload，返回文件信息，文件信息包含名称、缩略图、类型等。文件类型同MIME。	string	null
    browseFileUrl	文件预览、下载地址，该API需要接收参数id（文件ID），并且支持HEAD方法，响应头中包含文件信息file-info。	string	null

• 事件

  • 同VFileInput；

• 插槽

  • 无；

• 方法

  • 无；

图表（8）

图表类的组件，如CLineChart、CPieChart等，鉴于它们的属性、数据结构类似，并且，对它们有部分相同的扩展需求——比如通过URL加载数据，锁定宽高比、本地化等，因此，创建了一个公共的组件——BaseChart来达到上述目的。

折线图（CLineChart）

<CLineChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    :smooth="true"
    :steped="false"
    :aspect-ratio="1">
</CLineChart>

<CLineChart
    url="/demos/chart-data2.json"
    title="2014、2024年浏览器份额排行榜"
    subtitle="近十年"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    show-legend
    :show-point="false"
    multiple
    :aspect-ratio="1">
</CLineChart>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    xAxisType	X轴类型，值同ECharts的xAxis. type属性	string	category
    xAxisTitle	X轴名称	string	null
    xAxisScale	X轴是否不从0开始	boolean	false
    yAxisType	Y轴类型，值同ECharts的yAxis. type属性	string	value
    yAxisTitle	Y轴名称	string	null
    yAxisScale	Y轴是否不从0开始	boolean	false
    yAxisUnit	Y轴单位	string	null
    yAxisMin	Y轴最小值	string、number	null
    yAxisMax	Y轴最大值	string、number	null
    series	数据集，key-value方式	array	[]
    url	数据集API访问地址，若series的值不为空，则以series的值为主	string	null
    itemSerieName	序列名称对应的属性	string	serieName
    itemName	点名称对应的属性	string	name
    nameTitle	点名称的标题，适用于气泡图	string	''
    itemX	X轴对应的属性	string	x
    itemY	Y轴对应的属性	string	y
    itemZ	Z轴对应的属性，配合minPointSize和maxPointSize属性规定的气泡大小尺寸范围，自动确定气泡大小，适用于气泡图	string	null
    maxPointSize	气泡最大的尺寸，适用于气泡图	number	100
    minPointSize	气泡最小的尺寸，适用于气泡图	number	10
    aspectRatio	宽高比	string、number	auto
    multiple	是否支持多个序列	boolean	false
    showPoint	是否显示点	boolean	true
    showLegend	是否显示图例	boolean	false
    lines	划线	array	[]
    smooth	是否显示平滑曲线，适用于折线图、面积图	boolean	false
    steped	是否显示梯形折线，适用于折线图、面积图	boolean	false
    stacked	是否折叠，适用于柱形图	boolean	false

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

面积图（CAreaChart）

<CAreaChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    :aspect-ratio="1">
</CAreaChart>

<CAreaChart
    url="/demos/chart-data2.json"
    title="2014、2024年浏览器份额排行榜"
    subtitle="近十年"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    show-legend
    multiple
    :aspect-ratio="1">
</CAreaChart>

效果图：

• 属性

  • 同CLineChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

柱形图（CColumnChart）

<CColumnChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    :aspect-ratio="1">
</CColumnChart>

<CColumnChart
    url="/demos/chart-data2.json"
    title="2014、2024年浏览器份额排行榜"
    subtitle="近十年"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    show-legend
    multiple
    :stacked="false"
    :aspect-ratio="1">
</CColumnChart>

效果图：

• 属性

  • 同CLineChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

气泡图（CBubbleChart）

<CBubbleChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    :aspect-ratio="1">
</CBubbleChart>

<CBubbleChart
    url="/demos/chart-data2.json"
    title="2014、2024年浏览器份额排行榜"
    subtitle="近十年"
    x-axis-title="浏览器"
    y-axis-title="市占率"
    y-axis-unit="%"
    show-legend
    multiple
    :aspect-ratio="1">
</CBubbleChart>

效果图：

• 属性

  • 同CLineChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

饼图（CPieChart）

<CPieChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    item-value="y"
    value-unit="%"
    :aspect-ratio="1">
</CPieChart>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    series	数据集，key-value方式	array	[]
    url	数据集API访问地址，若series的值不为空，则以series的值为主	string	null
    itemName	名称对应的属性	string	name
    itemValue	值对应的属性	string	value
    valueUnit	值的单位	string	''
    aspectRatio	宽高比	string、number	auto
    showLegend	是否显示图例	boolean	false
    rounded	是否显示圆角分割	boolean	false

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

环形图（CDonutChart）

<CDonutChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    item-value="y"
    value-unit="%"
    :rounded="false"
    :aspect-ratio="1">
</CDonutChart>

效果图：

• 属性

  • 同CPieChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

半环形图（CHalfDonutChart）

<CHalfDonutChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    item-value="y"
    value-unit="%"
    :aspect-ratio="1">
</CHalfDonutChart>

效果图：

• 属性

  • 同CPieChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

鸡冠花图（CCoxcombChart）

<CCoxcombChart
    url="/demos/chart-data1.json"
    title="浏览器份额排行榜"
    subtitle="2024"
    item-value="y"
    value-unit="%"
    :aspect-ratio="1">
</CCoxcombChart>

效果图：

• 属性

  • 同CPieChart；

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

统计（9）

根据标题、副标题、文本等布局的不同，把统计类组件分成2类，并创建了2个父类组件——BaseStat1、BaseStat2来简化设计、开发。

v1（CStat1）

<CStat1
    title="245k"
    subtitle="Sales"
    text="Calculated in last 7 days"
    color="red"
    variant="text">
</CStat1>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null

• 事件

  • 无；

• 插槽

  • 名称	描述	作用域
    title	标题	无
    subtitle	副标题	无
    text	文本	无

• 方法

  • 无；

v2（CStat2）

<CStat2
    title="245k"
    subtitle="Sales"
    icon="mdi-trending-up"
    color="red"
    text="Calculated in last 7 days"
    :chip="false"
    chip-text="+15%">
</CStat2>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null
    icon	图标	string	null
    color	颜色（图标）	string	null
    chip	是否以纸片形式显示	boolean	false
    chip-text	纸片内容	string	null

• 事件

  • 无；

• 插槽

  • 名称	描述	作用域
    title	标题	无
    icon	图标	无
    text	文本	无

• 方法

  • 无；

v3（CStat3）

<CStat3
    title="245k"
    subtitle="Sales"
    color="red"
    expected="999"
    actual="245">
</CStat3>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    color	颜色（进度条）	string	null
    actual	实际值	string、number	null
    expected	预期值	string、number	null

• 事件

  • 无；

• 插槽

  • 名称	描述	作用域
    title	标题	无
    subtitle	副标题	无

• 方法

  • 无；

v4（CStat4）

<CStat4
    title="245k"
    subtitle="Sales"
    text="Calculated in last 7 days"
    hint="+15%"
    color="red">
</CStat4>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null
    hint	提示	string	null
    color	颜色（标记、强调）	string	null

• 事件

  • 无；

• 插槽

  • 名称	描述	作用域
    title	标题	无
    subtitle	副标题	无
    text	文本	无
    emphasis	强调	无

• 方法

  • 无；

v5（CStat5）

<CStat5
    title="245k"
    subtitle="Sales"
    text="Calculated in last 7 days"
    icon="mdi-trending-up"
    color="red">
</CStat5>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null
    icon	图标	string	null
    color	颜色（图标）	string	null

• 事件

  • 无；

• 插槽

  • 暂无；

• 方法

  • 无；

v6（CStat6）

<CStat6
    title="245k"
    subtitle="Sales"
    icon="mdi-trending-up"
    color="red">
</CStat6>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    icon	图标	string	null
    color	颜色（图标）	string	null
    rounded	形状是否是圆角矩形，默认圆形	boolean	true
    variant	变体，可选值有flat、text、elevated、tonal、outlined、plain等	string	elevated

• 事件

  • 无；

• 插槽

  • 名称	描述	作用域
    title	标题	无
    subtitle	副标题	无
    icon	图标	无

• 方法

  • 无；

v7（CStat7）

<CStat7
    title="Google Drive"
    subtitle="Automate your file upload workflow"
    icon="mdi-google-drive"
    avatar
    color="grey"
    btn-text="Connected"
    btn-color="red">
</CStat7>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    avatar	是否显示头像	boolean	false
    icon	图标	string	null
    color	颜色（头像、图标）	string	null
    btnText	按钮文本	string	null
    btnColor	按钮颜色	string	null

• 事件

  • 无；

• 插槽

  • 暂无；

• 方法

  • 无；

v8（CStat8）

<CStat8
    title="245k"
    subtitle="Sales"
    color="red"
    type="trend"
    :items="[4, 2, 5, 7, 1, 6, 3]">
</CStat8>

<CStat8
    title="245k"
    subtitle="Sales"
    color="red"
    type="bar"
    :items="[4, 2, 5, 6, 17, 1, 3]">
</CStat8>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null
    icon	图标	string	null
    color	颜色	string	null
    type	Sparkline类型，可选值有trend、bar	string	trend
    items	Sparkline数据	array	[]

• 事件

  • 无；

• 插槽

  • 暂无；

• 方法

  • 无；

v9（CStat9）

<CStat9
    title="245k"
    subtitle="Sales"
    color="red"
    expected="999"
    actual="245">
</CStat9>

效果图：

• 属性

  • 名称	描述	类型	默认值
    title	标题	string	null
    subtitle	副标题	string	null
    text	文本	string	null
    icon	图标	string	null
    color	颜色	string	null
    actual	实际值	string、number	null
    expected	预估值	string、number	null

• 事件

  • 无；

• 插槽

  • 暂无；

• 方法

  • 无；

其他（5）

图片（CImg）

结合VImg和v-viewer，支持放大缩小、旋转、翻转图片等。

<CImg src="/demos/bear.jpg"></CImg>

效果图：

• 属性
  • 同VImg；
• 事件
  • 同VImg；
• 插槽
  • 无；
• 方法
  • 无；

链接（CAnchor）

<CAnchor
    text="百度"
    href="https://www.baidu.com/"
    hint="百度一下，你就知道"
    show-hint>
</CAnchor>

• 属性

  • 名称	描述	类型	默认值
    text	名称	string	null
    href	链接	string	null
    disabled	是否禁用	boolean	false
    hint	提示	string	null
    icon	图标，若不为空，则以图标形式显示	string	null
    color	颜色	string	primary

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

标签（CLabel）

<CLabel
    :value="21"
    url="/demos/products2.json">
</CLabel>

• 属性

  • 名称	描述	类型	默认值
    value	值	any	null
    items	数据集	array	[]
    url	数据集API地址，若items的值不为空，则以items的值为主	string	null
    itemTitle	数据项的值对应属性	string	title
    itemValue	数据项名称对应属性	string	value

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

旋转器（CSpinner）

参考Quasar框架实现。

<CSpinner 
    class="ml-2" 
    size="2em" 
    :thickness="2">
 </CSpinner>

效果图：

• 属性

  • 名称	描述	类型	默认值
    color	颜色	string	primary
    size	尺寸大小	string、number	1em
    thickness	粗细程度	number	5

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 无；

富文本编辑器（CCKEditor5）

<CCKEditor5
    ref="ckeditor"
    v-model="html"
    upload-file-url="/api/file-explorer/files/upload"
    browse-file-url="/api/file-explorer/files/download">
</CCKEditor5>

效果图：

• 属性

  • 名称	描述	类型	默认值
    modelValue	值	string	null
    adapter	文件上传适配器，可选的值有simple，ckeditor5。若值为simple时，则使用CKEditor 5内置的SimpleUploadAdapter。	string	ckeditor5
    uploadFileUrl	文件上传地址，当adapter的值为ckeditor5时，该API需要接收参数upload，返回文件信息。	string	null
    browseFileUrl	文件预览、下载地址，当adapter的值为ckeditor5时，该API需要接收参数id（文件ID）。	string	null

• 事件

  • 无；

• 插槽

  • 无；

• 方法

  • 名称	描述	参数	返回值
    getHtml	获取HTML，同属性modelValue。	无	string
    getText	获取纯文本。	无	string