@phelan/design 0.0.1

package/docs/components/basic/cascader.md

@@ -0,0 +1,162 @@
+# Cascader 级联选择器
+
+当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
+
+## 基础用法
+
+有两种触发方式：鼠标悬停和点击。
+
+:::preview
+
+demo-preview=../../examples/cascader/index.vue
+
+:::
+
+## 禁用选项
+
+通过为数据源中的选项设置 `disabled` 字段来禁用该选项
+
+:::preview
+
+demo-preview=../../examples/cascader/disabled.vue
+
+:::
+
+## 禁用选择器
+
+通过 `disabled` 属性可以禁用整个级联选择器
+
+:::preview
+
+demo-preview=../../examples/cascader/disabled-select.vue
+
+:::
+
+## 可清空
+
+通过 `clearable` 属性可以将级联选择器设置为可清空，点击清空图标可以将选择器清空为初始状态
+
+:::preview
+
+demo-preview=../../examples/cascader/clearable.vue
+
+:::
+
+## 尺寸
+
+使用 `size` 属性改变级联选择器的大小，除了默认大小外，还有 `large` 和 `small` 两种尺寸
+
+:::preview
+
+demo-preview=../../examples/cascader/sizes.vue
+
+:::
+
+## 多选
+
+通过 `props.multiple = true` 来开启多选模式
+
+:::preview
+
+demo-preview=../../examples/cascader/multiple.vue
+
+:::
+
+## 可搜索
+
+通过 `filterable` 属性可以开启搜索功能
+
+:::preview
+
+demo-preview=../../examples/cascader/filterable.vue
+
+:::
+
+## 仅显示最后一级
+
+可以仅在输入框中显示选中项最后一级的标签，而不是默认的显示完整路径
+
+:::preview
+
+demo-preview=../../examples/cascader/show-all-levels.vue
+
+:::
+
+## 折叠标签
+
+多选模式下使用 `collapse-tags` 属性可以将选中项折叠显示。使用 `collapse-tags-tooltip` 属性可以在鼠标悬停时显示所有选中的标签
+
+:::preview
+
+demo-preview=../../examples/cascader/collapse-tags.vue
+
+:::
+
+## Cascader API
+
+### Cascader Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| model-value / v-model | 选中项绑定值 | `string` / `number` / `object` | — |
+| options | 选项的数据源，键名可通过 `props` 属性配置 | `object` | — |
+| props | 配置选项，具体见下表 | `object` | — |
+| size | 尺寸 | `'large' \| 'default' \| 'small'` | `'default'` |
+| placeholder | 输入框占位文本 | `string` | `'请选择'` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| clearable | 是否支持清空选项 | `boolean` | `false` |
+| show-all-levels | 输入框中是否显示选中值的完整路径 | `boolean` | `true` |
+| collapse-tags | 多选模式下是否折叠标签 | `boolean` | `false` |
+| collapse-tags-tooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，`collapse-tags` 属性必须设定为 `true` | `boolean` | `false` |
+| separator | 选项标签的分隔符 | `string` | `' / '` |
+| filterable | 是否支持搜索选项 | `boolean` | `false` |
+| filter-method | 自定义搜索逻辑，第一个参数是节点 `node`，第二个参数是搜索关键词 `keyword`，通过返回 `true` 或 `false` 来过滤 | `function` | — |
+| debounce | 搜索关键词输入的去抖延迟，毫秒 | `number` | `300` |
+| before-filter | 过滤选项之前的钩子，参数为输入的值，若返回 `false` 或者返回 `Promise` 且被 `reject`，则停止过滤 | `function` | — |
+| popper-class | 弹出层类名 | `string` | — |
+| teleported | 是否将弹出内容插入到 body 元素 | `boolean` | `true` |
+| tag-type | 标签类型 | `'success' \| 'info' \| 'warning' \| 'danger'` | `'info'` |
+| tag-effect | 标签主题 | `'dark' \| 'light' \| 'plain'` | `'light'` |
+| validate-event | 输入时是否触发表单的校验 | `boolean` | `true` |
+| max-collapse-tags | 当 `collapse-tags` 为 `true` 时，设置需要显示的标签的最大数量 | `number` | `1` |
+| empty-values | 组件的空值配置 | `array` | `['', null, undefined]` |
+| value-on-clear | 清空选项时的返回值 | `string` / `number` / `boolean` / `Function` | — |
+| persistent | 当下拉框未被激活并且 `persistent` 设置为 `false` 时，下拉框容器会被删除 | `boolean` | `true` |
+| fallback-placements | Tooltip 可用的 positions | `array` | — |
+| placement | 下拉框出现的位置 | `string` | `'bottom-start'` |
+| popper-append-to-body | 是否将弹出的内容直接插入到 body 元素 | `boolean` | `true` |
+| show-checked-strategy | 多选模式下已选节点的展示策略 | `'all' \| 'parent' \| 'child'` | `'child'` |
+
+### Cascader Props
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| expandTrigger | 次级菜单的展开方式 | `'click' \| 'hover'` | `'click'` |
+| multiple | 是否多选 | `boolean` | `false` |
+| checkStrictly | 是否严格的遵守父子节点不关联 | `boolean` | `false` |
+| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 `false`，则只返回该节点的值 | `boolean` | `true` |
+| lazy | 是否动态加载子节点，需使用 `lazyLoad` 方法 | `boolean` | `false` |
+| lazyLoad | 加载动态数据的方法，仅在 `lazy` 为 `true` 时有效 | `function` | — |
+| value | 指定选项的值为选项对象的某个属性值 | `string` | `'value'` |
+| label | 指定选项标签为选项对象的某个属性值 | `string` | `'label'` |
+| children | 指定选项的子选项为选项对象的某个属性值 | `string` | `'children'` |
+| disabled | 指定选项的禁用为选项对象的某个属性值 | `string` / `function` | `'disabled'` |
+| leaf | 指定选项的叶子节点的标志位为选项对象的某个属性值 | `string` | `'leaf'` |
+
+### Cascader Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| change | 当选中节点变化时触发 | `(val: string \| number \| object)` |
+| expand-change | 当展开节点发生变化时触发 | `(val: string \| number \| object)` |
+| blur | 当失去焦点时触发 | `(event: FocusEvent)` |
+| focus | 当获得焦点时触发 | `(event: FocusEvent)` |
+| visible-change | 下拉框出现/隐藏时触发 | `(visible: boolean)` |
+| remove-tag | 在多选模式下，移除标签时触发 | `(val: string \| number \| object)` |
+
+### Cascader Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义备选项的节点内容，参数为 `{ node, data }`，分别为当前节点的 Node 对象和数据 |
+| empty | 无匹配选项时的内容 |

package/docs/components/basic/checkbox.md

@@ -0,0 +1,171 @@
+# Checkbox 多选框
+
+在一组备选项中进行多选。
+
+## 基础用法
+
+单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
+
+checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。 只有一个选项时的默认值类型为 Boolean，当选中时值为true。 el-checkbox 标签中的内容将成为复选框按钮之后的描述。
+
+:::preview
+
+demo-preview=../../examples/checkbox/basic.vue
+
+:::
+
+## 禁用状态​
+多选框不可用状态。
+
+设置 disabled 属性即可。
+:::preview
+
+demo-preview=../../examples/checkbox/disabled.vue
+
+:::
+
+## 多选框组​
+适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
+
+在 el-checkbox 元素中定义 v-model 绑定变量，单一的 checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。 在 el-checkbox 组件中，value 是选择框的值。 如果该组件下没有被传入内容，那么 label 将会作为 checkbox 按钮后的介绍。 value 也与数组中的元素值相对应。 如果指定的值存在于数组中，就处于选择状态，反之亦然。
+
+:::preview
+
+demo-preview=../../examples/checkbox/grouping.vue
+
+:::
+
+## 中间状态​
+indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
+
+:::preview
+
+demo-preview=../../examples/checkbox/intermediate.vue
+
+:::
+
+## 可选项目数量的限制​
+使用 min 和 max 属性能够限制可以被勾选的项目的数量。
+
+:::preview
+
+demo-preview=../../examples/checkbox/limitation.vue
+
+:::
+
+## 按钮样式​
+按钮样式的多选组合。
+
+只需要把 el-checkbox 元素替换为 el-checkbox-button 元素即可。 此外，Element Plus 还提供了size属性。
+
+:::preview
+
+demo-preview=../../examples/checkbox/button-style.vue
+
+:::
+
+## 带有边框​
+设置border属性可以渲染为带有边框的多选框。
+
+:::preview
+
+demo-preview=../../examples/checkbox/with-border.vue
+
+:::
+
+
+## Checkbox API
+
+### Checkbox Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| model-value / v-model | 选中项绑定值 | `string` / `number` / `boolean` | — |
+| value | 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效） | `string` / `number` / `boolean` / `object` | — |
+| label | 选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用 | `string` / `number` / `boolean` / `object` | — |
+| true-value | 选中时的值 | `string` / `number` | — |
+| false-value | 没有选中时的值 | `string` / `number` | — |
+| disabled | 是否禁用 | `boolean` | `false` |
+| border | 是否显示边框 | `boolean` | `false` |
+| size | Checkbox 的尺寸 | `'large' \| 'default' \| 'small'` | — |
+| name | 原生 name 属性 | `string` | — |
+| checked | 当前是否勾选 | `boolean` | `false` |
+| indeterminate | 设置不确定状态，仅负责样式控制 | `boolean` | `false` |
+| validate-event | 输入时是否触发表单的校验 | `boolean` | `true` |
+| tabindex | 输入框的 tabindex | `string` / `number` | — |
+| id | input id | `string` | — |
+| aria-controls | 与 aria-control一致, 当 indeterminate为 true时生效 | `string` | — |
+| aria-label | 原生 aria-label属性 | `string` | — |
+
+<!-- | true-label | 选中时的值（已废弃） | `string` / `number` | — | -->
+<!-- | false-label | 没有选中时的值（已废弃） | `string` / `number` | — | -->
+<!-- | controls | 和 aria-control一致。当 indeterminate 为 true 时生效（已废弃） | `string` | — | -->
+
+### Checkbox Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| change | 当绑定值变化时触发的事件 | `(value: string \| number \| boolean) => void` |
+
+### Checkbox Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容 |
+
+## CheckboxGroup API
+
+### CheckboxGroup Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| model-value / v-model | 绑定值 | `array` | `[]` |
+| size | 多选框组尺寸 | `'large' \| 'default' \| 'small'` | — |
+| disabled | 是否禁用 | `boolean` | `false` |
+| min | 可被勾选的 checkbox 的最小数量 | `number` | — |
+| max | 可被勾选的 checkbox 的最大数量 | `number` | — |
+| aria-label | 原生 aria-label属性 | `string` | — |
+| text-color | 当按钮为活跃状态时的字体颜色 | `string` | `'#ffffff'` |
+| fill | 当按钮为活跃状态时的边框和背景颜色 | `string` | `'#409eff'` |
+| tag | 复选框组元素标签 | `string` | `'div'` |
+| validate-event | 是否触发表单验证 | `boolean` | `true` |
+
+<!-- | label | 原生 aria-label属性（已废弃） | `string` | — | -->
+<!-- | options | 选项的数据源， value 的 key 和 label 和 disabled可以通过 props自定义 | `array` | — | -->
+<!-- | props | options 的配置 | `object` | `{value: 'value', label: 'label', disabled: 'disabled'}` | -->
+<!-- | type | 用于渲染选项的组件类型（例如 'button'） | `'checkbox' \| 'button'` | `'checkbox'` | -->
+
+### CheckboxGroup Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| change | 当绑定值变化时触发的事件 | `(value: Array<string \| number \| boolean>) => void` |
+
+### CheckboxGroup Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ------ | ---- | ------ |
+| default | 自定义默认内容 | Checkbox / CheckboxButton |
+
+## CheckboxButton API
+
+### CheckboxButton Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| value | 选中状态的值，只有在绑定对象类型为 array 时有效。 | `string` / `number` / `boolean` / `object` | — |
+| label | 选中状态的值，只有在绑定对象类型为 array 时有效。 如果没有 value， label则作为value使用 | `string` / `number` / `boolean` / `object` | — |
+| true-value | 选中时的值 | `string` / `number` | — |
+| false-value | 没有选中时的值 | `string` / `number` | — |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 原生 name 属性 | `string` | — |
+| checked | 当前是否勾选 | `boolean` | `false` |
+
+<!-- | true-label | 选中时的值（已废弃） | `string` / `number` | — | -->
+<!-- | false-label | 没有选中时的值（已废弃） | `string` / `number` | — | -->
+
+### CheckboxButton Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容 |

package/docs/components/basic/collapse.md

@@ -0,0 +1,22 @@
+# collapse 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件collapse功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/collapse/index.vue
+
+:::
+
+
+## Collapse API
+
+### Collapse Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| xxx    | xxx  | `String` | —      |

package/docs/components/basic/column-table.md

@@ -0,0 +1,123 @@
+# Column Table 列标题表格
+
+用于以多列结构展示数据的表格。Column Table 是基于 Table 组件封装的组件，适用于需要以列标题形式展示数据的场景。
+
+## 基础用法
+
+Column Table 通过 `m-column-table` 和 `m-column-table-row` 组件配合使用。
+
+- `m-column-table` 接收 `data` 数组作为表格数据，数组中的每个元素对应表格的一列
+- `m-column-table-row` 用于定义每一行的配置，通过 `prop` 属性指定对应 `data` 数组中元素的字段名，通过 `label` 属性设置行标题
+
+### 带列头
+
+默认情况下，Column Table 会在第一列显示行标题（列头）。
+
+:::preview
+
+demo-preview=../../examples/column-table/basic.vue
+
+:::
+
+### 无列头
+
+通过设置 `show-header` 为 `false`，可以隐藏列头，让表格更加紧凑。
+
+:::preview
+
+demo-preview=../../examples/column-table/no-header.vue
+
+:::
+
+### 列标题样式
+
+通过设置 `m-column-table-row` 的 `type` 属性为 `'columnTitle'`，可以让该行显示为列标题样式（背景色为 #F5F5F6，字体加粗）。适用于需要突出显示某些行作为列标题的场景。
+
+:::preview
+
+demo-preview=../../examples/column-table/column-title.vue
+
+:::
+
+## 嵌套用法
+
+Column Table 支持嵌套使用，可以在单元格中嵌套另一个 `m-column-table`，适用于需要展示复杂层级结构的场景。
+
+通过 `m-column-table-row` 的 `default` 插槽，可以在单元格中嵌套另一个 `m-column-table` 组件。嵌套的表格可以设置 `show-header` 为 `false` 来隐藏列头，设置 `outline` 为 `false` 来隐藏边框，使其更好地融入父表格。
+
+:::preview
+
+demo-preview=../../examples/column-table/nested.vue
+
+:::
+
+## 自定义用法
+
+Column Table 提供了丰富的自定义能力，包括自定义单元格内容、样式、合并单元格等功能。
+
+### 自定义单元格内容
+
+通过 `m-column-table-row` 的 `default` 插槽可以自定义单元格内容，插槽提供了 `row`（当前行数据）和 `index`（列索引）参数。
+
+合并单元格，通过 span-method 属性可以实现单元格的合并，用法与 Table 组件的 span-method 相同。函数接收 { row, column, rowIndex, columnIndex } 参数，返回 [rowspan, colspan] 数组。
+
+:::preview
+
+demo-preview=../../examples/column-table/custom.vue
+
+:::
+
+### 自定义样式
+
+- **列样式**：通过 `column-style` 属性可以自定义列的样式，支持对象或函数形式
+- **单元格样式**：通过 `cell-style` 属性可以自定义单元格的样式，支持对象或函数形式
+- **单元格类名**：通过 `cell-class-name` 属性可以自定义单元格的类名，支持字符串或函数形式
+
+## ColumnTable API
+
+### ColumnTable Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| data | 表数据，数组格式，每个元素对应一列的数据 | `array` | `[]` |
+| show-header | 是否展示列头（第一列显示行标题） | `boolean` | `true` |
+| header-column-style | 列头样式（第一列的样式） | `object` | `{ width: '' }` |
+| column-style | 列项样式(不包括列头)，可以是对象或函数。函数接收 `{ column, index }` 参数 | `object` / `Function` | `{ width: '' }` |
+| cell-style | 单元格样式，可以是对象或函数。函数接收单元格数据对象 | `object` / `Function` | `null` |
+| cell-class-name | 单元格的 className，可以是字符串或函数。函数接收单元格数据对象 | `string` / `Function` | `''` |
+| outline | 是否显示边框 | `boolean` | `true` |
+| span-method | 合并行或列的计算方法，与 Table 组件的 span-method 用法相同 | `Function` | `null` |
+
+### ColumnTable Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容，用于放置 `m-column-table-row` 组件 |
+
+## ColumnTableRow API
+
+### ColumnTableRow Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| label | 显示的标题（行标题） | `string` | — |
+| prop | 字段名称，对应 data 数组中每个元素的字段名 | `string` | — |
+| height | 对应 Row 的高度 | `string` / `number` | — |
+| min-height | 对应 Row 的最小高度 | `string` / `number` | — |
+| type | 行类型，设置为 `'columnTitle'` 时该行会显示为列标题样式（背景色为 #F5F5F6） | `'' \| 'columnTitle'` | `''` |
+
+### ColumnTableRow Slots
+
+| 插槽名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| default | 自定义单元格内容 | `{ row: object, index: number }` |
+
+**参数说明：**
+
+- `row`: 当前行的数据对象，结构为 `{ title: string, '0': any, '1': any, '2': any, ... }`
+  - `title`: 当前行的标题（对应 `label` 属性）
+  - `'0'`, `'1'`, `'2'`, ...: 数字字符串作为键，对应每一列的值
+- `index`: 列的索引（包括标题列）
+  - 当 `show-header` 为 `true` 时：`index=0` 为标题列，数据列从 `index=1` 开始
+  - 当 `show-header` 为 `false` 时：数据列从 `index=0` 开始
+  - 访问当前列的值：使用 `row[index]`（`show-header` 为 `false`）或 `row[index - 1]`（`show-header` 为 `true`）

package/docs/components/basic/date-picker.md

@@ -0,0 +1,92 @@
+# date-picker 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+以”日“为基本单位，基础的日期选择控件
+
+基本单位由 type 属性指定。 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。
+
+:::preview
+
+demo-preview=../../examples/date-picker/index.vue
+
+:::
+
+## 选择一段时间
+
+:::preview
+
+demo-preview=../../examples/date-picker/periodTime.vue
+
+:::
+
+## 其他日期单位
+
+:::preview
+
+demo-preview=../../examples/date-picker/otherUnits.vue
+
+:::
+
+## 日期格式
+
+使用format指定输入框的格式。 使用 value-format 指定绑定值的格式。
+
+默认情况下，组件接受并返回Date对象。
+
+:::preview
+
+demo-preview=../../examples/date-picker/default.vue
+
+:::
+
+## DatePicker API
+
+### DatePicker Attributes
+
+| 属性名                | 说明                                                                                       | 类型                                                     | 默认值     |
+| --------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ---------- |
+| model-value / v-model | 绑定值，如果是 range 选择器，数组长度应为 2                                                | number/ string/ Date/ array                              | ''         |
+| readonly              | 只读                                                                                       | boolean                                                  | false      |
+| disabled              | 禁用                                                                                       | boolean                                                  | false      |
+| editable              | 文本框可输入                                                                               | boolean                                                  | true       |
+| clearable             | 是否显示清除按钮                                                                           | boolean                                                  | false      |
+| placeholder           | 非范围选择时的占位内容                                                                     | string                                                   | ''         |
+| start-placeholder     | 范围选择时开始日期的占位内容                                                               | string                                                   | -          |
+| end-placeholder       | 范围选择时结束日期的占位内容                                                               | string                                                   | -          |
+| type                  | 显示类型                                                                                   | 'date'/'daterange'/'week'/'year'/'years'/'month'/'dates' | date       |
+| format                | 显示在输入框中的格式                                                                       |                                                          | YYYY-MM-DD |
+| popper-class          | DatePicker 下拉框的类名                                                                    | string                                                   |            |
+| popper-style          | 弹出内容的自定义样式                                                                       | string/object                                            |            |
+| range-separator       | 选择范围时的分隔符                                                                         | string                                                   | '-'        |
+| default-value         | 可选，选择器打开时默认显示的时间                                                           | object                                                   | -          |
+| default-time          | 范围选择时选中日期所使用的当日内具体时刻                                                   | object                                                   | -          |
+| value-format          | 可选，绑定值的格式。 不指定则绑定值为 Date 对象                                            |                                                          | -          |
+| id                    | 等价于原生 input id 属性                                                                   | string/ object                                           | -          |
+| name                  | 等价于原生 input name 属性                                                                 | string/ object                                           | -          |
+| unlink-panels         | 在范围选择器里取消两个日期面板之间的联动                                                   | boolean                                                  | false      |
+| validate-event        | 是否触发表单验证                                                                           | boolean                                                  | true       |
+| disabled-date         | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function                                                 | -       |
+| shortcuts             | 设置快捷选项，需要传入数组对象                                                             | object                                                   | []         |
+| cell-class-name       | 设置自定义类名                                                                             | Function                                                 | -          |
+| teleported            | 是否将 date-picker 的下拉列表插入至 body 元素                                              | boolean                                                  | true       |
+
+### DatePicker Events
+
+| 事件名          | 说明                                    | 回调参数 |
+| --------------- | --------------------------------------- | -------- |
+| change          | 当用户确认值或点击外部时触发            | Function |
+| blur            | 在组件 Input 失去焦点时触发             | Function |
+| focus           | 在组件 Input 获得焦点时触发             | Function |
+| calendar-change | 在日历所选日期更改时触发 仅用于 range   | Function |
+| panel-change    | 当日期面板改变时触发                    | Function |
+| visible-change  | 当 DatePicker 的下拉列表出现/消失时触发 | Function |
+
+### DatePicker Slots
+
+| 插槽名          | 说明                 |
+| --------------- | -------------------- |
+| default         | 自定义单元格内容     |
+| range-separator | 自定义范围分割符内容 |