sard-uniapp 1.19.2 → 1.19.3

package/components/qrcode/README.md

@@ -0,0 +1,103 @@
+---
+nav: 组件
+title: Qrcode
+subtitle: 二维码
+group: 数据展示
+version: 1.4+
+---
+
+## 介绍
+
+将一段文字或链接编码成图形，以便光学扫描仪或手机摄像头快速读取。
+
+## 引入
+
+```ts
+import Qrcode from 'sard-uniapp/components/qrcode/qrcode.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+设置 `text` 属性即可渲染一个二维码图片。其内部通过 `canvas` 来绘制二维码，但最终的呈现是以图片的形式，因此可以覆盖任何东西在二维码上面。
+
+@code('${DEMO_PATH}/qrcode/demo/Basic.vue')
+
+### 呈现的大小
+
+使用 `size` 属性设置二维码呈现的大小，可以设置为任意尺寸单位。
+
+@code('${DEMO_PATH}/qrcode/demo/DisplaySize.vue')
+
+### 画板的大小
+
+画板大小决定了二维码图片的分辨率。
+
+@code('${DEMO_PATH}/qrcode/demo/CanvasSize.vue')
+
+### 自定义颜色
+
+通过设置 `color` 自定义二维码暗模块颜色，
+通过设置 `bg-color` 自定义二维码亮模块颜色，即背景颜色。
+
+@code('${DEMO_PATH}/qrcode/demo/Color.vue')
+
+### 默认插槽
+
+使用默认插槽, 可以把任意内容放置在二维码上面。
+
+@code('${DEMO_PATH}/qrcode/demo/Icon.vue')
+
+### 添加图标 <sup>1.19.2+</sup>
+
+使用 `icon` 属性, 可以将一张图片渲染到画布中间，与二维码合并为同一张图片。
+
+@code('${DEMO_PATH}/qrcode/demo/IconProps.vue')
+
+### 安静区域模块数
+
+可以简单把设置 `quiet-zone-modules` 当成设置二维码内边距。
+
+@code('${DEMO_PATH}/qrcode/demo/QuietZoneModules.vue')
+
+### 错误纠错级别
+
+错误纠错级别越高，二维码抗磨损、抗脏能力越强，同时二维码就越大，可容纳的字符容量越小。
+
+`ecl` 属性用于设置错误纠错级别。
+
+@code('${DEMO_PATH}/qrcode/demo/ECL.vue')
+
+下面是不同纠错级别的纠错能力表。
+
+| 错误纠错级别 | 错误纠错能力   |
+| ------------ | -------------- |
+| L            | 恢复 7%的数据  |
+| M            | 恢复 15%的数据 |
+| Q            | 恢复 25%的数据 |
+| H            | 恢复 30%的数据 |
+
+## API
+
+### QrcodeProps
+
+| 属性                                      | 描述                         | 类型                     | 默认值 |
+| ----------------------------------------- | ---------------------------- | ------------------------ | ------ |
+| root-class                                | 组件根元素类名               | string                   | -      |
+| root-style                                | 组件根元素样式               | StyleValue               | -      |
+| text                                      | 要编码的字符串数据           | string                   | -      |
+| ecl                                       | 错误纠错级别                 | 'L' \| 'M' \| 'Q' \| 'H' | 'M'    |
+| size                                      | 二维码呈现的大小             | string                   | 320rpx |
+| canvas-size                               | 画板的大小                   | number                   | 400    |
+| color                                     | 二维码颜色                   | string                   | #000   |
+| bg-color                                  | 二维码背景颜色               | string                   | #fff   |
+| quiet-zone-modules                        | 安静区域模块数               | number                   | 2      |
+| show-menu-by-longpress <sup>1.19.2+</sup> | 长按图片显示菜单(微信小程序) | boolean                  | false  |
+| icon <sup>1.19.2+</sup>                   | 二维码中图片的地址           | string                   | -      |
+
+### QrcodeSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义额外内容 | -    |

package/components/qrcode/qrcode.vue

@@ -38,6 +38,19 @@ import {
   qrcode
 } from "../../utils";
 import { defaultQrcodeProps } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} text 要编码的字符串数据，默认值：-。
+ * @property {'L' | 'M' | 'Q' | 'H'} ecl 错误纠错级别，默认值：'M'。
+ * @property {string} size 二维码呈现的大小，默认值：320rpx。
+ * @property {number} canvasSize 画板的大小，默认值：400。
+ * @property {string} color 二维码颜色，默认值：#000。
+ * @property {string} bgColor 二维码背景颜色，默认值：#fff。
+ * @property {number} quietZoneModules 安静区域模块数，默认值：2。
+ * @property {boolean} showMenuByLongpress 长按图片显示菜单(微信小程序)，默认值：false。
+ * @property {string} icon 二维码中图片的地址，默认值：-。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/radio/README.md

@@ -0,0 +1,172 @@
+---
+nav: 组件
+title: Radio
+subtitle: 单选按钮
+group: 表单组件
+---
+
+## 介绍
+
+在一组可选项中进行单一选择。
+
+## 引入
+
+```ts
+import Radio from 'sard-uniapp/components/radio/radio.vue'
+import RadioGroup from 'sard-uniapp/components/radio-group/radio-group.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 绑定当前选中值。
+
+@code('${DEMO_PATH}/radio/demo/Basic.vue')
+
+### 排列方向
+
+将 `direction` 属性设置为 `horizontal` 后，单选按钮组会变成水平排列。
+
+@code('${DEMO_PATH}/radio/demo/Direction.vue')
+
+### 只读和禁用
+
+只读或禁用后不可点击。
+
+@code('${DEMO_PATH}/radio/demo/DisabledReadOnly.vue')
+
+### 图标大小
+
+使用 `size` 属性设置图标大小。
+
+@code('${DEMO_PATH}/radio/demo/Size.vue')
+
+### 图标颜色
+
+使用 `checked-color` 属性设置选中时的图标颜色。
+
+@code('${DEMO_PATH}/radio/demo/Color.vue')
+
+### 图标类型
+
+设置 `type` 属性为 `record` 可以使图标变为圆点类型。
+
+@code('${DEMO_PATH}/radio/demo/Type.vue')
+
+### 自定义图标
+
+如果内置的图标不满足需求，可以使用 `icon` 插槽设置为任意的图标。
+插槽接收`checked`属性表示当前的选中状态。
+
+@code('${DEMO_PATH}/radio/demo/Icon.vue')
+
+### 自动渲染单选按钮
+
+使用 `options` 属性设置可选项。
+
+@code('${DEMO_PATH}/radio/demo/GroupOptions.vue')
+
+### 自定义 UI
+
+如果只想使用单选的逻辑，并想自定义 UI，可以使用单选按钮组的 `custom` 插槽。
+
+这个插槽接收 `toggle`方法和 `value` 属性作为参数。`toggle` 用于选中指定的选项，`value` 用于判断选中状态。
+
+@code('${DEMO_PATH}/radio/demo/Custom1.vue')
+
+结合 `list` 组件使用：
+
+@code('${DEMO_PATH}/radio/demo/Custom2.vue')
+
+单选按钮组里面 `radio` 组件，会自动判断选中状态；可以给 `radio` 组件添加 `readonly` 属性以便将点击操作交给其他组件。
+
+@code('${DEMO_PATH}/radio/demo/Custom3.vue')
+
+## API
+
+### RadioProps
+
+| 属性          | 描述                                 | 类型                 | 默认值   |
+| ------------- | ------------------------------------ | -------------------- | -------- |
+| root-class    | 组件根元素类名                       | string               | -        |
+| root-style    | 组件根元素样式                       | StyleValue           | -        |
+| checked       | 是否选中                             | boolean              | false    |
+| value         | 单选按钮的值，配合单选按钮组一起使用 | any                  | -        |
+| label         | 单选按钮标签                         | string               | -        |
+| disabled      | 禁用状态                             | boolean              | -        |
+| readonly      | 只读状态                             | boolean              | -        |
+| size          | 图标的尺寸                           | string               | -        |
+| type          | 图标类型                             | 'circle' \| 'record' | 'circle' |
+| checked-color | 选中时图标的颜色                     | string               | -        |
+
+### RadioSlots
+
+| 插槽    | 描述           | 属性                 |
+| ------- | -------------- | -------------------- |
+| default | 自定义默认内容 | -                    |
+| icon    | 自定义图标     | { checked: boolean } |
+
+### RadioEmits
+
+| 事件  | 描述       | 类型                 |
+| ----- | ---------- | -------------------- |
+| click | 点击时触发 | (event: any) => void |
+
+### RadioGroupProps
+
+| 属性                  | 描述                                  | 类型                       | 默认值                           |
+| --------------------- | ------------------------------------- | -------------------------- | -------------------------------- |
+| root-class            | 组件根元素类名                        | string                     | -                                |
+| root-style            | 组件根元素样式                        | StyleValue                 | -                                |
+| model-value (v-model) | 指定选中的选项                        | any                        | -                                |
+| disabled              | 禁用状态                              | boolean                    | -                                |
+| readonly              | 只读状态                              | boolean                    | -                                |
+| size                  | 图标的尺寸                            | string                     | -                                |
+| type                  | 图标类型                              | 'circle' \| 'record'       | 'circle'                         |
+| checked-color         | 选中时图标的颜色                      | string                     | -                                |
+| direction             | 排列方向                              | 'horizontal' \| 'vertical' | 'vertical'                       |
+| validate-event        | 是否触发表单验证                      | boolean                    | true                             |
+| options               | 自动设置单选按钮                      | RadioGroupOption[]         | -                                |
+| option-keys           | 自定义 options 的 label、value 的字段 | RadioGroupOptionKeys       | {label: 'label', value: 'value'} |
+
+### RadioGroupOption
+
+```ts
+export type RadioGroupOption =
+  | {
+      [key: PropertyKey]: any
+    }
+  | string
+  | number
+  | boolean
+```
+
+### RadioGroupOptionKeys
+
+```ts
+export interface RadioGroupOptionKeys {
+  label?: string
+  value?: string
+}
+```
+
+### RadioGroupSlots
+
+| 插槽    | 描述                                                                                                            | 属性                                         |
+| ------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| default | 自定义默认内容                                                                                                  | -                                            |
+| custom  | 同默认插槽，额外可以接收 `toggle` 方法切换选中状态，接收 `value` 属性判断选中状态；用于自定义单选按钮结构和样式 | { toggle: (value: any) => void, value: any } |
+
+### RadioGroupEmits
+
+| 事件               | 描述                   | 类型                 |
+| ------------------ | ---------------------- | -------------------- |
+| update:model-value | 单选按钮组值改变时触发 | (value: any) => void |
+| change             | 单选按钮组值改变时触发 | (value: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/radio/radio.vue

@@ -24,6 +24,19 @@ import {
 } from "./common";
 import SarCheckIcon from "../check-icon/check-icon.vue";
 import { useFormContext } from "../form/common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} checked 是否选中，默认值：false。
+ * @property {any} value 单选按钮的值，配合单选按钮组一起使用，默认值：-。
+ * @property {string} label 单选按钮标签，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @event {(event: any) => void} click 点击时触发
+ */
 export default  _defineComponent({
   components: {
     SarCheckIcon,

package/components/radio-group/radio-group.vue

@@ -40,6 +40,22 @@ import {
 } from "../../utils";
 import { useFormItemContext } from "../form/common";
 import SarRadio from "../radio/radio.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @event {(value: any) => void} update 单选按钮组值改变时触发
+ * @event {(value: any) => void} change 单选按钮组值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarRadio,

package/components/radio-input/README.md

@@ -0,0 +1,44 @@
+---
+nav: 组件
+title: RadioInput
+subtitle: 单选输入框
+group: 表单组件
+version: 1.3+
+---
+
+## 介绍
+
+组合了单选弹出框、列表、输入框组件，实现了在弹出框中单选的功能。
+
+## 引入
+
+```ts
+import RadioInput from 'sard-uniapp/components/radio-input/radio-input.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `title` 和 `placeholder` 属性设置弹出框标题和输入框占位文本，
+通过 `options` 属性设置可选项。
+
+@code('${DEMO_PATH}/radio-input/demo/Basic.vue')
+
+## API
+
+### RadioInputProps
+
+继承 [`RadioPopoutProps`](./radio-popout#RadioPopoutProps) 并有以下额外属性：
+
+| 属性                              | 描述                   | 类型       | 默认值          |
+| --------------------------------- | ---------------------- | ---------- | --------------- |
+| root-class                        | 弹出式输入框根元素类名 | string     | -               |
+| root-style                        | 弹出式输入框根元素样式 | StyleValue | -               |
+| clearable                         | 是否显示清空按钮       | boolean    | false           |
+| placeholder                       | 输入框占位符内容       | string     | -               |
+| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any  | () => undefined |
+
+### RadioInputEmits
+
+继承 [`RadioPopoutEmits`](./radio-popout#RadioPopoutEmits)

package/components/radio-input/radio-input.vue

@@ -39,6 +39,29 @@ import {
 } from "./common";
 import { getMayPrimitiveOption, isEmptyBinding, isNullish } from "../../utils";
 import { usePopoutInput } from "../../use";
+/**
+ * @property {string} rootClass 弹出式输入框根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 弹出式输入框根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
+ * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示弹出框，默认值：-。
+ * @property {string} title 弹出框标题，默认值：-。
+ * @property {boolean} clearable 是否显示清空按钮，默认值：false。
+ * @property {string} placeholder 输入框占位符内容，默认值：-。
+ * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopoutInput,

package/components/radio-popout/README.md

@@ -0,0 +1,52 @@
+---
+nav: 组件
+title: RadioPopout
+subtitle: 单选弹出框
+group: 表单组件
+version: 1.16+
+---
+
+## 介绍
+
+组合了单选框组、列表、弹出框组件，实现了在弹出框中单选的功能。
+
+## 引入
+
+```ts
+import RadioPopout from 'sard-uniapp/components/radio-popout/radio-popout.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 双向绑定当前值，使用 `v-model:visible` 控制弹出框显隐。
+
+@code('${DEMO_PATH}/radio-popout/demo/Basic.vue')
+
+## API
+
+### RadioPopoutProps
+
+继承 [`RadioGroupProps`](./radio#RadioGroupProps) 并有以下额外属性：
+
+| 属性              | 描述             | 类型       | 默认值 |
+| ----------------- | ---------------- | ---------- | ------ |
+| popout-class      | 弹窗框根元素类名 | string     | -      |
+| popout-style      | 弹窗框根元素样式 | StyleValue | -      |
+| visible (v-model) | 是否显示弹出框   | boolean    | -      |
+| title             | 弹出框标题       | string     | -      |
+
+### RadioPopoutEmits
+
+| 事件               | 描述                     | 类型                              |
+| ------------------ | ------------------------ | --------------------------------- |
+| update:model-value | 单选输入组件值改变时触发 | (value: any \| undefined) => void |
+| change             | 单选输入组件值改变时触发 | (value: any \| undefined) => void |
+| update:visible     | 弹出框显隐时触发         | (visible: boolean) => void        |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/radio-popout/radio-popout.vue

@@ -69,6 +69,26 @@ import {
 } from "./common";
 import { defaultOptionKeys } from "../radio/common";
 import { useScrollSide, useFormPopout } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'circle' | 'record'} type 图标类型，默认值：'circle'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {'horizontal' | 'vertical'} direction 排列方向，默认值：'vertical'。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {RadioGroupOption[]} options 自动设置单选按钮，默认值：-。
+ * @property {RadioGroupOptionKeys} optionKeys 自定义 options 的 label、value 的字段，默认值：{label: 'label', value: 'value'}。
+ * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
+ * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示弹出框，默认值：-。
+ * @property {string} title 弹出框标题，默认值：-。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopout,

package/components/rate/README.md

@@ -0,0 +1,106 @@
+---
+nav: 组件
+title: Rate
+subtitle: 评分
+group: 表单组件
+---
+
+## 介绍
+
+用于对事物进行评级操作。
+
+## 引入
+
+```ts
+import Rate from 'sard-uniapp/components/rate/rate.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 绑定当前值。
+
+@code('${DEMO_PATH}/rate/demo/Basic.vue')
+
+### 半星
+
+设置 `allowHalf` 属性后可以选中半星。
+
+@code('${DEMO_PATH}/rate/demo/AllowHalf.vue')
+
+### 自定义图标
+
+通过 `icon` 属性设置选中时的图标，`voidIcon` 属性设置未选中时的图标。
+或者通过 `text` 和 `voidText` 属性设置文字代替图标。
+
+@code('${DEMO_PATH}/rate/demo/CustomIcon.vue')
+
+### 自定义颜色
+
+通过 `color` 属性设置选中时的颜色，`voidColor` 设置未选中时的颜色。
+
+@code('${DEMO_PATH}/rate/demo/Color.vue')
+
+### 自定义尺寸和间距
+
+通过 `size` 属性设置图标大小。
+通过 `gap` 属性设置图标间距。
+
+@code('${DEMO_PATH}/rate/demo/Size.vue')
+
+### 自定义数量
+
+通过 `count` 属性设置星星总数。
+
+@code('${DEMO_PATH}/rate/demo/Count.vue')
+
+### 允许清空
+
+当 `clearable` 属性设置为 `true`，再次点击相同的值时，可以将值重置为 0。
+
+@code('${DEMO_PATH}/rate/demo/Clearable.vue')
+
+### 只读和禁用
+
+只读或禁用后不可操作。
+
+@code('${DEMO_PATH}/rate/demo/DisabledReadOnly.vue')
+
+## API
+
+### RateProps
+
+| 属性           | 描述                         | 类型       | 默认值 |
+| -------------- | ---------------------------- | ---------- | ------ |
+| root-class     | 组件根元素类名               | string     | -      |
+| root-style     | 组件根元素样式               | StyleValue | -      |
+| model-value    | 选中图标数                   | number     | -      |
+| allow-half     | 是否允许半选                 | boolean    | false  |
+| clearable      | 是否允许清空，划到最左边清空 | boolean    | false  |
+| count          | 图标总数                     | number     | 5      |
+| size           | 图标大小                     | string     | -      |
+| gap            | 图标间距                     | string     | -      |
+| icon-family    | 图标字体                     | string     | -      |
+| icon           | 自定义选中时的图标           | string     | -      |
+| void-icon      | 自定义未选中时的图标         | string     | -      |
+| text           | 自定义选中时的文字           | string     | -      |
+| void-text      | 自定义未选中时的文字         | string     | -      |
+| color          | 选中时的颜色                 | string     | -      |
+| void-color     | 未选中时的颜色               | string     | -      |
+| disabled       | 禁用状态                     | boolean    | false  |
+| readonly       | 只读状态                     | boolean    | false  |
+| validate-event | 是否触发表单验证             | boolean    | true   |
+
+### RateEmits
+
+| 事件                     | 描述               | 类型                    |
+| ------------------------ | ------------------ | ----------------------- |
+| update:model-value       | 选中的值改变时触发 | (value: number) => void |
+| change <sup>1.9.2+</sup> | 选中的值改变时触发 | (value: number) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/rate/rate.vue

@@ -66,6 +66,28 @@ import SarIcon from "../icon/icon.vue";
 import { useFormContext, useFormItemContext } from "../form/common";
 import { defaultRateProps } from "./common";
 import { useMouseDown } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} modelValue 选中图标数，默认值：-。
+ * @property {boolean} allowHalf 是否允许半选，默认值：false。
+ * @property {boolean} clearable 是否允许清空，划到最左边清空，默认值：false。
+ * @property {number} count 图标总数，默认值：5。
+ * @property {string} size 图标大小，默认值：-。
+ * @property {string} gap 图标间距，默认值：-。
+ * @property {string} iconFamily 图标字体，默认值：-。
+ * @property {string} icon 自定义选中时的图标，默认值：-。
+ * @property {string} voidIcon 自定义未选中时的图标，默认值：-。
+ * @property {string} text 自定义选中时的文字，默认值：-。
+ * @property {string} voidText 自定义未选中时的文字，默认值：-。
+ * @property {string} color 选中时的颜色，默认值：-。
+ * @property {string} voidColor 未选中时的颜色，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @event {(value: number) => void} update 选中的值改变时触发
+ * @event {(value: number) => void} change 选中的值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,