sard-uniapp 1.19.2 → 1.19.3

package/components/checkbox-input/checkbox-input.vue

@@ -42,6 +42,28 @@ import {
 } from "./common";
 import { getMayPrimitiveOption, isEmptyBinding } 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 {'square' | 'circle'} type 图标类型，默认值：'square'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {CheckboxGroupOption[]} options 自动设置复选框，默认值：-。
+ * @property {CheckboxGroupOptionKeys} 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/checkbox-popout/README.md

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

package/components/checkbox-popout/checkbox-popout.vue

@@ -70,6 +70,25 @@ import {
 } from "./common";
 import { useScrollSide, useFormPopout } from "../../use";
 import { defaultOptionKeys } from "../checkbox/common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {any[]} modelValue 指定选中的选项，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：-。
+ * @property {boolean} readonly 只读状态，默认值：-。
+ * @property {string} size 图标的尺寸，默认值：-。
+ * @property {'square' | 'circle'} type 图标类型，默认值：'square'。
+ * @property {string} checkedColor 选中时图标的颜色，默认值：-。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {CheckboxGroupOption[]} options 自动设置复选框，默认值：-。
+ * @property {CheckboxGroupOptionKeys} 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/col/col.vue

@@ -11,6 +11,13 @@ import {
   rowSymbol
 } from "../layout/common";
 import { classNames, stringifyStyle, createBem } from "../../utils";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number | 'auto' | 'none'} span 列元素宽度，默认值：-。
+ * @property {number} offset 列元素偏移距离，默认值：-。
+ * @property {number} order 列元素顺序，默认值：-。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/collapse/README.md

@@ -0,0 +1,45 @@
+---
+nav: 组件
+title: Collapse
+subtitle: 折叠
+group: 数据展示
+---
+
+## 介绍
+
+可以展开/折叠内容区域。
+
+## 引入
+
+```ts
+import Collapse from 'sard-uniapp/components/collapse/collapse.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+折叠组件是其他可折叠组件的基础组件。
+使用 `visible` 属性控制折叠框展开或折叠。
+
+@code('${DEMO_PATH}/collapse/demo/Basic.vue')
+
+## API
+
+### CollapseProps
+
+| 属性    | 描述     | 类型    | 默认值 |
+| ------- | -------- | ------- | ------ |
+| visible | 是否可见 | boolean | false  |
+
+### CollapseSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/collapse/collapse.vue

@@ -24,6 +24,9 @@ import {
   uniqid,
   getBoundingClientRect
 } from "../../utils";
+/**
+ * @property {boolean} visible 是否可见，默认值：false。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/config/index.d.ts

@@ -13,6 +13,7 @@ import { type DropdownProps } from '../dropdown';
 import { type FloatingBubbleProps } from '../floating-bubble';
 import { type FormProps } from '../form';
 import { type GridProps } from '../grid';
+import { type IconProps } from '../icon';
 import { type InputProps } from '../input';
 import { type KeyboardProps } from '../keyboard';
 import { type ListItemProps } from '../list';
@@ -224,6 +225,7 @@ export declare const defaultConfig: {
     icon: {
         name: string;
         family: string;
+        separate: IconProps["separate"];
     };
     indexes: {
         hintDuration: number;

package/components/config/index.js

@@ -179,6 +179,7 @@ export const defaultConfig = {
     icon: {
         name: '',
         family: 'sari',
+        separate: false,
     },
     indexes: {
         hintDuration: 300,

package/components/count-down/README.md

@@ -0,0 +1,97 @@
+---
+nav: 组件
+title: CountDown
+subtitle: 倒计时
+group: 数据展示
+---
+
+## 介绍
+
+倒计时的展示 ，以便告知用户在一定时间后可以进行某些操作。
+
+```ts
+import CountDown from 'sard-uniapp/components/count-down/count-down.vue'
+```
+
+## 代码演示
+
+## 引入
+
+### 基础使用
+
+使用 `time` 属性配置倒计时总时长（单位毫秒）。
+
+@code('${DEMO_PATH}/count-down/demo/Basic.vue')
+
+### 自定义格式
+
+默认格式为 `HH:mm:ss` ，也可以使用 `format` 自定义人任意想要的格式。
+
+@code('${DEMO_PATH}/count-down/demo/Format.vue')
+
+### 毫秒级别的渲染
+
+默认每隔一秒渲染一次，使用 `millisecond` 属性可以设置毫秒级别渲染。
+
+@code('${DEMO_PATH}/count-down/demo/Millisecond.vue')
+
+### 自定义样式
+
+如果想获取时分秒等数据分别渲染不同的样式，可以使用默认插槽提供的 `time` 属性来获取数据（`time` 类型为：`CountDownCurrentTime`）。
+
+@code('${DEMO_PATH}/count-down/demo/Style.vue')
+
+### 手动控制
+
+当倒计时结束时便会停止，通过组件提供的方法可以控制倒计时的开始、暂停或进行重置。
+
+@code('${DEMO_PATH}/count-down/demo/Control.vue')
+
+### 验证码倒计时
+
+下面代码演示了获取验证码场景中倒计时配合按钮的使用。
+
+@code('${DEMO_PATH}/count-down/demo/Captcha.vue')
+
+## API
+
+### CountDownProps
+
+| 属性        | 描述                   | 类型    | 默认值     |
+| ----------- | ---------------------- | ------- | ---------- |
+| time        | 倒计时总时长，单位毫秒 | number  | 0          |
+| auto-start  | 是否自动开始倒计时     | boolean | true       |
+| format      | 时间格式               | string  | 'HH:mm:ss' |
+| millisecond | 是否开启毫秒级别渲染   | boolean | false      |
+
+### CountDownSlots
+
+| 插槽    | 描述           | 属性                           |
+| ------- | -------------- | ------------------------------ |
+| default | 自定义默认内容 | { time: CountDownCurrentTime } |
+
+### CountDownEmits
+
+| 事件   | 描述             | 类型                                 |
+| ------ | ---------------- | ------------------------------------ |
+| change | 倒计时变化时触发 | (time: CountDownCurrentTime) => void |
+| finish | 倒计时结束时触发 | () => void                           |
+
+### CountDownExpose
+
+| 属性  | 描述       | 类型       |
+| ----- | ---------- | ---------- |
+| start | 开始倒计时 | () => void |
+| pause | 暂停倒计时 | () => void |
+| reset | 重置倒计时 | () => void |
+
+### CountDownCurrentTime
+
+| 属性         | 描述                   | 类型   |
+| ------------ | ---------------------- | ------ |
+| milliseconds | 剩余毫秒               | number |
+| seconds      | 剩余秒数               | number |
+| minutes      | 剩余分钟               | number |
+| hours        | 剩余小时               | number |
+| days         | 剩余天数               | number |
+| total        | 剩余总时间（单位毫秒） | number |

package/components/count-down/count-down.vue

@@ -14,6 +14,14 @@ import {
   formatTime,
   defaultCountDownProps
 } from "./common";
+/**
+ * @property {number} time 倒计时总时长，单位毫秒，默认值：0。
+ * @property {boolean} autoStart 是否自动开始倒计时，默认值：true。
+ * @property {string} format 时间格式，默认值：'HH:mm:ss'。
+ * @property {boolean} millisecond 是否开启毫秒级别渲染，默认值：false。
+ * @event {(time: CountDownCurrentTime) => void} change 倒计时变化时触发
+ * @event {() => void} finish 倒计时结束时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/count-to/README.md

@@ -0,0 +1,61 @@
+---
+nav: 组件
+title: CountTo
+subtitle: 数字滚动
+group: 数据展示
+version: 1.2+
+---
+
+## 介绍
+
+从某一个数值动态递增或递减到另一个数值。
+
+## 引入
+
+```ts
+import CountTo from 'sard-uniapp/components/count-to/count-to.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+给 `value` 属性一个数字值即可启动滚动功能。
+
+@code('${DEMO_PATH}/count-to/demo/Basic.vue')
+
+### 小数位数
+
+使用 `precision` 属性设置小数位数。
+
+@code('${DEMO_PATH}/count-to/demo/Precision.vue')
+
+### 分隔符
+
+使用 `separator` 属性设置千分位分隔符。
+
+@code('${DEMO_PATH}/count-to/demo/Separator.vue')
+
+### 持续时间
+
+使用 `duration` 属性设置滚动时长。
+
+@code('${DEMO_PATH}/count-to/demo/Duration.vue')
+
+### 随机数字
+
+`value` 属性改变时会自动滚动到最新的值。
+
+@code('${DEMO_PATH}/count-to/demo/Random.vue')
+
+## API
+
+### CountToProps
+
+| 属性           | 描述                                   | 类型   | 默认值 |
+| -------------- | -------------------------------------- | ------ | ------ |
+| value          | 滚动到的目标数值                       | number | 0      |
+| precision      | 精度，即小数位数                       | number | 0      |
+| separator      | 千分位分隔符                           | string | -      |
+| separatorDigit | 默认每三位插入一个分隔符，也可以自定义 | number | 3      |
+| duration       | 滚动到目标值持续时间，单位 ms          | number | 2000   |

package/components/count-to/count-to.vue

@@ -7,6 +7,13 @@ import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent }
 import { computed, onUnmounted, ref, watch } from "vue";
 import { addSeparator, createAnimation } from "../../utils";
 import { defaultCountToProps } from "./common";
+/**
+ * @property {number} value 滚动到的目标数值，默认值：0。
+ * @property {number} precision 精度，即小数位数，默认值：0。
+ * @property {string} separator 千分位分隔符，默认值：-。
+ * @property {number} separatorDigit 默认每三位插入一个分隔符，也可以自定义，默认值：3。
+ * @property {number} duration 滚动到目标值持续时间，单位 ms，默认值：2000。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/crop-image/README.md

@@ -0,0 +1,86 @@
+---
+nav: 组件
+title: CropImage
+subtitle: 裁剪图片
+group:
+  title: 工具组件
+  order: 7
+version: 1.12+
+---
+
+## 介绍
+
+对图片进行裁剪。
+
+## 引入
+
+```ts
+import CropImage from 'sard-uniapp/components/crop-image/crop-image.vue'
+import CropImageAgent from 'sard-uniapp/components/crop-image-agent/crop-image-agent.vue'
+import { cropImage } from 'sard-uniapp'
+```
+
+## 代码演示
+
+### 基础使用
+
+先在页面放置代理组件。
+
+接着便可以使用 `cropImage` 方法对图片进行裁剪。
+
+```tsx
+<sar-crop-image-agent />
+```
+
+@code('${DEMO_PATH}/crop-image/demo/Basic.vue')
+
+### 裁剪比例
+
+可以通过 `cropScale` 属性设置任意比例。
+
+@code('${DEMO_PATH}/crop-image/demo/CropScale.vue')
+
+### 修改裁剪尺寸
+
+可以通过 `beforeCrop` 方法修改裁剪尺寸，接收实际宽高，通过返回缩放比例来修改裁剪大小。
+
+@code('${DEMO_PATH}/crop-image/demo/BeforeCrop.vue')
+
+## API
+
+### CropImageProps
+
+| 属性        | 描述                                                   | 类型                                      | 默认值 |
+| ----------- | ------------------------------------------------------ | ----------------------------------------- | ------ |
+| root-class  | 组件根元素类名                                         | string                                    | -      |
+| root-style  | 组件根元素样式                                         | StyleValue                                | -      |
+| visible     | 是否显示裁剪弹框                                       | boolean                                   | false  |
+| src         | 要裁剪的图片                                           | string                                    | false  |
+| crop-scale  | 裁剪的比例                                             | string                                    | '1:1'  |
+| type        | 导出图片类型                                           | 'png' \| 'jpg'                            | 'png'  |
+| quality     | 导出图片的质量                                         | number                                    | 0.92   |
+| duration    | 弹窗显隐过渡时间（单位 ms）                            | number                                    | 150    |
+| success     | 裁剪成功回调                                           | (filePath: string) => void                | -      |
+| fail        | 裁剪成功回调                                           | (err: any) => void                        | -      |
+| complete    | 裁剪成功或失败回调                                     | () => void                                | -      |
+| before-crop | 裁剪前回调，可以修改裁剪的尺寸；接收宽高，返回缩放比例 | (width: number, height: number) => number | -      |
+
+### CropImageEmits
+
+| 事件           | 描述             | 类型                       |
+| -------------- | ---------------- | -------------------------- |
+| update:visible | 弹出框显隐时触发 | (visible: boolean) => void |
+
+### CropImageAgentProps / CropImageOptions
+
+继承 [`CropImageProps`](#CropImageProps) 并有以下额外属性。
+
+| 属性 | 描述          | 类型   | 默认值      |
+| ---- | ------------- | ------ | ----------- |
+| id   | 裁剪组件的 id | string | 'cropImage' |
+
+### 命令式方法
+
+| 名称      | 描述     | 类型                                |
+| --------- | -------- | ----------------------------------- |
+| cropImage | 裁剪图片 | (options: CropImageOptions) => void |

package/components/crop-image/crop-image.vue

@@ -118,6 +118,21 @@ import SarLoading from "../loading/loading.vue";
 const minGapX = 20;
 const bounceCoeff = 4;
 const maxScale = 5;
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示裁剪弹框，默认值：false。
+ * @property {string} src 要裁剪的图片，默认值：false。
+ * @property {string} cropScale 裁剪的比例，默认值：'1:1'。
+ * @property {'png' | 'jpg'} type 导出图片类型，默认值：'png'。
+ * @property {number} quality 导出图片的质量，默认值：0.92。
+ * @property {number} duration 弹窗显隐过渡时间（单位 ms），默认值：150。
+ * @property {(filePath: string) => void} success 裁剪成功回调，默认值：-。
+ * @property {(err: any) => void} fail 裁剪成功回调，默认值：-。
+ * @property {() => void} complete 裁剪成功或失败回调，默认值：-。
+ * @property {(width: number, height: number) => number} beforeCrop 裁剪前回调，可以修改裁剪的尺寸；接收宽高，返回缩放比例，默认值：-。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopup,

package/components/datetime-picker/README.md

@@ -0,0 +1,136 @@
+---
+nav: 组件
+title: DatetimePicker
+subtitle: 日期时间选择器
+group: 表单组件
+---
+
+## 介绍
+
+用于选择日期时间。
+
+## 引入
+
+```ts
+import DatetimePicker from 'sard-uniapp/components/datetime-picker/datetime-picker.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `v-model` 绑定当前值，通过 `type` 属性设置要展示的列类型。
+
+@code('${DEMO_PATH}/datetime-picker/demo/Basic.vue')
+
+更多案例，请参考 [DatetimePickerPopout 组件](./datetime-picker-popout)
+
+## API
+
+### DatetimePickerProps
+
+| 属性                          | 描述                                         | 类型                                                                                                            | 默认值  |
+| ----------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------- |
+| root-class                    | 组件根元素类名                               | string                                                                                                          | -       |
+| root-style                    | 组件根元素样式                               | StyleValue                                                                                                      | -       |
+| type                          | 设置每一列要展示的数据类型，每个字母对应一列 | string [详见特殊符号](#DatetimeLetter)                                                                          | 'yMd'   |
+| calendar <sup>1.18+</sup>     | 历法类型，可选公历或农历                     | 'solar' \| 'lunar'                                                                                              | 'solar' |
+| min                           | 可选的最小日期                               | Date                                                                                                            | 十年前  |
+| max                           | 可选的最大日期                               | Date                                                                                                            | 十年后  |
+| model-value                   | 当前选中的日期                               | Date \| string                                                                                                  | -       |
+| filter                        | 选项的过滤函数                               | (letter: DatetimeLetter, value: number, date: Date, index: number) => boolean                                   | -       |
+| formatter                     | 选项的格式化函数                             | (letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => string \| void \|undefined | -       |
+| value-format <sup>1.10+</sup> | 绑定值的格式，不指定则绑定值为 Date 对象     | string [详见特殊符号](../guide/date#日期格式特殊符号)                                                           | -       |
+
+### DatetimePickerEmits
+
+| 事件                     | 描述                 | 类型                           |
+| ------------------------ | -------------------- | ------------------------------ |
+| update:model-value       | 选中的选项改变时触发 | (date: Date \| string) => void |
+| change <sup>1.9.2+</sup> | 选中的选项改变时触发 | (date: Date \| string) => void |
+
+### DatetimeLetter
+
+```ts
+type DatetimeLetter = 'y' | 'M' | 'd' | 'h' | 'm' | 's'
+```
+
+上面每个字母分别代表“年月日时分秒”。
+
+### DatetimeColumnOption
+
+| 属性     | 描述                                               | 类型                        |
+| -------- | -------------------------------------------------- | --------------------------- |
+| value    | 选项值，如果是农历闰月，此值会为负数               | number                      |
+| label    | 展示的文本，默认中文会在值的后面加上“年月日时分秒” | string \| number \| boolean |
+| zerofill | 填充前置 0 后的选项值字符串，可在格式化时使用      | string                      |
+
+### 农历相关API <sup>1.18+</sup>
+
+#### solarToLunar
+
+```ts
+function solarToLunar(
+  year: number,
+  month: number,
+  day: number,
+): {
+  year: number
+  month: number
+  day: number
+}
+```
+
+接收公历的年月日（月份从1开始），返回农历的年月日。如果返回的月份为负数，则为闰月。
+
+#### lunarToSolar
+
+```ts
+function lunarToSolar(
+  year: number,
+  month: number,
+  day: number,
+): {
+  year: number
+  month: number
+  day: number
+}
+```
+
+接收农历的年月日（月份从1开始），返回公历的年月日。如果农历月份为闰月，需传递负数。
+
+#### getLunarYearName
+
+```ts
+function getLunarYearName(year: number): string
+```
+
+接收数字年份，返回中文数字年份，例如：`2025 -> '二零二五年'`。
+
+#### getLunarMonthName
+
+```ts
+function getLunarMonthName(month: number, isLeapMonth?: boolean): string
+```
+
+- 参数
+  - month: 农历月份，从1开始；
+  - isLeapMonth: 是否为闰月。
+
+获取农历月份名称。
+
+#### getLunarDayName
+
+```ts
+function getLunarDayName(day: number): string
+```
+
+获取农历日期名称。
+
+#### getLunarHourName
+
+```ts
+function getLunarHourName(hour: number): string
+```
+
+获取农历时辰名称。

package/components/datetime-picker/datetime-picker.vue

@@ -31,6 +31,20 @@ import {
   defaultDatetimePickerProps
 } from "./common";
 import { useTranslate } from "../locale";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string [详见特殊符号](#DatetimeLetter)} type 设置每一列要展示的数据类型，每个字母对应一列，默认值：'yMd'。
+ * @property {'solar' | 'lunar'} calendar 历法类型，可选公历或农历，默认值：'solar'。
+ * @property {Date} min 可选的最小日期，默认值：十年前。
+ * @property {Date} max 可选的最大日期，默认值：十年后。
+ * @property {Date | string} modelValue 当前选中的日期，默认值：-。
+ * @property {(letter: DatetimeLetter, value: number, date: Date, index: number) => boolean} filter 选项的过滤函数，默认值：-。
+ * @property {(letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => string | void |undefined} formatter 选项的格式化函数，默认值：-。
+ * @property {string [详见特殊符号](../guide/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
+ * @event {(date: Date | string) => void} update 选中的选项改变时触发
+ * @event {(date: Date | string) => void} change 选中的选项改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPicker,