refactor: add links for props and slots

Change-Id: I736b6fb95eeb45e4742718019f6734ebc71a7fc8
This commit is contained in:
xiaodemen 2021-10-25 15:39:04 +08:00 committed by GU Yiling
parent 32632e796e
commit 91676f8815
24 changed files with 62 additions and 62 deletions

View File

@ -16,13 +16,13 @@
### 标题 ### 标题
设置 `title` 属性来指定消息标题。 设置 [`title`](#props-title) 属性来指定消息标题。
[[ demo src="/demo/alert/title.vue" ]] [[ demo src="/demo/alert/title.vue" ]]
### 额外内容 ### 额外内容
通过 `extra` 插槽来指定消息之后的额外内容区域。 通过 [`extra`](#slots-extra) 插槽来指定消息之后的额外内容区域。
[[ demo src="/demo/alert/extra.vue" ]] [[ demo src="/demo/alert/extra.vue" ]]

View File

@ -4,21 +4,21 @@
### 普通锚点 ### 普通锚点
使用 [`container`](#props-container) 属性设置发生滚动的容器,当 `Anchor` 组件不在容器中(也就不随容器滚动),此时可以不用设置 `sticky` 属性。 使用 [`container`](#props-container) 属性设置发生滚动的容器,当 `Anchor` 组件不在容器中(也就不随容器滚动),此时可以不用设置 [`sticky`](#props-sticky) 属性。
[[ demo src="/demo/anchor/normal.vue" ]] [[ demo src="/demo/anchor/normal.vue" ]]
### 吸附锚点 ### 吸附锚点
`Anchor` 组件在容器中(随容器滚动),此时可设置 `sticky` 属性来控制组件在滚动出容器时进行吸附。 `Anchor` 组件在容器中(随容器滚动),此时可设置 [`sticky`](#props-sticky) 属性来控制组件在滚动出容器时进行吸附。
[[ demo src="/demo/anchor/sticky.vue" ]] [[ demo src="/demo/anchor/sticky.vue" ]]
### 指定偏移 ### 指定偏移
`target-offset` 用来控制锚点滚动到容器何处开始处于激活状态。 [`target-offset`](#props-target-offset) 用来控制锚点滚动到容器何处开始处于激活状态。
`sticky-offset` 用来控制 `Anchor` 处于容器何处时开始吸附。 [`sticky-offset`](#props-sticky-offset) 用来控制 `Anchor` 处于容器何处时开始吸附。
[[ demo src="/demo/anchor/offset.vue" ]] [[ demo src="/demo/anchor/offset.vue" ]]

View File

@ -4,21 +4,21 @@
### 触发建议的时机 ### 触发建议的时机
设置 `suggest-trigger` 来指定触发建议的时机。 设置 [`suggest-trigger`](#props-suggest-trigger) 来指定触发建议的时机。
[[ demo src="/demo/autocomplete/normal.vue" ]] [[ demo src="/demo/autocomplete/normal.vue" ]]
### 严格模式 ### 严格模式
设置 `strict` 属性来指定严格模式,若输入值没有完全匹配建议值,那么在失焦时会清空输入值。 设置 [`strict`](#props-strict) 属性来指定严格模式,若输入值没有完全匹配建议值,那么在失焦时会清空输入值。
[[ demo src="/demo/autocomplete/strict.vue" ]] [[ demo src="/demo/autocomplete/strict.vue" ]]
### 自定义搜索逻辑 ### 自定义搜索逻辑
设置 `match` 属性来自定义自定义高亮逻辑。 设置 [`match`](#props-match) 属性来自定义自定义高亮逻辑。
设置 `filter` 属性来自定义搜索命中逻辑。 设置 [`filter`](#props-filter) 属性来自定义搜索命中逻辑。
:::tip :::tip
`match` 用于高亮显示匹配文本的逻辑;而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点。 `match` 用于高亮显示匹配文本的逻辑;而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点。

View File

@ -22,7 +22,7 @@
### 禁用状态 ### 禁用状态
设置 `disabled` 来使按钮处于禁用状态。 设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button-group/disabled.vue" ]] [[ demo src="/demo/button-group/disabled.vue" ]]

View File

@ -16,13 +16,13 @@
### 禁用状态 ### 禁用状态
设置 `disabled` 来使按钮处于禁用状态。 设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button/disabled.vue" ]] [[ demo src="/demo/button/disabled.vue" ]]
### 加载状态 ### 加载状态
设置 `loading` 来使按钮处于加载状态,无法点击。 设置 [`loading`](#props-loading) 来使按钮处于加载状态,无法点击。
[[ demo src="/demo/button/loading.vue" ]] [[ demo src="/demo/button/loading.vue" ]]

View File

@ -22,25 +22,25 @@
### 日历类型 ### 日历类型
设置 `type` 来指定日历的类型:年、月、日。 设置 [`type`](#props-type) 来指定日历的类型:年、月、日。
[[ demo src="/demo/calendar/type.vue" ]] [[ demo src="/demo/calendar/type.vue" ]]
### 显示非本月日期 ### 显示非本月日期
设置 `fill-month` 来控制是否显示非本月日期。 设置 [`fill-month`](#props-fill-month) 来控制是否显示非本月日期。
[[ demo src="/demo/calendar/fill-month.vue" ]] [[ demo src="/demo/calendar/fill-month.vue" ]]
### 禁用日期 ### 禁用日期
设置 `disabled-date` 来自定义指定日期是否禁用。 设置 [`disabled-date`](#props-disabled-date) 来自定义指定日期是否禁用。
[[ demo src="/demo/calendar/disabled-date.vue" ]] [[ demo src="/demo/calendar/disabled-date.vue" ]]
### 自定义日期的样式 ### 自定义日期的样式
设置 `date-class` 来自定义指定日期的 `class` 设置 [`date-class`](#props-date-class) 来自定义指定日期的 `class`
[[ demo src="/demo/calendar/date-class.vue" ]] [[ demo src="/demo/calendar/date-class.vue" ]]

View File

@ -4,7 +4,7 @@
### 切换 ### 切换
使用 `index` 来控制当前显示的项目。 使用 [`index`](#props-index) 来控制当前显示的项目。
[[ demo src="/demo/carousel/switch.vue" ]] [[ demo src="/demo/carousel/switch.vue" ]]
@ -45,7 +45,7 @@
### 轮播项纵横比 ### 轮播项纵横比
设置 `slide-aspect-ratio` 属性来指定每个轮播项的纵横比。 设置 [`slide-aspect-ratio`](#props-slide-aspect-ratio) 属性来指定每个轮播项的纵横比。
[[ demo src="/demo/carousel/ratio.vue" ]] [[ demo src="/demo/carousel/ratio.vue" ]]

View File

@ -29,19 +29,19 @@
### 选择模式 ### 选择模式
使用 `select-mode` 属性来控制在单选模式下哪些项目可以被选中。 使用 [`select-mode`](#props-select-mode) 属性来控制在单选模式下哪些项目可以被选中。
[[ demo src="/demo/cascader/select-mode.vue" ]] [[ demo src="/demo/cascader/select-mode.vue" ]]
### 子项展开时机 ### 子项展开时机
使用 `column-trigger` 属性来控制下拉面板中下级的展开时机。 使用 [`column-trigger`](#props-column-trigger) 属性来控制下拉面板中下级的展开时机。
[[ demo src="/demo/cascader/column-trigger.vue" ]] [[ demo src="/demo/cascader/column-trigger.vue" ]]
### 渲染选中值 ### 渲染选中值
使用 `value-display` 属性来控制选中值如何展示。 使用 [`value-display`](#props-value-display) 属性来控制选中值如何展示。
[[ demo src="/demo/cascader/value-display.vue" ]] [[ demo src="/demo/cascader/value-display.vue" ]]

View File

@ -10,25 +10,25 @@
### 简单样式 ### 简单样式
设置 `ui` 属性值:`simple` 来指定简单样式。 设置 [`ui`](#props-ui) 属性值:`simple` 来指定简单样式。
[[ demo src="/demo/check-button-group/simple.vue" ]] [[ demo src="/demo/check-button-group/simple.vue" ]]
### 单复选共存 ### 单复选共存
可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。 可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/check-button-group/exclusive.vue" ]] [[ demo src="/demo/check-button-group/exclusive.vue" ]]
### 额外描述 ### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/check-button-group/desc.vue" ]] [[ demo src="/demo/check-button-group/desc.vue" ]]
### 最小宽度 ### 最小宽度
通过设置 `ui` 属性值 `stable` 来开启项目的最小宽度。 通过设置 [`ui`](#props-ui) 属性值 `stable` 来开启项目的最小宽度。
[[ demo src="/demo/check-button-group/stable.vue" ]] [[ demo src="/demo/check-button-group/stable.vue" ]]

View File

@ -10,13 +10,13 @@
### 单复选共存 ### 单复选共存
可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。 可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/checkbox-group/exclusive.vue" ]] [[ demo src="/demo/checkbox-group/exclusive.vue" ]]
### 额外描述 ### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/checkbox-group/desc.vue" ]] [[ demo src="/demo/checkbox-group/desc.vue" ]]

View File

@ -22,9 +22,9 @@
### 禁用和只读 ### 禁用和只读
设置 `disabled` 属性可使组件处于禁用状态。 设置 [`disabled`](#props-disabled) 属性可使组件处于禁用状态。
设置 `readonly` 属性可使组件处于只读状态。 设置 [`readonly`](#props-readonly) 属性可使组件处于只读状态。
[[ demo src="/demo/date-picker/disabled.vue" ]] [[ demo src="/demo/date-picker/disabled.vue" ]]

View File

@ -14,13 +14,13 @@
### 只读状态 ### 只读状态
设置 `readonly` 来使内部表单项处于只读状态。 设置 [`readonly`](#slots-readonly) 来使内部表单项处于只读状态。
[[ demo src="/demo/form/readonly.vue" ]] [[ demo src="/demo/form/readonly.vue" ]]
### 禁用状态 ### 禁用状态
设置 `disabled` 来使内部表单项处于禁用状态。 设置 [`disabled`](#slots-disabled) 来使内部表单项处于禁用状态。
[[ demo src="/demo/form/disabled.vue" ]] [[ demo src="/demo/form/disabled.vue" ]]

View File

@ -10,25 +10,25 @@
### 只读状态 ### 只读状态
设置 `readonly` 来使输入框处于只读状态。 设置 [`readonly`](#props-readonly) 来使输入框处于只读状态。
[[ demo src="/demo/input/readonly.vue" ]] [[ demo src="/demo/input/readonly.vue" ]]
### 禁用状态 ### 禁用状态
设置 `disabled` 来使输入框处于禁用状态。 设置 [`disabled`](#props-disabled) 来使输入框处于禁用状态。
[[ demo src="/demo/input/disabled.vue" ]] [[ demo src="/demo/input/disabled.vue" ]]
### 感知输入法 ### 感知输入法
设置 `composition` 来感知输入法输入过程中的值。 设置 [`composition`](#props-composition) 来感知输入法输入过程中的值。
[[ demo src="/demo/input/composition.vue" ]] [[ demo src="/demo/input/composition.vue" ]]
### 过滤首尾空白字符 ### 过滤首尾空白字符
设置 `trim` 来自动过滤用户输入的首尾空白字符。 设置 [`trim`](#props-trim) 来自动过滤用户输入的首尾空白字符。
[[ demo src="/demo/input/trim.vue" ]] [[ demo src="/demo/input/trim.vue" ]]

View File

@ -4,7 +4,7 @@
### 尺寸 ### 尺寸
可选的尺寸 `ui` 属性值:`s`/`m`。 可选的尺寸 [`ui`](#props-ui) 属性值:`s`/`m`。
[[ demo src="/demo/nav/size.vue" ]] [[ demo src="/demo/nav/size.vue" ]]

View File

@ -10,21 +10,21 @@
### 只读状态 ### 只读状态
设置 `readonly` 来使数字输入框处于只读状态。 设置 [`readonly`](#props-readonly) 来使数字输入框处于只读状态。
[[ demo src="/demo/number-input/readonly.vue" ]] [[ demo src="/demo/number-input/readonly.vue" ]]
### 禁用状态 ### 禁用状态
设置 `disabled` 来使数字输入框处于禁用状态。 设置 [`disabled`](#props-disabled) 来使数字输入框处于禁用状态。
[[ demo src="/demo/number-input/disabled.vue" ]] [[ demo src="/demo/number-input/disabled.vue" ]]
### 精度位数和递增/递减 ### 精度位数和递增/递减
设置 `decimal-place` 来指定数值的小数精度位数。 设置 [`decimal-place`](#props-decimal-place) 来指定数值的小数精度位数。
设置 `step` 来指定每次递增/减的数值。 设置 [`step`](#props-step) 来指定每次递增/减的数值。
[[ demo src="/demo/number-input/decimal.vue" ]] [[ demo src="/demo/number-input/decimal.vue" ]]

View File

@ -15,9 +15,9 @@
### 每页个数 ### 每页个数
使用 `page-size` 属性来指定当前每页的个数。 使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。
使用 `page-sizes` 属性来指定每页个数候选项。 使用 [`page-sizes`](#props-page-sizes) 属性来指定每页个数候选项。
[[ demo src="/demo/pagination/pages.vue" ]] [[ demo src="/demo/pagination/pages.vue" ]]

View File

@ -10,13 +10,13 @@
### 简单样式 ### 简单样式
设置 `ui` 属性值:`simple` 来指定简单样式。 设置 [`ui`](#props-ui) 属性值:`simple` 来指定简单样式。
[[ demo src="/demo/radio-button-group/simple.vue" ]] [[ demo src="/demo/radio-button-group/simple.vue" ]]
### 额外描述 ### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-button-group/desc.vue" ]] [[ demo src="/demo/radio-button-group/desc.vue" ]]

View File

@ -10,7 +10,7 @@
### 额外描述 ### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-group/desc.vue" ]] [[ demo src="/demo/radio-group/desc.vue" ]]

View File

@ -10,7 +10,7 @@
### 步骤状态 ### 步骤状态
可以通过设置 `steps``status` 属性值定义步骤状态,若步骤出错,可设置为 `error` 可以通过设置 [`steps`](#props-steps)`status` 属性值定义步骤状态,若步骤出错,可设置为 `error`
[[ demo src="/demo/steps/status.vue" ]] [[ demo src="/demo/steps/status.vue" ]]

View File

@ -10,7 +10,7 @@
### 值设定 ### 值设定
可以通过设置 `true-value``false-value` 来修改打开、关闭状态下 `v-model` 的值。 可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 来修改打开、关闭状态下 `v-model` 的值。
[[ demo src="/demo/switch/value.vue" ]] [[ demo src="/demo/switch/value.vue" ]]

View File

@ -10,19 +10,19 @@
### 只读状态 ### 只读状态
设置 `readonly` 来使文本域处于只读状态。 设置 [`readonly`](#props-readonly) 来使文本域处于只读状态。
[[ demo src="/demo/textarea/readonly.vue" ]] [[ demo src="/demo/textarea/readonly.vue" ]]
### 禁用状态 ### 禁用状态
设置 `disabled` 来使文本域处于禁用状态。 设置 [`disabled`](#props-disabled) 来使文本域处于禁用状态。
[[ demo src="/demo/textarea/disabled.vue" ]] [[ demo src="/demo/textarea/disabled.vue" ]]
### 自动扩展 ### 自动扩展
设置 `autoresize` 来使文本域处于自动扩展状态。 设置 [`autoresize`](#props-autoresize) 来使文本域处于自动扩展状态。
[[ demo src="/demo/textarea/autoresize.vue" ]] [[ demo src="/demo/textarea/autoresize.vue" ]]

View File

@ -10,13 +10,13 @@
### 定制时间选项 ### 定制时间选项
支持定制时间选项,分别可以通过 `hours`、`minutes` 和 `seconds` 来定制对应的时间选项。 支持定制时间选项,分别可以通过 [`hours`](#props-hours)、[`minutes`](#props-minutes) 和 [`seconds`](#props-seconds) 来定制对应的时间选项。
[[ demo src="/demo/time-picker/datasource.vue" ]] [[ demo src="/demo/time-picker/datasource.vue" ]]
### 范围限制 ### 范围限制
支持范围限制,可以通过 `min``max` 来分别设置最小值和最大值。 支持范围限制,可以通过 [`min`](#props-min) 和 [`max`](#props-max) 来分别设置最小值和最大值。
[[ demo src="/demo/time-picker/range.vue" ]] [[ demo src="/demo/time-picker/range.vue" ]]

View File

@ -22,7 +22,7 @@
### 选中值的合并模式 ### 选中值的合并模式
设置 `merge-checked` 来指定选中值的合并模式。 设置 [`merge-checked`](#props-merge-checked) 来指定选中值的合并模式。
[[ demo src="/demo/transfer/merge-checked.vue" ]] [[ demo src="/demo/transfer/merge-checked.vue" ]]

View File

@ -4,49 +4,49 @@
### 文件上传 ### 文件上传
设置 `type` 的值为 `file` 进入文件上传模式。 设置 [`type`](#props-type) 的值为 `file` 进入文件上传模式。
[[ demo src="/demo/uploader/file.vue" ]] [[ demo src="/demo/uploader/file.vue" ]]
### 图片上传 ### 图片上传
设置 `type` 的值为 `image` 进入图片上传模式。 设置 [`type`](#props-type) 的值为 `image` 进入图片上传模式。
[[ demo src="/demo/uploader/image.vue" ]] [[ demo src="/demo/uploader/image.vue" ]]
### 媒体上传 ### 媒体上传
设置 `type` 的值为 `media` 进入媒体上传模式。 设置 [`type`](#props-type) 的值为 `media` 进入媒体上传模式。
[[ demo src="/demo/uploader/media.vue" ]] [[ demo src="/demo/uploader/media.vue" ]]
### 前端校验 ### 前端校验
图片格式、大小、数量校验以及使用 `validator` 自定义校验。 图片格式、大小、数量校验以及使用 [`validator`](#props-validator) 自定义校验。
[[ demo src="/demo/uploader/validate.vue" ]] [[ demo src="/demo/uploader/validate.vue" ]]
### 自定义配置 ### 自定义配置
使用 `upload` 自定义上传过程,使用 `controls` 配置浮层操作项。 使用 [`upload`](#props-upload) 自定义上传过程,使用 [`controls`](#props-controls) 配置浮层操作项。
[[ demo src="/demo/uploader/custom.vue" ]] [[ demo src="/demo/uploader/custom.vue" ]]
### 拖拽排序 ### 拖拽排序
设置 `sortable` 属性来指定上传项目之间可以拖拽排序。 设置 [`sortable`](#props-sortable) 属性来指定上传项目之间可以拖拽排序。
[[ demo src="/demo/uploader/sortable.vue" ]] [[ demo src="/demo/uploader/sortable.vue" ]]
### 已上传项自定义操作 ### 已上传项自定义操作
设置 `controls` 属性来指定悬浮到每个上传项时的操作选项。 设置 [`controls`](#props-controls) 属性来指定悬浮到每个上传项时的操作选项。
[[ demo src="/demo/uploader/controls.vue" ]] [[ demo src="/demo/uploader/controls.vue" ]]
### 上传入口自定义操作 ### 上传入口自定义操作
设置 `entries` 属性来指定悬浮到继续上传项目时的操作选项。 设置 [`entries`](#props-entries) 属性来指定悬浮到继续上传项目时的操作选项。
[[ demo src="/demo/uploader/entries.vue" ]] [[ demo src="/demo/uploader/entries.vue" ]]