This commit is contained in:
2022-06-14 09:05:00 +08:00
parent d4ecca4b32
commit bd0641fefb
421 changed files with 20350 additions and 40204 deletions

View File

@@ -1,105 +0,0 @@
# Accordion <small>手风琴面板</small>
:::tip
`Accordion` 组件需要内联 [`Collapse`](./collapse) 组件使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/accordion/size.vue" ]]
### 样式变体
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
[[ demo src="/demo/accordion/variant.vue" ]]
### 允许多个展开
可使用 [`multiple`](#props-multiple) 属性来允许多个面板同时展开。
[[ demo src="/demo/accordion/multiple.vue" ]]
### 展开图标位置
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
[[ demo src="/demo/accordion/position.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``multiple`` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``expanded`` | `string | Array<string>` | - | [^expanded] |
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。其中 `simple` / `basic` / `strong` 只能选择一个,不设置则为默认的普通样式。`bordered` / `borderless` 只能选择一个。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `simple` | 简洁样式。 |
| `basic` | 白底样式。 |
| `strong` | 白底样式。 |
| `bordered` | 有外边框。 |
| `borderless` | 无外边框。 |
| `dull` | 标题区域是不否响应鼠标交互改变样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
已展开的折叠面板标识,对应于内联 `Collapse` 组件的 [`name`](./collapse#props-name) 属性。当 `multiple` 为 `true` 时,为折叠面板标识的数组。
^^^
^^^toggle-position
设置展开图标的位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `start` | 展开图标位于开始位置,为默认位置。 |
| `end` | 展开图标位于结束位置。 |
| `none` | 无展开图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区,用来内联 `Collapse` 组件。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | [^toggle] |
^^^toggle
点击内部折叠面板标题区触发展开/收起时触发。回调参数为 `(expand: boolean, name: string, expanded)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `expand` | `boolean` | 是否展开。 |
| `name` | `string` | 被切换的折叠面板标识。 |
| `expanded` | `string | Array<string>` | 当前所有被展开的折叠面板标识。 |
+++
^^^

View File

@@ -1,75 +0,0 @@
# AlertBox <small>警告弹框</small>
## 示例
### 类型
`AlertBox` 有三种类型,分别是 `info``success``error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
[[ demo src="/demo/alert-box/type.vue" ]]
### 标题
可以通过 [`title`](#props-title) 属性或 [`title`](#slots-title) 插槽自定义警告弹框的标题。
[[ demo src="/demo/alert-box/title.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``open`` | `boolean` | `false` | [^open] |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string=` | - | 标题。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示警告弹框。
^^^
^^^type
警告框类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `error` | 错误样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | 底部区域,默认会展示一个“知道了”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“知道了”按钮触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``info`` | 普通信息。 |
| ``success`` | 成功状态。 |
| ``error`` | 错误状态。 |

View File

@@ -1,104 +0,0 @@
# Alert <small>提示</small>
## 示例
### 类型
`Alert` 有四种类型,分别是 `success``info``warning``error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
[[ demo src="/demo/alert/type.vue" ]]
### 多消息切换
可以将 [`message`](#props-message) 属性指定为数组,来实现展现多条可切换的消息提示。
[[ demo src="/demo/alert/multiple.vue" ]]
### 标题
设置 [`title`](#props-title) 属性来指定消息标题。
[[ demo src="/demo/alert/title.vue" ]]
### 额外内容
通过 [`extra`](#slots-extra) 插槽来指定消息之后的额外内容区域。
[[ demo src="/demo/alert/extra.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string` | - | 消息标题。 |
| ``message`` | `string | Array<string>` | - | 消息内容,当类型为数组时会显示多条数据并支持切换上一条/下一条。 |
| ``closable`` | `boolean=` | `false` | 是否允许关闭。 |
| ``open`` | `boolean=` | `true` | [^open] |
| ``index`` | `number=` | `0` | [^index] |
^^^type
警告框类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `warning` | 警告样式。 |
| `error` | 错误样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示消息。
^^^
^^^index
:::badges
`.sync`
:::
在有多条数据时,当前显示的消息的索引。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``title`` | 消息标题的内容区域。 |
| ``extra`` | 消息之后的额外内容区域。 |
| ``content`` | 整个消息区域,包括状态图标、切换按钮、关闭按钮等。 |
^^^slot-default
消息内容区域。
默认内容:消息文本。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `message` | `string` | 消息文本。 |
| `index` | `number=` | 当有多条消息时,当前消息的索引值。 |
| `close` | `function` | 用于关闭提示。 |
+++
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 成功消息。 |
| ``warning`` | 警告消息。 |
| ``info`` | 信息消息。 |
| ``error`` | 错误消息。 |
| ``prev`` | 上一条。 |
| ``next`` | 下一条。 |
| ``close`` | 关闭。 |

View File

@@ -1,70 +0,0 @@
# Anchor <small>锚点</small>
## 示例
### 普通锚点
使用 [`container`](#props-container) 属性设置发生滚动的容器,当 `Anchor` 组件不在容器中(也就不随容器滚动),此时可以不用设置 [`sticky`](#props-sticky) 属性。
[[ demo src="/demo/anchor/normal.vue" ]]
### 吸附锚点
`Anchor` 组件在容器中(随容器滚动),此时可设置 [`sticky`](#props-sticky) 属性来控制组件在滚动出容器时进行吸附。
[[ demo src="/demo/anchor/sticky.vue" ]]
### 指定偏移
用 [`target-offset`](#props-target-offset) 属性来控制锚点滚动到容器何处开始处于激活状态。
用 [`sticky-offset`](#props-sticky-offset) 属性来控制 `Anchor` 处于容器何处时开始吸附。
[[ demo src="/demo/anchor/offset.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] |
| ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 |
| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置,那么对应的锚点链接处于激活状态。数值类型值为 `px` 值,也可以传入如 `'10%'` 的百分比字符串,将基于 `container` 对应容器的高度比例进行计算。 |
| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言,当容器滚动到 `sticky-offset` 位置,那么该 `Anchor` 开始吸附。不同值类型含义同 [`target-offset`](#props-target-offset) 属性。 |
^^^items
数据源数组,每个项目类型为 `{label, value, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值,一般是页内 hash 如 `#button` 。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 [`items`](#props-items) 数组项。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``item-label`` | [^slot-item-label] |
^^^slot-item
渲染每个锚点链接。
默认内容:锚点链接。
作用域参数参见 [`items`](#props-items) 属性详情。
^^^
^^^slot-item-label
渲染每个锚点链接的文本。
默认内容:锚点链接的描述文本 `label`。
作用域参数参见 [`item`](#slots-item) 插槽。
^^^

View File

@@ -1,138 +0,0 @@
# Autocomplete <small>自动完成</small>
## 示例
### 建议触发时机
设置 [`suggest-trigger`](#props-suggest-trigger) 来指定触发建议的时机。
[[ demo src="/demo/autocomplete/normal.vue" ]]
### 严格模式
设置 [`strict`](#props-strict) 属性来指定严格模式,若输入值没有完全匹配建议值,那么在失焦时会清空输入值。
[[ demo src="/demo/autocomplete/strict.vue" ]]
### 自定义搜索逻辑
设置 [`match`](#props-match) 属性来自定义高亮逻辑;设置 [`filter`](#props-filter) 属性来自定义搜索命中逻辑。
:::tip
`match` 用于高亮显示匹配文本的逻辑;而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点。
:::
[[ demo src="/demo/autocomplete/custom.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
| ``value`` | `*` | - | [^prop-value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``placeholder`` | `string=` | - | 输入占位符。 |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``maxlength`` | `number=` | - | 输入字符串的长度限制。 |
| ``strict`` | `boolean=` | `false` | 输入字符串到达长度限制以后是否禁止继续输入。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``autofocus`` | `boolean=` | `false` | 是否自动获取焦点。 |
^^^datasource
数据源数组,项目为 `Object` 时字段为 `{label, value, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值,一般是页内 hash 如 `#button` 。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 [`items`](#props-items) 数组项。 |
+++
^^^
^^^prop-value
:::badges
`v-model`
:::
当前选中的值。
^^^
^^^expanded
:::badges
`.sync`
:::
建议面板是否展开(如果 `suggestions` 中没有待选项,则即使为 `true` 时面板也会关闭)。
^^^
^^^trim
是否移除前后空格。当为 `true` 时,会移除前后空格,当为 `false` 时,不移除前后空格。设置为字符串时,按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``suggestions`` | [^slot-suggestions] |
| ``option-label`` | [^slot-option-label] |
^^^slot-suggestions
下拉建议面板插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `datasource` | `Array<string | Object>` | 数据源,类型同 [`datasource`](#props-datasource) 属性。 |
| `keyword` | `string` | 搜索关键词。 |
+++
^^^
^^^slot-option-label
下拉面板中选项插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 用来显示的节点文案,不存在则取 `value`。 |
| `value` | `string` | 用来实际选中的值。 |
| `matches` | `Array<{text: string, matched: boolean}>` | 匹配情况,一个节点可能被切分成多断文本,`text` 表示该段文本, `matched` 表示该段文本是否匹配。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``select`` | 采纳建议时触发,参数是当前值。 |
| ``toggle`` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
| ``clear`` | 清除当前值时触发。 |
^^^event-input
:::badges
`v-model`
:::
当在 `input` 中输入或下拉面板中选值会触发该事件,参数是当前输入值或选中时的选中项目的 `value`。
^^^

View File

@@ -1,58 +0,0 @@
# Badge <small>徽标</small>
## 示例
### 文字徽标
徽标内容可以是纯文本。
[[ demo src="/demo/badge/text.vue" ]]
### 数字徽标
徽标内容也可以是数字,超过最大值时可以显示为*最大值+*。
[[ demo src="/demo/badge/number.vue" ]]
### 飘角徽标
不提供徽标内容时,徽标将以圆点样式显示在右上角。
[[ demo src="/demo/badge/corner-dot.vue" ]]
### 圆点徽标
不提供插槽内容时,徽标将以圆点样式显示。
[[ demo src="/demo/badge/dot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'error'` | [^type] |
| ``value`` | `string | number` | - | 徽标内容值。为 `number` 类型值时,会受 [`max`](#props-max) 属性限制。为 `string` 类型时,`max` 会被忽略。 |
| ``max`` | `number=` | `badge.max` | 徽标数值的最大值,当 `value` 超过此值时,徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
| ``hidden`` | `boolean=` | `false` | 是否处于隐藏状态。 |
^^^type
徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `warning` | 警告样式。 |
| `error` | 错误样式。 |
| `aux` | 辅助样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 需要显示徽标的目标内容。 |

View File

@@ -1,48 +0,0 @@
# BreadcrumbItem <small>面包屑项</small>
:::tip
`BreadcrumbItem` 组件需要在 [`Breadcrumb`](./breadcrumb) 组件内使用。
:::
## 示例
见 [`Breadcrumb` 示例](./breadcrumb#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``to`` | `string | Object` | - | 点击面包屑项之后要跳转到的地址。见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| ``type`` | `string` | `'link'` | [^link] |
| ``native`` | `boolean` | `false` | 当值为 `true` 且指定了 `to` 时,会直接使用原生 `<a>` 元素,`to` 值会被设置到 `<a>` 标签的 `href` 属性上。 |
^^^link
面包屑项的类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `link` | 超链接样式。 |
| `text` | 文本样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 填充面包屑项的正文内容区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``redirect`` | 点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event: Event)`,直接透传[原生点击事件对象](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``separator`` | 分隔符。 |

View File

@@ -1,114 +0,0 @@
# Breadcrumb <small>面包屑</small>
:::tip
`Breadcrumb` 组件可以内联 [`BreadcrumbItem`](./breadcrumb-item) 组件使用。
:::
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值:`strong`
[[ demo src="/demo/breadcrumb/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/breadcrumb/size.vue" ]]
### 内联模式
直接内联 `BreadcrumbItem` 使用。
[[ demo src="/demo/breadcrumb/base.vue" ]]
### 使用数据源
也可以传入数据源。
[[ demo src="/demo/breadcrumb/datasource.vue" ]]
### 自定义分隔符
可以使用插槽自定义分隔符。
[[ demo src="/demo/breadcrumb/separator.vue" ]]
### 事件监听
监听 [`redirect`](#events-redirect) 事件后处理而非直接路由跳转。
[[ demo src="/demo/breadcrumb/redirect.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``ui`` | `string=` | - | [^ui] |
| ``routes`` | `Array<Object>` | `[]` | [^routes] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^routes
面包屑配置,项目类型为 `{label: string, type: string, to: string | Object=, native: boolean=}`,除 `label` 外字段详情可参考 [`BreadcrumbItem`](./breadcrumb-item) 组件的属性。
:::warning
默认情况下,最后一项始终会显示成普通文本样式。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 支持内联模式,直接传入 [`BreadcrumbItem`](./breadcrumb-item) 组件列表。填充后 [`routes`](#props-routes) 属性将被忽略。 |
| ``item`` | [^slot-item] |
| ``separator`` | [^slot-separator] |
^^^slot-item
用于为每个项目自定义内容。默认内容为 `routes` 项目的 `label` 或 [`BreadcrumbItem`]('./breadcrumb-item) 组件的默认插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `route` | `Object` | `routes` 中的项目。自定义字段亦会绑定到作用域对象中。 |
+++
^^^
^^^slot-separator
面包屑条目之间的分隔符。默认显示全局配置的分隔图标。
:::warning
当使用 Vue.js `2.5.17` 及以下版本时,必须绑定 `slot-scope` 使用。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``redirect`` | [^redirect] |
^^^redirect
点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event, route, index)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| ``event`` | [Event](https://developer.mozilla.org/zh-CN/docs/Web/Events/click) | 事件对象。 |
| ``route`` | `Object` | 面包屑条目对象。 |
| ``index`` | `number` | 当前点击条目的索引。 |
+++
^^^

View File

@@ -1,111 +0,0 @@
# ButtonGroup <small>按钮组</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值:`primary` / `strong` / `basic`
[[ demo src="/demo/button-group/style.vue" ]]
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`
[[ demo src="/demo/button-group/size.vue" ]]
### 使用数据源
可以使用 [`items`](#props-items) 属性通过数据源指定按钮内容。
[[ demo src="/demo/button-group/items.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button-group/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | - | [^items] |
| ``disabled`` | `boolean=` | `false` | 按钮是否为禁用状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `primary` | 主要按钮,背景显示为主题色。 |
| `strong` | 加强样式。 |
| `basic` | 基础样式。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `xl` | 超大尺寸样式。 |
+++
^^^
^^^items
按钮数据项的数组,项目类型为 `{label, value}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 按钮文本。 |
| `value` | `*=` | 如传入 `string` 类型的值,则会在点击按钮时触发同名的事件。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 按钮组内容区。 |
| ``item`` | [^slot-item] |
^^^slot-item
用来定制每个按钮的内容。
默认内容:[`label`](#props-label) 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 按钮文本。 |
| `value` | `*=` | 按钮项的 `value` 值。 |
| `index` | `number` | 按钮在 `items` 中的序号。 |
| `disabled` | `boolean=` | 按钮是否禁用。 |
+++
另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | [^click-event] |
| <var>&lt;value&gt;</var> | [^value-var-event] |
^^^click-event
点击后触发,回调参数为 `(item, index)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `{label: string, value: *=, ...}` | 数据项。 |
| `index` | `number` | 按钮在 `items` 中的序号。 |
+++
^^^
^^^value-var-event
如果对应数据项有字符串类型的 `value` 字段,则在点击后触发名为 `value` 值的事件,参数与 [`click`](#events-click) 事件相同。
^^^

View File

@@ -1,93 +0,0 @@
# Button <small>按钮</small>
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值:`primary` / `strong` / `translucent` / `text` / `icon`
[[ demo src="/demo/button/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`
[[ demo src="/demo/button/size.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button/disabled.vue" ]]
### 加载状态
设置 [`loading`](#props-loading) 来使按钮处于加载状态,无法点击。
[[ demo src="/demo/button/loading.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``type`` | `string=` | `'button'` | [^type] |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `normal` | 普通按钮,为默认样式。 |
| `primary` | 主要按钮,背景显示为主题色。 |
| `basic` | 基础按钮。 |
| `strong` | 加强样式。可单独使用,也可配合 `text` / `icon` 样式使用。 |
| `translucent` | 半透明样式,用于深色背景。 |
| `text` | 纯文字样式,没有背景色及边框。 |
| `icon` | 纯图标样式,没有背景色及边框。 |
| `aux` | 辅助按钮,用于配合 `text` / `icon` 样式使用。 |
| `square` | 方形按钮。可配合其它样式一同使用。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `xl` | 超大尺寸样式。 |
+++
^^^
^^^type
按钮类型。参见原生 `<button>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-type)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `button` | 普通按钮。 |
| `submit` | 提交按钮,点击会触发外部表单提交。 |
| `reset` | 重置按钮,点击会触发外部表单重置为初始值。 |
+++
:::warning
注意,默认值与原生 `<button>` 元素不同。需要触发表单提交时请显式设置为 `submit`。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 按钮上显示的内容。 |
### 事件
`Button` 组件支持所有原生 `<button>` 元素支持的原生事件,回调函数的参数均为相应的原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``loading`` | 加载状态。 |

View File

@@ -1,153 +0,0 @@
# Calendar <small>日历</small>
## 示例
### 单日选择
默认情况下,单击日期可以选中一个日期。
[[ demo src="/demo/calendar/default.vue" ]]
### 多日、日期范围选择
配置 [`multiple`](#props-multiple) 属性时,可以选择多个日期。配置 [`range`](#props-range) 属性时,可以选择一个日期范围。
[[ demo src="/demo/calendar/range-multiple.vue" ]]
### 多日期范围选择
同时配置 [`multiple`](#props-multiple) 及 [`range`](#props-range) 属性时,可以选择多段日期范围。配置 [`panel`](#props-panel) 属性时,可以指定日历面板的数量。两次选择的时间段合并的策略为,若从未选日期开始选择则选中该时段,否则则取消选择该时段。
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
### 日历类型
设置 [`type`](#props-type) 来指定日历的类型:年、月、日。
[[ demo src="/demo/calendar/type.vue" ]]
### 显示非本月日期
设置 [`fill-month`](#props-fill-month) 来控制是否显示非本月日期。
[[ demo src="/demo/calendar/fill-month.vue" ]]
### 禁用日期
设置 [`disabled-date`](#props-disabled-date) 来自定义指定日期是否禁用。
[[ demo src="/demo/calendar/disabled-date.vue" ]]
### 自定义日期样式
设置 [`date-class`](#props-date-class) 来自定义指定日期的 `class`
[[ demo src="/demo/calendar/date-class.vue" ]]
### 自定义日期内容
通过 [`before`](#slots-before) 插槽来自定义前置内容。
[[ demo src="/demo/calendar/slots.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'date'` | 日历的类型,可用值为 `'date'` / `'month'` / `'year'`,分别对应日期/月/年视图。 |
| ``multiple`` | `boolean=` | `false` | 是否可以选择多个日期(范围)。 |
| ``range`` | `boolean=` | `false` | 是否选择日期范围。 |
| ``selected`` | `Date | Array=` | - | [^selected] |
| ``panel`` | `number=` | `1` | 日历面板数量。 |
| ``today`` | `Date=` | `new Date()` | 「今天」的日期。 |
| ``week-start`` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#configs-calendar-weekStart)。 |
| ``fill-month`` | `boolean=` | `true` | 当只有一个面板时,是否要在当前月份面板显示非本月日期。 |
| ``date-class`` | `string | Array | Object | function=` | `{}` | 特定日期的自定义 HTML `class`。传非函数时,数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class);传函数时,签名为 `function(Date): string | Array<string>|Object<string, boolean>`,返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期,会作为第二个参数传入。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选日期(范围)的值,根据 [`multiple`](#props-multiple) 和 [`range`](#props-range) 属性值的不同,数据格式不同。
+++类型详情
| `multiple` | `range` | 类型 |
| -- | -- | -- |
| `false` | `false` | `Date` |
| `true` | `false` | `Array<Date>` |
| `false` | `true` | `[Date, Date]` |
| `true` | `true` | `Array<[Date, Date]>` |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 日历内,面板上方可供定制的区域。 |
| ``after`` | 日历内,面板下方可供定制的区域。 |
| ``date`` | [^slot-date] |
^^^slot-date
单日单元格内的区域,可用来定制每一天对应区域的内容。
默认内容:对应日期的 `date`。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `year` | `number` | 完整年份。 |
| `month` | `number` | 月份数,`0` 表示一月。 |
| `date` | `number` | 月份内的日期。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``selectstart`` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
| ``selectprogress`` | [^event-selectprogress] |
| ``viewchange`` | 面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`,表示当前年月(`month` 为 `0` 表示一月)。 |
^^^event-select
:::badges
`v-model`
:::
选择修改后触发,回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
^^^
^^^event-selectprogress
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 [`multiple`](#props-multiple) 属性的值。
+++参数详请
| `multiple` | 类型 |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``calendar.weekStart`` | `number` | `1` | 一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``backward`` | 上一年。 |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |
| ``forward`` | 下一年。 |
| ``expand`` | 展开下拉菜单。 |

View File

@@ -1,164 +0,0 @@
# Carousel <small>轮播</small>
## 示例
### 切换
使用 [`index`](#props-index) 来控制当前显示的项目。
[[ demo src="/demo/carousel/switch.vue" ]]
### 进度指示器
使用 [`indicator`](#props-indicator) 属性来指定进度指示器类型。
[[ demo src="/demo/carousel/indicator.vue" ]]
### 自动切换
指定 [`autoplay`](#props-autoplay) 属性来允许自动播放。
[[ demo src="/demo/carousel/autoplay.vue" ]]
### 切换效果
指定 [`effect`](#props-effect) 属性来设置切换效果。
[[ demo src="/demo/carousel/effect.vue" ]]
### 纵向布局
指定 [`vertical`](#props-vertical) 属性来允许纵向布局的轮播。
使用 [`controls-position`](#props-controls-position) 属性来切换按钮相对于布局方向的位置。
[[ demo src="/demo/carousel/vertical.vue" ]]
### 轮播项设置
[`slides-per-view`](#props-slides-per-view) 属性来指定同时显示多少个轮播项。
[`slides-per-group`](#props-slides-per-group) 属性来指定每次前后切换的一组包含多少个轮播项。
[[ demo src="/demo/carousel/slides.vue" ]]
### 轮播项纵横比
设置 [`slide-aspect-ratio`](#props-slide-aspect-ratio) 属性来指定每个轮播项的纵横比。
[[ demo src="/demo/carousel/ratio.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``indicator`` | `string=` | `'radio'` | [^indicator] |
| ``switch-trigger`` | `string=` | `'click'` | [^switch-trigger] |
| ``autoplay`` | `boolean=` | `false` | 是否自动轮播。 |
| ``pause-on-hover`` | `boolean=` | `false` | 在自动轮播时,鼠标悬浮后是否暂停。 |
| ``interval`` | `number=` | `3000` | 在自动轮播时,切换间隔的毫秒数。 |
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
| ``effect`` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果,其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
| ``vertical`` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
| ``indicator-align`` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
| ``indicator-position`` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
| ``controls`` | `boolean` | `false` | 是否显示切换按钮。 |
| ``controls-position`` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
| ``slide-aspect-ratio`` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
| ``slides-per-view`` | `number=` | `1` | 指定同时显示多少个轮播项。 |
| ``slides-per-group`` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
| ``lazy`` | `boolean= | { preload: number }` | `false` | [^lazy] |
^^^datasource
轮播图数据源,项目类型为:`{src, alt, label, type}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `src` | `string` | 媒体源地址。 |
| `alt` | `string` | 媒体的降级描述文本。 |
| `label` | `string` | 媒体的描述性标题。 |
| `type` | `string` | 媒体的描述性标题,视频需要指定 `video`。 |
+++
^^^
^^^index
:::badges
`.sync`
:::
当前轮播图序号。
^^^
^^^indicator
播放进度指示器的显示模式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `bar` | 单选按钮型,用于替换之前的 `radio``radio` 也保持兼容支持)。 |
| `number` | 显示「当前页数/全部页数」文字提示。 |
| `dot` | 圆点型。 |
| `none` | 不显示指示器。 |
^^^
^^^switch-trigger
当显示单选型指示器时,触发切换的操作。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `click` | 点击时切换。 |
| `hover` | 鼠标悬浮时切换。 |
+++
^^^
^^^lazy
指定是否懒加载轮播资源。
+++详情
| 名称 | 描述 |
| -- | -- | -- |
| `false` | 不懒加载资源。 |
| `true` | 预加载当前展示项目的前后 1 个资源。 |
| `{ preload: number }` | 预加载当前展示项目的前后指定数量个资源。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
^^^slot-item
可用来定制每个轮播项的区域。
默认内容:轮播项图片。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, label, index, ...}`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
切换后触发,回调参数为 `(to: number, from: number)`。分别表示切换后的序号和切换前的序号。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |

View File

@@ -1,314 +0,0 @@
# Cascader <small>级联器</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/cascader/size.vue" ]]
### 内联模式
使用 [`inline`](#props-inline) 属性来开启内联模式。
[[ demo src="/demo/cascader/inline.vue" ]]
### 搜索选项
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
[[ demo src="/demo/cascader/searchable.vue" ]]
### 多选
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
[[ demo src="/demo/cascader/multiple.vue" ]]
### 选择模式
使用 [`select-mode`](#props-select-mode) 属性来控制在单选模式下哪些项目可以被选中。
[[ demo src="/demo/cascader/select-mode.vue" ]]
### 子项展开时机
使用 [`column-trigger`](#props-column-trigger) 属性来控制下拉面板中下级的展开时机。
[[ demo src="/demo/cascader/column-trigger.vue" ]]
### 渲染选中值
使用 [`value-display`](#props-value-display) 属性来控制选中值如何展示。
[[ demo src="/demo/cascader/value-display.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | - | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
| ``inline`` | `boolean` | `false` | 下拉面板是否以内联模式展示(展开选项将拆分面板而非向外扩展)。 |
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
| ``placeholder`` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``column-trigger`` | `'hover' | 'click'` | `'click'` | [^column-trigger] |
| ``select-mode`` | `'leaf-only' | 'any'` | `'any'` | [^select-mode] |
| ``column-width`` | `number | string` | - | [^column-width] |
| ``show-select-all`` | `boolean` | `false` | 在多选模式下是否有全选按钮。 |
| ``value-display`` | `'complete' | 'simple'` | `'simple'` | [^value-display] |
| ``merge-checked`` | `string=` | `keep-all` | [^merge-checked] |
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。[`datasource`](#props-datasource) 节点中的非叶子节点若有部分子孙节点被选中,则为半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表,项目的类型为 `{label, value, options, disabled, position, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `position` | `string` | 下级节点如何展示,默认弹出,可以设置 `inline` 来内联显示。 |
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
已选值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
^^^column-trigger
下拉面板中下级的展开时机。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `hover` | 光标悬浮展开下一级。 |
| `click` | 点击展开下一级。 |
+++
^^^
^^^select-mode
在单选模式下控制哪些项目可以选中。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `leaf-only` | 只有叶子节点可以选中。 |
| `any` | 每一级都可以选中。 |
+++
^^^
^^^column-width
当下拉面板中有多列时,统一控制除了最后一列之外的列宽度。
当该值是数值或者能转换成数值时,会当成像素值。
^^^
^^^value-display
控制选中值如何展示。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `complete` | 完整展示选中值的路径,如“中国 > 上海”。 |
| `simple` | 仅仅展示选中值文本。 |
+++
^^^
^^^merge-checked
选中值的合并策略。当某个节点下的所有子节点都被选中时,可以选择只保留父节点、只保留子节点或都保留。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `keep-all` | 父子节点都会在选中值中。 |
| `upwards` | 尽可能往祖先方向合并选中值。 |
| `downwards` | 尽可能往后代方向合并选中值。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``trigger`` | [^slot-trigger] |
| ``pane`` | 下拉面板中的内容插槽。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``before`` | 选项列表前的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``column-before`` | [^slot-column-before] |
| ``column-after`` | 下拉面板中每列后的区域。无默认内容。作用域参数同 [`column-before`](#slots-column-before) 插槽。 |
| ``label`` | [^slot-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``selected`` | [^slot-selected] |
^^^slot-trigger
整个下拉触发区域。
默认内容:下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `*` | 已选项值。 |
| `selected` | `Object` | 已选项对象。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `keyword` | `string` | 搜索值。 |
| `select` | `function(option: Object): void` | 用于设置已选项。 |
| `toggle` | `function(force: boolean): void` | 用于切换下拉菜单展开状态。 |
| `clear` | `function(): void` | 用于清除已选项。 |
| `remove` | `function(option: Object): void` | 用于删除某个已选项,参数 `option` 是该已选项。 |
| `updateKeyword` | `function(keyword: string): void` | 用于修改搜索值。 |
+++
^^^
^^^slot-column-before
下拉面板中每列前的区域。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `option` | `Object` | 该列的父选项,其中 `options` 属性可以拿到当前列的数据。 |
+++
^^^
^^^slot-label
下拉按钮文本区域。
默认内容:已选项对应的 `label` 属性值或内联模式下已选项的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 已选项文本。 |
| `value` | `*` | 已选项值。 |
| `checked` | `boolean` | 是否已选择某个值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项(不带 `options` 的选项)的文本区域。
默认内容:选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `option` | `Object` | 当前选项。 |
| `select` | `function(option: Object): void` | 选中当前选项。 |
| `expand` | `function(option: Object): void` | 展开当前选项。 |
| `click` | `function(option: Object): void` | 点击当前选项内容区,会按情况选中和(或)展开当前选项。 |
+++
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容:`Option` 内的组件默认结构。
作用域参数同 [`option-label`](#slots-option-label) 插槽。
^^^
^^^slot-selected
选中值渲染区域。
默认内容:单选时渲染选中项目的文本;多选时将每个选中项目的标签渲染成`Tag`。
+++单选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `checked` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
+++多选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `Array<Object>` | 选中项数据的数组。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)``value` 为输入框的 `value` 值。 |
| ``select`` | [^event-select] |
| ``afteropen`` | 下拉打开后触发。 |
| ``afterclose`` | 下拉关闭后触发。 |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``cascader.placeholder`` | `string` | `@@cascader.placeholder` | 未选择时的占位内容。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开下拉。 |
| ``collapse`` | 收起下拉。 |
| ``clear`` | 清除。 |
| ``separator`` | 分隔符。 |

View File

@@ -1,124 +0,0 @@
# CheckButtonGroup <small>复选按钮组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/check-button-group/default.vue" ]]
### 简单样式
设置 [`ui`](#props-ui) 属性值:`simple` 来指定简单样式。
[[ demo src="/demo/check-button-group/simple.vue" ]]
### 单复选共存
可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/check-button-group/exclusive.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/check-button-group/desc.vue" ]]
### 最小宽度
通过设置 [`ui`](#props-ui) 属性值 `stable` 来开启项目的最小宽度。
[[ demo src="/demo/check-button-group/stable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `simple` | 简单样式。 |
| `stable` | 稳定样式。会给所有按钮添加一个最小宽度以使布局更加稳定,多行之间更容易对齐。 |
^^^
^^^items
复选按钮组数据源,项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。当选项为排它项时,选中该项将取消选中其它所有选项。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息,作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
按钮内文本区域。
默认内容:`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: Array)`。`value` 为当前按钮组已选项内 `value` 字段组成的数组。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``check`` | 已选标志。 |

View File

@@ -1,104 +0,0 @@
# CheckboxGroup <small>复选框组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/checkbox-group/default.vue" ]]
### 单复选共存
可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/checkbox-group/exclusive.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/checkbox-group/desc.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^items
复选框组数据源,项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息,作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
选项描述文本区域。
默认内容:`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: Array)`。`value` 为当前复选框组已选项内 `value` 字段组成的数组。
^^^

View File

@@ -1,83 +0,0 @@
# Checkbox <small>复选框</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/checkbox/size.vue" ]]
### 值设定
可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 属性 `v-model` 的值。
[[ demo src="/demo/checkbox/value.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean=` | `false` | [^checked] |
| ``value`` | `*` | - | 当 `v-model` 绑定到数组时,代表当前复选框的值。 |
| ``true-value`` | `*=` | `true` | 选中状态对应的值。 |
| ``false-value`` | `*=` | `false` | 未选状态对应的值。 |
| ``indeterminate`` | `boolean=` | `false` | 是否处于半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于选中状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 复选框的描述文本,点击时会切换选择状态。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外,`Checkbox` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``checked`` | 已选状态。 |
| ``indeterminate`` | 半选状态。 |

View File

@@ -1,97 +0,0 @@
# Collapse <small>折叠面板</small>
:::tip
`Collapse` 组件可以内联在 [`Accordion`](./accordion) 组件中使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/collapse/size.vue" ]]
### 样式变体
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
[[ demo src="/demo/collapse/variant.vue" ]]
### 展开图标的位置
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
[[ demo src="/demo/collapse/position.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``label`` | `string` | - | 折叠面板标题。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``name`` | `string | number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时,用来提供已展开面板的唯一标识。 |
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。其中 `simple` / `basic` / `strong` 只能选择一个,不设置则为默认的普通样式。`bordered` / `borderless` 只能选择一个。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `simple` | 简洁样式。 |
| `basic` | 白底样式。 |
| `strong` | 白底样式。 |
| `bordered` | 有外边框。 |
| `borderless` | 无外边框。 |
| `dull` | 标题区域是不否响应鼠标交互改变样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
折叠面板是否展开。
^^^
^^^toggle-position
设置展开图标的位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `start` | 展开图标位于开始位置,为默认位置。 |
| `end` | 展开图标位于结束位置。 |
| `none` | 无展开图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 折叠式面板内容区。 |
| ``title`` | 折叠式面板标题区。 |
| ``title-after`` | 折叠式面板标题后区域。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | 点击标题区触发展开/收起时触发。回调参数为 `(expanded: boolean)`。`expanded` 为面板是否展开。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 收起状态,点击后展开。 |
| ``collapse`` | 展开状态,点击后收起。 |

View File

@@ -1,131 +0,0 @@
# Column <small>表格列</small>
:::tip
`Column` 组件需要在 [`Table`](./table) 组件内使用。
:::
## 示例
见 [`Table` 示例](./table#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``title`` | `string` | - | 列标题。 |
| ``field`` | `string` | - | 列的键名,对应所属的 `Table` 组件 [`data`](./table#props-data) 属性数据项的某个字段。 |
| ``width`` | `string=|number=` | - | 列宽,值为像素值。 |
| ``sortable`` | `boolean=` | `false` | [^sortable] |
| ``align`` | `string=` | - | 内容对齐方式,支持 `left` / `center` / `right`。 |
| ``span`` | `function(number): Object=` | | [^span] |
| ``desc`` | `string` | - | 表头描述。 |
| ``fixed`` | `boolean | 'left' | 'right'` | `false` | 该列是否固定,`'left'` 表示固定在左侧,`'right'` 表示在右侧。 |
| ``filter-value`` | `*` | - | [^filter-value] |
| ``filter-multiple`` | `boolean=` | `false` | 内置筛选是否为多选。 |
| ``filter-options`` | `Array<Object>` | - | 筛选选项列表,项目的类型为 `{label, value, options, disabled, ...}`,可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
| ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时,`item` 参数为整个 data 数据项,返回的字符串将作为提示内容展示。 |
^^^sortable
本列是否支持排序。
:::warning
组件本身不会处理排序逻辑,仅会在排序按钮被点击时在 `Table` 上抛出 [`sort`](./table#events-sort) 事件,使用者需要自行处理排序逻辑。
:::
^^^
^^^span
单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 [`data`](./table#props-data) 属性中的索引。返回值的 `row` / `col` 字段对应于单元格的 `rowspan` / `colspan`,默认值均为 `1`。
:::tip
可以参考 `Table` 组件中的[示例 选择模式与排序](./table#选择模式与排序)来了解如何使用。
:::
^^^
^^^filter-value
:::badges
`.sync`
:::
筛选条件取值,值为 `null` 表示未经过筛选。当 `filter-multiple` 为 `true` 时,值为已选项值的数组。
^^^
^^^allowed-orders
指定该列的排序范围。用户点击时将按设定的顺序进行切换。
+++值范围
| 值 | 描述 |
| -- | -- |
| `false` | 不排序。 |
| `'asc'` | 升序。 |
| `'desc'` | 降序。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``head`` | 列头区域。 |
| ``foot`` | [^slot-foot] |
| ``default`` | [^slot-default] |
| ``sub-row`` | [^slot-sub-row] |
| ``desc`` | [^slot-desc] |
| ``filter`` | [^slot-filter] |
^^^slot-foot
列脚区域。
:::warning
如果所属的 `Table` 组件定义了 [`foot`](./table#slots-foot) 插槽,单独的列脚配置将被覆盖。
:::
^^^
^^^slot-default
单元格的内容。
默认内容:表格 `data` 数据项中与 [`field`](#props-field) 属性对应的字段值。
作用域参数为 `data` 内当前行数据中的所有字段。
^^^
^^^slot-sub-row
展开行后子行的内容。使用此插槽时,内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组,展开的子行数与 `children` 内数据项数相同,使用相同的列配置。
默认内容:表格 `data[i].children[j]` 数据项中与 [`field`](#props-field) 属性对应的字段值。
作用域参数当前子行数据中的所有字段,以及当前主行对应索引值 `index`。
:::warning
如果所属的 `Table` 组件定义了 [`sub-row`](./table#slots-sub-row) 插槽,单独列的 `sub-row` 插槽将被覆盖。
:::
^^^
^^^slot-desc
表头描述。使用此插槽时会覆盖 `Column` 的 [`desc`](#props-desc) 属性。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(): void` | 关闭展现描述内容的容器。 |
+++
^^^
^^^slot-filter
筛选浮层的内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(): void` | 关闭筛选浮层。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``filterchange`` | 修改该列过滤器时触发。回调参数为 `(value)`。`value` 为过滤器的当前值。 |

View File

@@ -1,22 +0,0 @@
# ConfigProvider <small>配置器</small>
## 示例
### 配置占位符
[[ demo src="/demo/config-provider/select.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``value`` | `Object` | - | 向其后代组件提供的配置值。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 需要接收配置的内容,其中 VEUI 的组件会响应对应的配置值。 |

View File

@@ -1,48 +0,0 @@
# ConfirmBox <small>确认弹框</small>
## 示例
自定义标题和内容区。
[[ demo src="/demo/confirm-box/custom.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``open`` | `boolean` | `false` | [^open] |
| ``title`` | `string=` | - | 标题。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示确认弹框。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | 底部区域,默认会展示“确定”、“取消”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |

View File

@@ -0,0 +1,28 @@
# 组件名称
## 示例
### 默认栅格
[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
### 定宽栅格
[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``width`` | `number` | `100` | 宽 |
| ``height`` | `number` | `100` | 高 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容 |

View File

@@ -1,15 +0,0 @@
# Content <small>布局内容</small>
:::tip
`Content` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Sidebar`](./sidebar) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容。 |

View File

@@ -1,246 +0,0 @@
# DatePicker <small>日期选择</small>
## 示例
### 单日选择
默认情况下,在下拉浮层中单击日期可以选中一个日期。可以配置 [`clearable`](#props-clearable) 属性来允许清除已选值,用 [`placeholder`](#props-placeholder) 属性来配置未选择时的占位文本。
[[ demo src="/demo/date-picker/default.vue" ]]
### 日期范围选择
配置 [`range`](#props-range) 属性时,可以在下拉浮层中选择一个日期范围。
[[ demo src="/demo/date-picker/range.vue" ]]
### 设置快捷选项
选择日期范围时,可以通过配置 [`shortcuts`](#props-shortcuts) 属性来提供快捷选项。
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
### 禁用和只读
设置 [`disabled`](#props-disabled) 属性可使组件处于禁用状态。
设置 [`readonly`](#props-readonly) 属性可使组件处于只读状态。
[[ demo src="/demo/date-picker/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string` | `'date'` | 日历的类型,可用值为 `'date'` / `'month'` / `'year'`,分别对应日期/月/年视图。 |
| ``range`` | `boolean` | `false` | 是否选择日期范围。 |
| ``selected`` | `Date | Array` | - | [^selected] |
| ``today`` | `Date` | `new Date()` | 「今天」的日期。 |
| ``week-start`` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#configs-calendar-weekStart)。 |
| ``fill-month`` | `boolean` | `true` | 当只有一个面板时,是否要在当前月份面板显示非本月日期。 |
| ``date-class`` | `string | Array | Object | function` | `{}` | 特定日期的自定义 HTML `class`。传非函数时,数据格式为所有 Vue 支持的 `class` 表达式;传函数时,签名为 `function(Date): string | Array<string>|Object<string, boolean>`,返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期,会作为第二个参数传入。 |
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
| ``placeholder`` | `string` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | 未选择时的占位文本。可分别对[日期范围](#configs-datepicker-rangePlaceholder)与[单个日期](#configs-datepicker-placeholder)进行全局配置。 |
| ``format`` | `string | function(Date): string=` | `'yyyy-MM-dd'` / `'yyyy-MM'` / `'yyyy'` | 使用字符串时,表示用于格式化/解析的字符串表达式,具体格式可以参见 [date-fns 的文档](https://date-fns.org/v2.12.0/docs/format)。传入函数可自定义格式化逻辑。 |
| ``parse`` | `function(string): Date=` | - | 自定义将输入字符串解析为 `Date` 对象的函数。 |
| ``shortcuts`` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选日期(范围)的值,根据 [`range`](#props-range) 属性值的不同,数据格式不同。
+++类型详情
| `range` | 类型 |
| -- | -- |
| `false` | `Date` |
| `true` | `[Date, Date]` |
+++
^^^
^^^shortcuts
在选择范围时,可以定制的浮层中的快捷选择项列表,格式为 `Array<{label, from, to}>`。可进行[全局配置](#configs-datepicker-shortcuts)。
+++字段详情
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>label</code></td>
<td><code>string</code></td>
<td>快捷选项的文本。</td>
</tr>
<tr>
<td><code>from</code></td>
<td colspan="2">开始时间计算方式,见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
</tr>
<tr>
<td><code>to</code></td>
<td colspan="2">结束时间计算方式,见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
</tr>
</tbody>
</table>
+++
^^^
#### 快捷选项偏移量数据格式
`shortcuts` 列表项中的 `from` 及 `to` 字段格式相同,分别用来设置开始结束日期的计算方式。格式为 `number | Object`,默认值为 `0`。
* 类型为 `number` 时,表示以「今天」为基准,偏移指定天数,比如 `-1` 等价于 `{ startOf: 'day', days: -1 }`,即「昨天」;
* 类型为 `Object` 时,支持的格式为:`{startOf: string=, days: number=, weeks: number=, months: number=, }`。
+++字段详情
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `startOf` | `string=` | `'day'` | 起始日期基准,支持的值有 `'day'` / `'week'` / `'month'` / `'quarter'` / `'year'`。 |
| `day` | `number=` | - | 偏移的天数。 |
| `week` | `number=` | - | 偏移的周数。 |
| `month` | `number=` | - | 偏移的月数。 |
| `quarter` | `number=` | - | 偏移的季度数。 |
| `year` | `number=` | - | 偏移的年数。 |
计算方式是先根据 `startOf` 设置基准,然后根据其它字段进行偏移量的叠加。
可以根据下面的例子,结合 `label` 理解计算方式。掌握以后,就可以非常快速地对快捷选项进行设置了。
```js
[
{
label: '上个月',
// 本月第一天往前算一个月,即上月第一天
from: {
startOf: 'month',
month: -1
},
// 本月第一天往前算一天,即上月最后一天
to: {
startOf: 'month',
days: -1
}
},
{
label: '本月',
// 本月第一天
from: {
startOf: 'month'
},
// 今天
to: 0
},
{
label: '本周',
// 本周第一天days 为 0 是可以省略的
from: {
startOf: 'week',
days: 0
},
// 今天
to: 0
},
{
label: '最近7天',
// 往前算 6 天
from: -6,
// 到今天
to: 0
},
{
label: '今天',
to: 0
}
]
```
^^^expanded
:::badges
`.sync`
:::
下拉浮层是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``date`` | [^slot-date] |
^^^slot-date
浮层中日历的单日单元格内的区域,可用来定制每一天对应区域的内容。
默认内容:对应日期的 `date`。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `year` | `number` | 完整年份。 |
| `month` | `number` | 月份数,`0` 表示一月。 |
| `date` | `number` | 月份内的日期。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``selectstart`` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
| ``selectprogress`` | [^event-selectprogress] |
| ``toggle`` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
^^^event-select
:::badges
`v-model`
:::
选择修改后触发,回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
^^^
^^^event-selectprogress
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 [`multiple`](#props-multiple) 属性的值。
+++参数详请
| `multiple` | 类型 |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datepicker.shortcuts`` | `Array` | `[]` | 快捷选项配置。 |
| ``datepicker.placeholder`` | `string` | `@@datepicker.selectDate` | 选择单日时,未选择状态的占位文本。 |
| ``datepicker.monthPlaceholder`` | `string` | `@@datepicker.selectMonth` | 选择月份时,未选择状态的占位文本。 |
| ``datepicker.yearPlaceholder`` | `string` | `@@datepicker.selectYear` | 选择年时,未选择状态的占位文本。 |
| ``datepicker.rangePlaceholder`` | `string` | `@@datepicker.selectRange` | 选择日期范围时,未选择状态的占位文本。 |
| ``datepicker.monthRangePlaceholder`` | `string` | `@@datepicker.selectMonthRange` | 选择月份范围时,未选择状态的占位文本。 |
| ``datepicker.yearRangePlaceholder`` | `string` | `@@datepicker.selectYearRange` | 选择年份范围时,未选择状态的占位文本。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``calendar`` | 日历。 |
| ``clear`` | 清除内容。 |

View File

@@ -1,145 +0,0 @@
# Dialog <small>对话框</small>
## 示例
### 尺寸与全屏
可选的 [`ui`](#props-ui) 属性值:`s` / `m` / `narrow` / `medium` / `wide` / `auto`
[[ demo src="/demo/dialog/size.vue" ]]
### 模态与非模态
[[ demo src="/demo/dialog/modal.vue" ]]
### 自定义内容
[[ demo src="/demo/dialog/custom.vue" ]]
### 异步支持
[[ demo src="/demo/dialog/async.vue" ]]
### 可拖拽
[[ demo src="/demo/dialog/draggable.vue" ]]
### 层叠顺序
[[ demo src="/demo/dialog/stack.vue" ]]
### 加载与禁用态
[[ demo src="/demo/dialog/status.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``modal`` | `boolean=` | `true` | 是否是模态对话框。模态对话框默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
| ``title`` | `string=` | - | 对话框标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``outside-closable`` | `boolean=` | `false` | 点击对话框外部时是否关闭对话框。 |
| ``draggable`` | `boolean=` | `false` | 是否可拖拽。 |
| ``escapable`` | `boolean=` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭对话框。仅在 `closable` 为 `true` 时生效。 |
| ``inline`` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``priority`` | `number=` | - | 对话框浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| ``overlay-class`` | `string | Object=` | - | 对话框浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸(内容及部件尺寸,非对话框整体空间大小)。 |
| `m` | 中内容尺寸(内容及部件尺寸,非对话框整体空间大小)。 |
| `narrow` | 窄尺寸样式。 |
| `medium` | 中尺寸样式。 |
| `wide` | 宽尺寸样式。 |
| `fullscreen` | 全屏尺寸样式。 |
| `auto` | 自适应尺寸样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示对话框。
^^^
^^^before-close
在将触发对话框关闭的操作发生后执行,类型为 `function(type: string): boolean=|Promise<boolean=>`。`type` 为触发关闭的类型,默认情况下可选值为 `'ok'|'cancel'`。返回值可以是一个 `boolean`,也可以是一个 resolve `boolean` 的 `Promise`,用来处理可能需要异步决定对话框关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭对话框。
+++调用示例
```html
<veui-dialog :open.sync="dialogOpen" :before-close="submit">...</veui-dialog>
```
```js
methods: {
submit (type) {
if (type === 'ok') {
return axios.post('/item/create', {/* ... */})
.then(({ id, error }) => {
if (error) {
this.showError(error)
return false // resolve `false` 将阻止对话框关闭
}
})
}
// resolve 但不返回 `false` 时会关闭对话框
},
// ...
}
```
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域,默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发对话框关闭的回调函数。`type` 为关闭的类型,将作为参数传入 `before-close` 钩子函数作为参数,同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭对话框时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afteropen`` | 对话框打开后触发。对话框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 对话框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``close`` | 关闭。 |

View File

@@ -1,103 +0,0 @@
# Drawer <small>抽屉</small>
## 示例
### 位置
使用 [`placement`](#props-placement) 属性控制抽屉弹出的位置。
[[ demo src="/demo/drawer/placement.vue" ]]
### 模态与非模态
使用 [`modal`](#props-modal) 属性控制抽屉是否为模态类型。
[[ demo src="/demo/drawer/modal.vue" ]]
### 自定义内容
[[ demo src="/demo/drawer/custom.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``placement`` | `string` | `'right'` | [^placement] |
| ``modal`` | `boolean` | `true` | 是否是模态抽屉。模态抽屉默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
| ``title`` | `string` | - | 抽屉标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean` | `true` | 是否显示关闭按钮。 |
| ``outside-closable`` | `boolean` | `false` | 点击抽屉外部时是否关闭抽屉。 |
| ``escapable`` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
| ``priority`` | `number=` | - | 抽屉浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``footless`` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Object` | - | 抽屉浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸(内容及部件尺寸,非抽屉整体空间大小)。 |
| `m` | 中内容尺寸(内容及部件尺寸,非抽屉整体空间大小)。 |
+++
^^^
^^^placement
抽屉位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `top` | 从上面滑出。 |
| `right` | 从右面滑出。 |
| `bottom` | 从下面滑出。 |
| `left` | 从左面滑出。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示抽屉。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域,默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发抽屉关闭的回调函数。`type` 为关闭的类型,将作为参数传入 `before-close` 钩子函数作为参数,同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭抽屉时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afteropen`` | 抽屉打开后触发。抽屉内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 抽屉关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |

View File

@@ -1,207 +0,0 @@
# Dropdown <small>下拉菜单</small>
:::tip
`Dropdown` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
:::
## 示例
### 样式
可选的样式 [`ui`](#props-ui) 属性值: `primary` / `text`
[[ demo src="/demo/dropdown/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/dropdown/size.vue" ]]
### 内联选项
`Dropdown` 组件内支持内联使用 `OptionGroup``Option` 组件来代替 [`options`](#props-options) 属性。
[[ demo src="/demo/dropdown/inline.vue" ]]
### 含搜索的下拉框菜单
使用 [`searchable`](#props-searchable) 属性使组件支持搜索并高亮显示符合条件的选项。
[[ demo src="/demo/dropdown/searchable.vue" ]]
### 禁用状态的下拉框菜单
使用数据源中的 [`disabled`](#props-disabled) 属性来禁用下拉项。
[[ demo src="/demo/dropdown/disable.vue" ]]
### 下拉触发时机与分离按钮
使用 [`trigger`](#props-trigger) 属性指定展开下拉菜单的时机,使用 [`split`](#props-split) 属性来使命令按钮与下拉按钮分离。
[[ demo src="/demo/dropdown/other.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>=` | `[]` | [^options] |
| ``label`` | `string` | - | 下拉按钮的描述文本。 |
| ``trigger`` | `string=` | `'click'` | 触发下拉框展开的时机,可选值为 `'click'` / `'hover'`。 |
| ``split`` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``searchable`` | `boolean=` | `false` | 是否可搜索。 |
| ``placeholder`` | `string=` | - | 搜索框的输入占位符。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `primary` | 主题色样式。 |
| `text` | 文字样式。 |
| `xs` | 特小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中等尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表,项目的类型为 `{label, value, options, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
| ``no-data`` | 用于定义当搜索无数据时要展现的内容。 |
^^^slot-label
下拉按钮文本区域。
默认内容:`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | `label` 属性对应文本。 |
+++
^^^
^^^slot-group-label
下拉选项组(带 `options` 的选项)的标题文本区域。
默认内容:选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项(不带 `options` 的选项)的文本区域。
默认内容:选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容:`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-trigger
整个下拉触发区域。
默认内容:下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*` / `disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
| `handlers` | `Object` | [^handlers-desc] |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^
^^^handlers-desc
需要绑定到触发元素上的事件监听器,可以使用 `v-on="handlers"` 统一进行输出。
:::tip
用于绑定 `handlers` 的元素需要支持获取焦点,以使各种键盘交互依然可以正常触发。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 点击选项后触发,回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 [`split`](#props-split) 属性为 `true` 时,直接点击指令按钮部分也会触发,但不会携带 `value` 参数。 |
| ``toggle`` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开浮层。 |
| ``collapse`` | 收起浮层。 |

View File

@@ -1,72 +0,0 @@
# Embedded <small>嵌入式面板</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`
[[ demo src="/demo/embedded/size.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``title`` | `string=` | - | 折叠式面板标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``priority`` | `number=` | - | 折叠式面板浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Object=` | - | 折叠式面板浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸。 |
| `m` | 中内容尺寸。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示折叠式面板。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域,默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发折叠式面板关闭的回调函数。`type` 为关闭的类型,将作为参数传入 `before-close` 钩子函数作为参数,同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭折叠式面板时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |

View File

@@ -1,165 +0,0 @@
# Field <small>表单项</small>
:::tip
`Field` 组件需要配合 [`Form`](./form) 及 [`Fieldset`](./fieldset) 组件使用。一个 `Field` 对应一个输入组件。
:::
## 示例
见 [`Form` 示例](./form#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``label`` | `string` | - | 表单项描述。 |
| ``tip`` | `string` | - | 表单项提示。 |
| ``name`` | `string` | - | 表单项名称,可用于指定数据字段名或展示错误消息的定位。 |
| ``field`` | `string` | - | [^field] |
| ``rules`` | `string | Array<Object>` | - | [^rules] |
| ``help`` | `string` | - | 表单项辅助文案。 |
| ``help-position`` | `'bottom' | 'side'` | `'side'` | [^help-position] |
| ``abstract`` | `boolean=` | `false` | 抽象表单项,抽象的项目没有标题,也不会展示校验信息。 |
| ``withhold-validity`` | `boolean=` | `false` | 当设置为 `true` 时,该表单项内容中的输入组件(如 `veui-input` )不会自动绑定校验事件,也不会自动进入 `invalid` 状态,使用方可以通过 `default` 插槽来自行定制。 |
| ``validity-display`` | `'normal' | 'simple'` | `'simple'` | [^validity-display] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^message
出错信息,可以覆盖规则默认出错信息。
若类型为 `string`,可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如:
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message: '字符长度不能短于 {ruleValue},当前长度 {value}',
priority: 100
}
```
若类型为 `function`,参数为 `(ruleValue: ?*=, value: *)`。例如:
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message (ruleValue, value) {
return `字符长度不能短于${ruleValue},当前长度${value}`
},
priority: 100
}
```
:::tip
如果需要支持多语言,`message` 必须使用 `function` 类型。
:::
^^^
^^^rules
表单项校验规则,同步的单值校验。对于 `Array` 类型,项目的类型为 `{triggers, name, message, value, priority}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `triggers` | `string` | 触发校验的事件名称集合,逗号分隔。 |
| `name` | `string` | 规则名称。 |
| `value` | `*` | 规则要匹配的值。`boolean` 类型的规则,默认为 `true`。 |
| `message` | `string | function` | [^message] |
| `priority` | `number` | 规则优先级,可以覆盖规则默认优先级。 |
+++
+++内置规则
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `required` | `boolean` | 值不能为空值(`null` / `undefined` / `''` / `[]`)。 |
| `numeric` | `boolean` | 值必须可描述十进制数值。(`6` / `66.6` / `6e6` / `'6'` / `.6`) |
| `pattern` | `RegExp | string` | 正则匹配。 |
| `maxLength` | `number` | 值的 `length` 属性不能大于限定值。 |
| `minLength` | `number` | 值的 `length` 属性不能小于限定值。 |
| `max` | `number` | 值不能大于限定值。 |
| `min` | `number` | 值不能小于限定值。 |
+++
:::warning
对于 `string` 类型,格式为 `rule1,rule2,...`,仅支持 `value` 类型为 `boolean` 的规则。
优先级会影响最后展示的出错信息,出错信息栈内会保留所有规则的错误提示,但仅展现优先级最高的那一个。
自定义 `rule` 请参考[高级 自定义校验规则](../advanced/custom-rules)。
:::
^^^
^^^field
非必须,默认取 [`name`](#props-name) 属性值。在特殊情况下,用于指定表单 [`data`](./form#props-data) 属性对应字段的路径。
+++格式示例
| 值 | 描述 |
| -- | -- |
| `username` | 对应表单 [`data`](./form#props-data) 属性引用值的 `username` 属性,等价于 `data.username`。 |
| `users[0]` | 等价于 `data.users[0]`。 |
| `user.username` | 等价于 `data.user.username`。 |
+++
^^^
^^^help-position
表单项辅助文案的展示位置。
+++辅助文案位置
| 值 | 描述 |
| -- | -- |
| `side` | 辅助文案展示在表单项内的侧边。 |
| `bottom` | 辅助文案展示在表单项内的下方,在校验信息之前。 |
+++
^^^
^^^validity-display
表单项的校验信息是否展示图标。
+++详情说明
| 值 | 描述 |
| -- | -- |
| `normal` | 校验信息展示图标。 |
| `simple` | 校验信息不展示图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于内联输入组件。作用域参数为 `(listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)`,其中 `invalid` 是当前表单项是否校验出错误,`listeners` 是校验时机的事件绑定,`validities` 是校验信息。 |
| ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
| ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
| ``help`` | 表单项辅助文本内容。默认为 [`help`](#props-help) 属性的文本值。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``alert`` | 警示图标。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``field.validityDisplay`` | `'normal' | 'simple'` | `'simple'` | 见 [`validity-display`](#props-validity-display) 属性。 |

View File

@@ -1,30 +0,0 @@
# Fieldset <small>表单项集合</small>
:::tip
`Fieldset` 组件需要配合 [`Form`](./form) 及 [`Field`](./field) 组件使用。一个 `Fieldset` 可以包含多个 `Field`
:::
## 示例
见 [`Form` 示例](./form#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``label`` | `string` | - | 表单项集合描述。 |
| ``tip`` | `string` | - | 表单项集合提示。 |
| ``name`` | `string` | - | 表单项集合名称,用于展示错误消息的定位。 |
| ``required`` | `boolean` | - | 是否显示必要性星号提示。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于内联 `Field` 组件。无默认内容。 |
| ``label`` | 填充表单项集合描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
| ``tip`` | 填充表单项集合提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |

View File

@@ -1,59 +0,0 @@
# FilterPanel <small>过滤面板</small>
## 示例
[[ demo src="/demo/filter-panel/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | 数据源,项目类型为 `{label: string, ...}`。 |
| ``searchable`` | `boolean=` | `true` | 是否允许搜索。 |
| ``filter`` | `function=` | 见描述 | [^filter] |
| ``search-on-input`` | `boolean=` | `true` | 是否在输入的时候触发搜索。 |
| ``placeholder`` | `string=` | - | 搜索框的占位符。 |
| ``title`` | `string=` | - | 过滤面板的标题。 |
^^^filter
搜索过滤函数,签名为 `function(keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `keyword` | `string` | 搜索关键词。 |
| `item` | `Object` | 当前遍历到的数据节点。 |
| `index` | `number` | 当前数据节点在兄弟节点中的索引。 |
| `datasource` | `Array<{label: string, ...}>` | 与 [`datasource`](#props-datasource) 属性一致。 |
+++
+++默认值
```js
import { includes } from 'lodash'
function (keyword, { label }) {
return includes(label, keyword)
}
```
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``head`` | 标题区域。默认显示 [`title`](#props-title) 属性值。 |
| ``no-data`` | `datasource` 中没数据时显示的内容。 |
| ``default`` | [^default] |
^^^default
主内容区域。
+++参数属性
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `items` | `Array<Object>` | `datasource` 经过过滤后的数据,类型与 `datasource` 保持一致。 |
+++
^^^

View File

@@ -1,22 +0,0 @@
# Footer <small>布局底部</small>
:::tip
`Footer` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Sidebar`](./sidebar) / [`Content`](./content) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局底部的内容。 |

View File

@@ -1,194 +0,0 @@
# Form <small>表单</small>
:::tip
`Form` 组件需要配合 [`Fieldset`](./fieldset) 及 [`Field`](./field) 组件使用。
:::
## 示例
### 基础样式
使用 [`actions`](#slots-actions) 插槽来提供表单操作按钮。
[[ demo src="/demo/form/normal.vue" ]]
### 只读状态
设置 [`readonly`](#slots-readonly) 来使内部表单项处于只读状态。
[[ demo src="/demo/form/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#slots-disabled) 来使内部表单项处于禁用状态。
[[ demo src="/demo/form/disabled.vue" ]]
### 提示与辅助文本
[[ demo src="/demo/form/help.vue" ]]
### 校验
[[ demo src="/demo/form/validate.vue" ]]
### 抽象表单项
[[ demo src="/demo/form/abstract.vue" ]]
### 原生输入框与表单项整合
[[ demo src="/demo/form/withhold.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``data`` | `Object` | - | [^data] |
| ``validators`` | `Array<Object>=` | - | [^validators] |
| ``before-validate`` | `function=` | - | 表单进入提交流程后,进行校验之前的 hook传入参数为 `(data)``data` 为表单 [`data`](#props-data) 属性值的副本。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
| ``after-validate`` | `function=` | - | 表单校验成功后,触发 [`submit`](#events-submit) 事件之前的 hook传入参数为 `(data)`,与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
^^^data
表单绑定的数据,和表单中的输入组件通过 `v-model` 绑定,也是表单校验时的数据源。
:::warning
[`Field`](./field) 如果处于 `disabled` 状态,提交流程中处理 `data` 副本时其对应的数据键值对会被过滤,校验时同理。
:::
^^^
^^^validators
表单联合校验、异步校验器。项目类型为 `{fields, validate, triggers}`。
+++属性详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
| `validate` | `function` | 自定义校验函数,传入参数为 `(data[fields[0]], data[fields[1]], ...)``data` 为表单 [`data`](#props-data) 属性值的引用。返回 `undefined` / `true` 代表校验成功,返回 `{[field]: message, ...}` 表示校验失败信息,详见[表单 表单校验逻辑](#表单校验逻辑)。 |
| `triggers` | `string | Array<string>` | 事件名称集合。 |
+++
+++规则详情
| `fields` | `triggers` | 绑定事件情况 |
| -- | -- | -- |
| `['a']` | `['change', 'blur,input,xxx', 'submit']` | a(change) |
| `['a','b','c']` | `['change', 'blur,input,xxx', 'submit']` | a(change), b(blur,input,xxx), c(submit) |
| `['a','b','c']` | `'blur'` | a(blur), b(submit), c(submit) |
| `['a','b','c']` | `'blur,input'` | a(blur,input), b(blur,input), c(blur,input) |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``actions`` | 表单操作内容,如“提交”、“取消”按钮等。无默认内容。作用域参数与 [`default`](#slots-default) 插槽相同。 |
^^^slot-default
可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `submit` | `() => void` | 触发表单提交。 |
| `validating` | `boolean` | 是否正在执行表单校验。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``submit`` | [^event-submit] |
| ``invalid`` | [^event-invalid] |
^^^event-submit
在原生 `submit` 事件之后触发,回调参数为 `(data, event)`。具体提交流程请参考[表单 表单提交流程](#表单提交流程)。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `data` | `Object` | 表单 [`data`](#props-data) 属性值的引用。 |
| `event` | `Event` | 原生事件对象。 |
+++
^^^
^^^event-invalid
`beforeValidate`、`validate`、`afterValidate` 流程中某一项返回中断时触发,回调参数为流程 function 的返回值,参数为 `(result)`,表示流程中断的信息,具体返回值类型由流程返回决定。具体提交流程请参考[表单 表单提交流程](#表单提交流程)`validate` 逻辑见[表单 表单校验逻辑](#表单校验逻辑)。
^^^
### 表单提交流程
<img class="preview hero" src="/images/development/form/flow.png">
:::warning
`beforeValidate` 和 `afterValidate` 以及 [`submit`](#events-submit) 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性,`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
:::
### 表单校验逻辑
表单校验内部分为 `Field` 的 `rule` 校验和 `validators` 的校验。
1. `Field` 的 `rule` 是单值、同步校验。详见[表单项](./field)。
2. `validators` 可以是多值、异步的校验。
+++validators 示例
```js
validators: [
{
fields: ['start', 'end'],
validate (start, end) {
if (start == null || end == null) {
return true
}
if (parseInt(start, 10) >= parseInt(end, 10)) {
return {
start: '下限必须小于上限'
}
}
return true
},
triggers: ['change', 'submit,input']
},
{
fields: ['phone'],
validate (phone) {
return new Promise(function (resolve) {
setTimeout(function () {
let res
if (phone === '18888888888') {
res = {
phone: '该手机已被注册'
}
}
return resolve(res)
}, 3000)
})
},
triggers: ['input']
}
]
```
+++
#### `Field` 的 `rule` 和 `validators` 的优先级
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验,`validators` 的校验结果优先级大于 `Field` 的 `rule`,不同操作触发的校验,展现最后一个结果。`Field` 的 `rule` 内部的优先级,请参考其 [`rules`](./field#props-rules) 属性。
#### 交互过程的校验
<img class="preview hero" src="/images/development/form/interaction.png">
#### 提交过程的校验
<img class="preview hero" src="/images/development/form/submit.png">
提交时,其中一个过程的校验失败不会导致整个校验终止,校验信息将在两个过程执行完毕后进行整合,并传递到 [`invalid`](#events-invalid) 事件中去。

View File

@@ -1,26 +0,0 @@
# GridColumn <small>栅格栏</small>
:::tip
`GridColumn` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridRow`](./grid-row) 组件使用。
:::
## 示例
见 [`GridContainer` 示例](./grid-container#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``span`` | `number` | - | 栅格栏横跨的列数,不传则默认占满整行。 |
| ``offset`` | `number=` | `0` | 偏移列数,将影响后续栅格栏的位置。 |
| ``pull`` | `number=` | `0` | 栅格栏向左偏移列数,不影响其它栅格栏的位置。不能与 `push` 同时使用。 |
| ``push`` | `number=` | `0` | 栅格栏向右偏移列数,不影响其它栅格栏的位置。不能与 `pull` 同时使用。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 栅格栏内容。 |

View File

@@ -1,48 +0,0 @@
# GridContainer <small>栅格容器</small>
:::tip
`GridContainer` 组件需要配合 [`GridRow`](./grid-row) 及 [`GridColumn`](./grid-column) 组件使用。
:::
## 示例
### 默认栅格
[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
### 定宽栅格
[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``columns`` | `number=` | `gridcontainer.columns` | 栅格列数。 |
| ``margin`` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
| ``gutter`` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
| ``width`` | `number=` | - | 当需要创建定宽布局时,用来传入容器宽度 `px` 数值。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容,直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``gridcontainer.columns`` | `number` | `12` | 栅格列数。 |
| ``gridcontainer.gutter`` | `number` | `30` | 栅格列间距 `px` 数值。 |
| ``gridcontainer.margin`` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
#### `veui-theme-dls` 中的默认配置
| 配置项 | 类型 | 默认值 |
| -- | -- | -- | -- |
| `gridcontainer.columns` | `number` | `24` |
| `gridcontainer.gutter` | `number` | `20` |
| `gridcontainer.margin` | `number` | `20` |

View File

@@ -1,17 +0,0 @@
# GridRow <small>栅格行</small>
:::tip
`GridRow` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridColumn`](./grid-column) 组件使用。
:::
## 示例
见 [`GridContainer` 示例](./grid-container#示例)。
## API
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 栅格行内容,直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |

View File

@@ -1,22 +0,0 @@
# Header <small>布局头部</small>
:::tip
`Header` 组件需要配合 [`Layout`](./layout) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局头部的内容。 |

View File

@@ -1,25 +0,0 @@
# Icon <small>图标</small>
:::tip
VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 的方式注册并通过字符串类型的 [`name`](#props-name) 属性指定图标;也支持直接传入组件定义进行渲染。
:::
## 示例
[[ demo src="/demo/icon/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``name`` | `string | Object` | - | 图标名称或其组件定义。 |
| ``label`` | `string` | - | 图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。 |
| ``spin`` | `boolean` | `false` | 是否保持旋转状态。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用来实现图标堆叠,当内部有 `Icon` 子组件时会层叠在一起居中显示,且外部 `Icon` 组件不需要设置 [`name`](#props-name) 属性。 |

View File

@@ -1,21 +0,0 @@
# InputGroup <small>输入组件组</small>
:::tip
`Input` 组件需要内联 [`Input`](./input)、[`NumberInput`](./number-input)、[`Autocomplete`](autocomplete)、[`SearchBox`](./search-box)、[`Select`](./select)、[`DatePicker`](./date-picker)、[`TimePicker`](./time-picker)、[`Dropdown`](./dropdown)、[`Button`](./button)、[`ButtonGroup`](./button-group)、[`Label`](./label)、[`Span`](./span) 等组件配合使用。
:::
## 示例
### 任意组合
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/input-group/default.vue" ]]
## API
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区,用来内联输入组件。 |

View File

@@ -1,149 +0,0 @@
# Input <small>输入</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/input/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使输入框处于只读状态。
[[ demo src="/demo/input/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使输入框处于禁用状态。
[[ demo src="/demo/input/disabled.vue" ]]
### 感知输入法
设置 [`composition`](#props-composition) 来感知输入法输入过程中的值。
[[ demo src="/demo/input/composition.vue" ]]
### 过滤首尾空白字符
设置 [`trim`](#props-trim) 来自动过滤用户输入的首尾空白字符。
[[ demo src="/demo/input/trim.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | 输入框是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 输入框是否为只读状态。 |
| ``type`` | `string=` | `'text'` | [^type] |
| ``placeholder`` | `string=` | - | 输入占位符。 |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | - | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
输入框的值。
^^^
^^^type
输入类型。参见原生 `<input>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-type)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `text` | 文本输入框。 |
| `password` | 密码输入框。 |
| `hidden` | 隐藏的输入框,但是值允许提交。 |
+++
^^^
^^^trim
是否移除前后空格。当为 `true` 时,会移除前后空格,当为 `false` 时,不移除前后空格。设置为字符串时,按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 输入框内前置内容。 |
| ``after`` | 输入框内后置内容。 |
| ``placeholder`` | 未输入时的占位内容。 |
:::warning
注意,插槽宽度会挤压输入框宽度。
:::
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
| ``clear`` | 点击清除按钮时触发。 |
^^^event-change
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发,受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)``value` 为输入框的 `value` 值。
^^^
此外,`Input` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 清除按钮。 |

View File

@@ -1,36 +0,0 @@
# Label <small>标签</small>
## 示例
### 激活输入组件
可以使用 [`for`](#props-for) 属性指定被激活组件的 `ref`。点击标签区域可以触发
[[ demo src="/demo/label/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``for`` | `string=` | - | [^for] |
^^^for
允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`HTMLElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) 的方式指定目标组件或元素。如果指定的是组件,点击标签后会调用对应组件的 `activate` 方法(如果存在);如果指定的是元素,点击标签后会调用对应元素的 [`click` 方法](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click)。
+++类型详情
| 类型 | 描述 |
| -- | -- |
| `string` | 在当前浮层组件所在上下文中,通过匹配 `$refs` 中的键名查找 HTML 元素或对应组件实例的根元素。 |
| `Vue` | 如果传入的是组件实例,就直接返回该组件的根元素。 |
| `HTMLElement` | 如果已经是一个 HTML 元素了,就直接使用该元素。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |

View File

@@ -1,48 +0,0 @@
# Layout <small>布局</small>
:::tip
`Layout` 组件需要配合 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
### 基础布局
`Layout` 组件支持多种典型布局。
[[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
### 通顶侧边栏
[[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
### 通栏底部
[[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
### 吸顶/吸底布局
`Header` / `Sidebar` / `Footer` 组件均支持通过 `sticky` 属性设置吸顶/吸底。
:::tip
当吸顶的布局头部和吸顶侧边栏一起使用需要在布局头部的父组件 `Layout` 上设置 `--dls-layout-header-height` 来指定布局头部的高度。
:::
:::tip
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
:::
[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``direction`` | `'column' | 'row'` | `'column'` | 布局排列方向。在有 `Sidebar` 时,默认为 `'row'`。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容,可以是 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件或嵌套使用 `Layout` 组件。 |

View File

@@ -1,123 +0,0 @@
# Lightbox <small>灯箱</small>
## 示例
[[ demo src="/demo/lightbox/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``escapable`` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
| ``outside-closable`` | `boolean=` | `false` | 点击内容区域外部时是否关闭对话框。 |
| ``priority`` | `number=` | - | 浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| ``overlay-class`` | `string | Array | Object=` | - | 浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``indicator`` | `string=` | `'number'` | [^indicator] |
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true } }` | 额外配置。 |
| ``lazy`` | `boolean= | { preload: number }` | `false` | [^lazy] |
^^^open
:::badges
`.sync`
:::
是否显示浮层。
^^^
^^^datasource
灯箱数据源,项目类型为:`{ src, alt, type, desc }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `src` | `string` | 媒体源地址。 |
| `type` | `string=` | 默认图片类型,`video` 表示视频。 |
| `alt` | `string=` | 图片的降级描述文本。 |
| `desc` | `string=` | 该项目的描述文本。 |
+++
^^^
^^^index
:::badges
`.sync`
:::
当前播放序号。
^^^
^^^indicator
播放进度指示器的显示模式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `number` | 显示「当前页数/全部页数」文字提示。 |
| `none` | 不显示指示器。 |
^^^
^^^before-close
在将触发浮层关闭的操作发生后执行,类型为 `function(): boolean=|Promise<boolean=>`。返回值可以是一个 `boolean`,也可以是一个 resolve `boolean` 的 `Promise`,用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭浮层。
+++调用示例
```html
<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>
```
^^^
^^^lazy
指定是否懒加载轮播资源。
+++详情
| 名称 | 描述 |
| -- | -- | -- |
| `false` | 不懒加载资源。 |
| `true` | 预加载当前展示项目的前后 1 个资源。 |
| `{ preload: number }` | 预加载当前展示项目的前后指定数量个资源。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | [^slot-desc] |
^^^slot-item
可用来定制每个灯箱项的媒体展示区域。
默认内容:每项图片或视频。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
^^^
^^^slot-desc
可用来定制每个灯箱项的描述区域。
默认内容:每项描述文字。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``close`` | 进行触发关闭操作的动作时触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``close`` | 关闭。 |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |

View File

@@ -1,57 +0,0 @@
# Link <small>链接</small>
## 示例
[[ demo src="/demo/link/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``to`` | `string | Object` | - | 链接路径。当配合 Vue Router 使用时,会透传到 [`<router-link>`](https://router.vuejs.org/zh/api/#router-link) 的[同名属性](https://router.vuejs.org/zh/api/#to);否则只支持 `string` 类型,输出到 `<a>` 元素的 `href` 属性中。 |
| ``rel`` | `string` | - | HTML 原生的链接类型,可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types)。 |
| ``target`` | `string` | - | [^target] |
| ``native`` | `boolean` | `false` | 是否强制使用原生的 `<a>` 元素。 |
| ``fallback`` | `string` | `'span'` | 在 [`to`](#props-to) 属性为空时使用的原生元素类型。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^target
指定在何处显示链接的资源,可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-target)。
:::tip
当 `target` 为 `_blank` 时将自动增加 `noopener` 值(如果用户未指定该值)以增强默认情况下的安全性。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 链接内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 在 [`to`](#props-to) 属性为空或指定了 `native` 为 `true` 的情况下,点击时触发。回调参数为 `(event)``event` 类型为原生 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``link.routerLink`` | `string` | `'router-link'` | 在路由模式下使用的链接组件名称,用于在 Nuxt.js 等环境下更换为兼容 Vue Router 的实现。 |

View File

@@ -1,58 +0,0 @@
# Loading <small>加载</small>
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值:`normal` / `strong` / `reverse`
[[demo src="/demo/loading/style.vue"]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m` / `l`
[[demo src="/demo/loading/size.vue"]]
### 排列方式
可选的排列方式 [`ui`](#props-ui) 属性值:`vertical`
[[demo src="/demo/loading/layout.vue"]]
### 自定义加载图标
通过 [`spinner`](#slots-spinner) 插槽设置自定义加载图标。
[[demo src="/demo/loading/slot.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``loading`` | `boolean` | `false` | 是否处于加载状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式。 |
| `reverse` | 反白样式,用于深色背景。 |
| `vertical` | 垂直排列样式。|
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``spinner`` | 加载图标。 |
| ``default`` | 加载中提示文字。 |

View File

@@ -1,70 +0,0 @@
# Message <small>消息</small>
## 示例
可以使用 [`status`](#props-status) 属性指定不同的上下文状态,使用 [`display`](#props-display) 属性指定不同的展示形态。
[[ demo src="/demo/message/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | `'m'` | [^ui] |
| ``status`` | `'success' | 'error' | 'info' | 'warning' | 'aux'` | `'info'` | [^status] |
| ``display`` | `'normal' | 'popup' | 'simple' | 'standalone'` | `'normal'` | [^display] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^status
消息状态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示状态。 |
| `success` | 成功状态。 |
| `warning` | 警告状态。 |
| `error` | 错误状态。 |
| `aux` | 辅助状态。 |
+++
^^^
^^^display
消息展示形态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `normal` | 普通样式,有图标和带状态文本。 |
| `popup` | 气泡样式,默认仅展示图标,可交互调起气泡展示详细内容。 |
| `simple` | 简单样式,没有图标。 |
| `standalone` | 独立样式,展示图标和无状态文本。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 消息内容区域 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 成功消息。 |
| ``warning`` | 警告消息。 |
| ``info`` | 信息消息。 |
| ``error`` | 错误消息。 |
| ``aux`` | 辅助消息。 |

View File

@@ -1,118 +0,0 @@
# Nav <small>导航菜单</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`m`
[[ demo src="/demo/nav/size.vue" ]]
### 大卡样式
设置首层数据项属性 `position``card` 可使该数据项下拉展示成大卡样式。
[[ demo src="/demo/nav/card.vue" ]]
### 自定义插槽
[[ demo src="/demo/nav/slot.vue" ]]
### 自适应宽度
自动根据实际渲染宽度来决定是否将多余的导航项目折叠起来。
[[ demo src="/demo/nav/more.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>=` | `[]` | [^items] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `m` | 中尺寸样式。 |
+++
^^^
^^^active
当前激活节点,若该节点定义了 `name` 则就是该 `name` 值,否则该值是由 `to` 生成的路由路径([route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7))。
^^^
^^^items
数据源数组,每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `position` | `string=` | 首层节点的下拉面板样式,设置成 `card` 则展示成大卡样式。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `items` 数组项。 |
+++
^^^
^^^matches
当路由发生切换时,用来从 `items` 中找到激活的项目。
默认实现:项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^item] |
| ``item-label`` | [^item-label] |
^^^item
每个节点的渲染插槽。
默认内容:渲染了节点的图标和文字描述。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 [`items`](#props-items) 属性数组项。 |
+++
^^^
^^^item-label
节点的 `label` 插槽。
默认内容:渲染节点对应的 `Link`。
作用域参数参考 [`item`](#slots-item) 插槽。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``activate`` | 用户点击有 `to` 的节点触发,参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
| ``click`` | 用户点击节点时触发,参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开。 |
| ``more`` | 更多。 |

View File

@@ -1,118 +0,0 @@
# NumberInput <small>数字输入</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m`
[[ demo src="/demo/number-input/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使数字输入框处于只读状态。
[[ demo src="/demo/number-input/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使数字输入框处于禁用状态。
[[ demo src="/demo/number-input/disabled.vue" ]]
### 精度位数和递增/递减
设置 [`decimal-place`](#props-decimal-place) 来指定数值的小数精度位数。
设置 [`step`](#props-step) 来指定每次递增/减的数值。
[[ demo src="/demo/number-input/decimal.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `number` | - | [^value] |
| ``readonly`` | `boolean=` | `false` | 数字输入框是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 数字输入框是否为禁用状态。 |
| ``placeholder`` | `string` | - | 输入占位符。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
| ``max`` | `number` | - | 允许的最大值。 |
| ``min`` | `number` | - | 允许的最小值。 |
| ``decimal-place`` | `number` | 0 | 数值的小数精度位数,默认精确到整数位,`-1` 表示不处理精度。 |
| ``step`` | `number` | 1 | 每次递增/递减的数值。 |
| ``format`` | `(val: number, defaultFormattedValue: string) => string` | - | 自定义数字格式化。 |
| ``parse`` | `(val: string) => number` | - | 自定义将输入的值解析成数字。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
数字输入框的值。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 数字输入框前置内容。 |
| ``after`` | 数字输入框后置内容。位于增减按钮之后。 |
:::warning
注意,插槽宽度会挤压输入框宽度。
:::
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
原生 `change` 事件,回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `number` | 数字输入框的值。 |
| `event` | `Event` | 原生事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发,受数字格式化影响,若当前值格式化为无效值,则不触发。回调参数为 `(value: string)``value` 为数字输入框的 `value` 值。
^^^
此外,`NumberInput` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``increase`` | 增加按钮。 |
| ``decrease`` | 减少按钮。 |

View File

@@ -1,133 +0,0 @@
# OptionGroup <small>选择组</small>
:::tip
`OptionGroup` 组件需要在 [`Select`](./select)、[`Dropdown`](./dropdown) 或其它 `OptionGroup` 组件内使用,可以配合 [`Option`](./option) 组件使用。
:::
## 示例
见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项组的标题。 |
| ``expanded`` | `boolean=` | `false` | 选项列表是否展开。 |
| ``trigger`` | `'click' | 'hover'` | `'click'` | 选项列表展开的时机。 |
| ``options`` | `Array<Object>` | `[]` | [^options] |
| ``position`` | `string` | `inline` | [^position] |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^options
选项列表,项目的类型为 `{label, value, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^position
内部选项显示的方式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `inline` | 内联方式直接显示。 |
| `popup` | 在浮层中显示。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或其它 `OptionGroup` 组件。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``before`` | 选项列表的前置区域。 |
| ``after`` | 选项列表的后置区域。 |
^^^slot-label
选项组标题文本区域。
默认内容:[`label`](#props-label) 属性对应的文本。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
^^^
^^^slot-group-label
子选项组的标题文本区域。
默认内容:带 `options` 的选项对应的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外,当前选项组数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
选项的文本区域。
默认内容:不带 `options` 的选项对应的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的选项的整个区域。
默认内容:`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | 选项列表展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发选项列表展开还是收起。 |
| ``afteropen`` | 选项列表打开完成之后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expandable`` | 可展开的项目。 |

View File

@@ -1,39 +0,0 @@
# Option <small>选项</small>
:::tip
`Option` 组件需要配合 [`Select`](./select) 或 [`Dropdown`](./dropdown) 或 [`OptionGroup`](./option) 组件使用。
:::
## 示例
见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项的文本。 |
| ``value`` | `*` | - | 选项对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``hidden`` | `boolean=` | `false` | 是否为隐藏状态。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项的整个区域。默认显示文本及勾选图标等。 |
| ``label`` | 选项的文本区域。默认显示 [`label`](#props-label) 属性内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 在选项被点击时触发 `click` 事件,没有参数。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``checked`` | 已选状态。 |

View File

@@ -1,109 +0,0 @@
# Overlay <small>浮层</small>
## 示例
### 自定义定位
浮层可以在页面内按照自定义方式定位。
[[ demo src="/demo/overlay/position.vue" ]]
### 相对已有元素定位
浮层可以相对于页面内某个 DOM 元素定位。
[[ demo src="/demo/overlay/relative-base.vue" ]]
### 层叠顺序管理
同层级且相同优先级的浮层,越晚显示的层叠顺序越高。
[[ demo src="/demo/overlay/stack-display-order.vue" ]]
打开的浮层,会建立新的层叠上下文,从中打开的浮层层叠顺序会高于父级浮层。
[[ demo src="/demo/overlay/stack-on-overlay.vue" ]]
子浮层的层叠顺序受父浮层影响。
[[ demo src="/demo/overlay/stack-display-order-with-on-overlay.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Element` | - | [^target] |
| ``priority`` | `number` | - | [^priority] |
| ``autofocus`` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
| ``modal`` | `boolean` | `false` | 是否是模态浮层。模态浮层会抢占焦点且限制键盘导航处于浮层内部(关闭后焦点会回归)。 |
| ``inline`` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
| ``local`` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置,而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
| ``overlay-class`` | `string | Array | Object=` | - | [^overlay-class] |
| ``overlay-style`` | `string | Array | Object=` | - | [^overlay-style] |
| ``options`` | `Object` | - | 透传给底层 Popper.js 实现的 `modifiers` 配置项,具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |
| ``position`` | `string` | 'auto' | 透传给底层 Popper.js 实现的 `placement` 配置项,具体内容参见[这里](https://popper.js.org/docs/v1/#popperplacements--codeenumcode)。 |
| ``match-width`` | `boolean` | `false` | 当浮层宽度较窄时,是否自动匹配目标元素的宽度。 |
^^^open
:::badges
`.sync`
:::
是否显示浮层。
^^^
^^^target
允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 的方式指定目标元素。如果目标元素存在,浮层会相对于该元素进行定位,具体定位参数由 [`options`](#props-options) 属性指定。
+++类型详情
| 类型 | 描述 |
| -- | -- |
| `string` | 在当前浮层组件所在上下文中,通过匹配 `$refs` 中的键名查找 DOM 元素或对应组件实例的根元素。 |
| `Vue` | 如果传入的是组件实例,就直接返回该组件的根元素。 |
| `Element` | 如果已经是一个 DOM 元素了,就直接使用该元素。 |
+++
^^^
^^^priority
当前浮层组件实例与其它实例在层叠关系上的权重,数值越大,越靠上。
:::tip
由于所有浮层组件的浮层根元素都会放置到 `<body>` 元素下,所以为了更好地控制浮层层叠顺序,浮层模块内部实现了全局的层叠上下文。组件的父子关系决定了浮层的嵌套关系,在同层级内的每个浮层组件实例都可以通过指定 `priority` 来实现不同实例间的相对层叠顺序。相同 `priority` 数值的组件实例,按照实例化的先后顺序来决定层叠顺序,后实例化的组件在之前组件的上面。
:::
^^^
^^^overlay-class
浮层根元素类名,数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。
:::tip
由于浮层根元素会放置在 `<body>` 元素下,可以通过这个属性给浮层根元素设置类名以自定义样式。
:::
^^^
^^^overlay-style
浮层根元素的样式,数据格式为所有 [Vue 支持的 `style` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F)。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 浮层内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``locate`` | 浮层定位发生变化时触发。 |
| ``afteropen`` | 浮层打开后触发。浮层内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
| ``orderchange`` | 浮层的 `z-index` 发生变化时触发,参数是 `(order: number)`, `order` 就是新的 `z-index`。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``overlay.overlayClass`` | `string | Array | Object=` | `[]` | 全局配置需要添加到浮层容器上的类名,数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。 |

View File

@@ -1,77 +0,0 @@
# Pagination <small>翻页</small>
## 示例
### 尺寸
[[ demo src="/demo/pagination/size.vue" ]]
### 每页个数
使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。
使用 [`page-sizes`](#props-page-sizes) 属性来指定每页个数候选项。
[[ demo src="/demo/pagination/pages.vue" ]]
### 可选部分
使用 [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。
[[ demo src="/demo/pagination/parts.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``page`` | `number` | `1` | 当前页码(从 `1` 开始)。 |
| ``total`` | `number` | - | 项目总数。 |
| ``to`` | `string | Object` | `''` | [^to] |
| ``native`` | `boolean` | `false` | 原生链接跳转。 |
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
| ``page-sizes`` | `Array<number>` | `pagination.pageSizes` | 每页个数候选项。 |
| ``show-goto`` | `boolean=` | `false` | 是否显示直接跳转到页码。 |
| ``show-total`` | `boolean=` | `false` | 是否显示项目总数。 |
| ``show-page-size`` | `boolean=` | `false` | 是否显示每页项目数选择器。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^to
目标链接模板。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。其中,类型为 `string` 路径时其中的 `:page` 关键词会被替换为实际页码。类型为 `Object` 时,会将起转换为 `string` 后替换掉 `:page` 部分。
^^^
^^^page-size
:::badges
`.sync`
:::
每页个数。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``pagesizechange`` | 每页显示项目被切换时触发,回调参数为 `(size: number)`。`size` 为新的每页显示项目数。 |
| ``redirect`` | 链接跳转时触发,回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象,在 `native` 为 `true` 时,调用 `event.preventDefault` 可阻止跳转。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``pagination.pageSize`` | `number` | `30` | 每页个数。 |
| ``pagination.pageSizes`` | `Array<number>` | `[30, 50, 100]` | 每页个数候选项。 |

View File

@@ -1,92 +0,0 @@
# Popover <small>气泡提示</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/popover/ui.vue" ]]
### 定位
使用 [`position`](#props-position) 属性来指定气泡显示的位置。
[[ demo src="/demo/popover/position.vue" ]]
### 触发时机
使用 [`trigger`](#props-trigger) 属性来指定显示/隐藏气泡的时机。
[[ demo src="/demo/popover/trigger.vue" ]]
### 标题区域和操作区域
使用 [`title`](#props-title) 属性或[`title`](#slots-title) 插槽来指定气泡的标题。
使用 [`foot`](#props-foot) 属性开启底部操作区,使用 [`ok-label`](#props-ok-label) 属性和 [`cancel-label`](#props-cancel-label) 属性来设置气泡的按钮内容。使用 [`foot`](#slots-foot) 插槽来自定义底部操作区。
[[ demo src="/demo/popover/foot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 [`target`](./overlay#props-target) 属性。 |
| ``position`` | `string` | `'top'` | [^position] |
| ``trigger`` | `string` | `'hover'` | [^trigger] |
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``title`` | `string=` | - | 用于自定义标题内容。 |
| ``foot`` | `boolean` | `false` | 用于开启底部操作区。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示气泡提示。
^^^
^^^position
指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定,可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
^^^
^^^trigger
触发气泡提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数,并支持使用 <code>&#0096;${open}-${close}&#0096;</code> 语法分别指定触发打开/关闭提示的时机。另外,当 `trigger` 指定为 `custom` 时,将不会使用 `v-outside` 功能自动进行处理。
例如:`click` 表示点击 `target` 后打开,在空白处点击时关闭;`hover-mousedown` 表示光标移入 `target` 后打开,在空白处按下鼠标时关闭。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 气泡提示内容。 |
| ``title`` | 用于自定义标题内容。 |
| ``foot`` | 用于自定义底部操作区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |

View File

@@ -1,63 +0,0 @@
# Progress <small>进度条</small>
## 示例
[[ demo src="/demo/progress/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string` | `'bar'` | 进度条类型。可选值为 `bar` / `circular`,分别是柱状和环形。 |
| ``desc`` | `boolean` | `false` | 是否显示文字提示。 |
| ``value`` | `number` | `0` | 进度值。 |
| ``min`` | `number` | `0` | 最小值。 |
| ``max`` | `number` | `1` | 最大值。 |
| ``decimal-place`` | `number` | `0` | 保留的小数位数。 |
| ``status`` | `string` | - | [^status] |
| ``autosucceed`` | `boolean | number` | - | 是否在进度值到达最大时自动进入 `success` 状态。`true` 表示直接进入成功状态,如果是 `number` 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。 |
| ``indeterminate`` | `boolean` | `false` | 是否不确定进度,目前仅支持在 `type` 为 `bar` 时生效。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `fluid` | 柱状进度条自适应宽度样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^status
:::badges
`.sync`
:::
进度状态。可选值为 `success` / `alert`,分别表示成功及危险警告状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``after`` | 可用来定制文字提示区域之后的内容,作用域参数参考 `default` 插槽。 |
^^^slot-default
可用来定制文字提示区域的内容。
默认内容:完成率百分比。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `percent` | `number` | 进度完成百分比。 |
| `value` | `number` | 进度值,同 [`value`](#props-value) 属性。 |
| `status` | `string` | 进度状态,同 [`status`](#props-status) 属性。 |
+++
^^^

View File

@@ -1,67 +0,0 @@
# PromptBox <small>输入弹框</small>
## 示例
获取用户输入的值。
[[ demo src="/demo/prompt-box/base.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``open`` | `boolean` | `false` | [^open] |
| ``title`` | `string` | - | 标题。 |
| ``content`` | `string` | `'请输入'` | 输入框上方的说明内容。 |
| ``value`` | `string` | `''` | [^value] |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示输入弹框。
^^^
^^^value
:::badges
`v-model`
:::
输入框值。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
| ``foot`` | 底部区域,默认会展示“确定”、“取消”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
^^^event-input
:::badges
`v-model`
:::
输入框值发生变化后触发。回调参数为 `(value: string)``value` 为输入框当前值。
^^^

View File

@@ -1,111 +0,0 @@
# RadioButtonGroup <small>单选按钮组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/radio-button-group/default.vue" ]]
### 简单样式
设置 [`ui`](#props-ui) 属性值:`simple` 来指定简单样式。
[[ demo src="/demo/radio-button-group/simple.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-button-group/desc.vue" ]]
### 最小宽度
设置 [`ui`](#props-ui) 属性值:`simple` 来指定简单样式。
[[ demo src="/demo/radio-button-group/stable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `simple` | 简单样式。 |
| `stable` | 稳定样式。会给所有按钮添加一个最小宽度以使布局更加稳定,多行之间更容易对齐。 |
^^^
^^^items
单选按钮组数据源,项目类型为 `{ label, value, disabled, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息,作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
按钮内文本区域。
默认内容:`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
^^^

View File

@@ -1,96 +0,0 @@
# RadioGroup <small>单选框组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/radio-group/default.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-group/desc.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^items
单选框组数据源,项目类型为 `{ label, value, disabled, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value`。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息,作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
选项描述文本区域。
默认内容:`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
^^^

View File

@@ -1,73 +0,0 @@
# Radio <small>单选框</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/radio/size.vue" ]]
### 值设定
可以通过设置 [`value`](props-value) 属性来修改选中状态下 `v-model` 的值。
[[ demo src="/demo/radio/model.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``value`` | `*` | `true` | 选中状态对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于选中状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 单选框的描述文本,点击时会进行选中。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外,`Radio` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。

View File

@@ -1,81 +0,0 @@
# RegionPicker <small>地域选择</small>
## 示例
[[ demo src="/demo/region-picker/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``selected`` | `Array<string>` | - | [^selected] |
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。`datasource` 节点中的非叶子节点若有部分子孙节点被选中,则为半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^datasource
数据源,项目类型为 `{label, value, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字说明。 |
| `value` | `string=` | 节点对应的值。 |
| `disabled` | `boolean=` | 节点是否为禁用。 |
| `children` | `Array<Object>=` | 子节点列表,列表项类型与本节点相同。 |
+++
^^^
^^^selected
:::badges
`v-model`
:::
已选项 `value` 的数组。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``label`` | [^slot-label] |
^^^slot-label
每个节点文本描述的内容。
默认内容:每个节点 `label` 字段对应的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字说明。 |
| `value` | `string` | 节点对应的值。 |
| `disabled` | `boolean=` | 节点是否为禁用。 |
| `children` | `Array<Object>=` | 子节点列表,列表项类型与本节点相同。 |
| `level` | `number` | 节点所在的层级。顶层节点层级为 `0`。 |
| `overlay` | `boolean=` | 是否在浮层中。 |
+++
另外,`datasource` 内节点中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
:::tip
`level` 为 `2` 且 `overlay` 为 `true` 时为在浮层中展现的三级标题,默认内容会附带被选中的子节点个数及子节点总数信息。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: Array)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
^^^

View File

@@ -1,154 +0,0 @@
# Schedule <small>时段选择</small>
## 示例
[[ demo src="/demo/schedule/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``selected`` | `Object` | - | [^selected] |
| ``hour-class`` | `string | Array | Object | function` | `{}` | 特定小时的自定义 HTML `class`。传非函数时,数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class);传函数时,签名为 `function(day: number, hour: number): string | Array<string>|Object<string, boolean>`,返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(number, number): boolean` | `() => false` | 特定小时是否禁用。参数类型为 `(day: number, hour: number)`,分别表示一周的第几天(`0` 表示周日)及对应的小时数。 |
| ``shortcuts`` | `Array` | `schedule.shortcuts` | [^shortcuts] |
| ``shortcuts-display`` | `string` | `'inline'` | 快捷选择项的显示方式,支持 `inline` / `popup`,分别对应内联按钮组与下拉选择。 |
| ``statuses`` | `Array<{label: string, value: string}>` | `schedule.statuses` | 图例数据源。会为图例项目添加 `class` 值 <code>&#0096;veui-schedule-legend-${value}&#0096;</code>`label` 则会显示为图例文本。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选时段。类型为 `Object<number, Array>`。
键为一周的第几天,`0` 表示周日,与 [`Date.prototype.getDay()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay) 返回值相同。值为每天被选取的时段,每个时段格式为 `[start: number, end: number]``start` 与 `end` 均为 `0``23` 的小时数。
+++数据样例
```json
{
1: [
[9, 17]
],
6: [
[0, 2],
[18, 20]
]
}
```
本例表示周一的 9:0018:00 与周六的 0:003:00 和 18:0021:00。结束时间表示的是时段最后一小时的开始时间。
+++
^^^
^^^shortcuts
快捷选择选项列表。类型为 `{label: string, selected: boolean | Array}`。
`label` 为显示的提示文字。`selected` 表示预选择的时段,类型为数组时,格式与 [`selected`](#props-selected) 属性相同;值为 `true` 时等同于 `[[0, 23]]`。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``header`` | 顶部区域。 |
| ``header-content`` | 顶部区域的内容,不包括外层容器。 |
| ``shortcuts`` | 顶部快捷选项区域。 |
| ``legend`` | 顶部图例区域。 |
| ``legend-label`` | [^slot-legend-label] |
| ``hour`` | [^slot-hour] |
| ``label`` | [^slot-label] |
| ``tooltip`` | [^slot-tooltip] |
^^^slot-legend-label
每个图例的文本区域。
默认内容:每个图例状态 `label` 字段对应的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 图例状态的文字说明。 |
| `value` | `string` | 图例状态对应的值。 |
+++
另外,`status` 内对应图例状态对象中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-hour
每小时区域的内容。
默认内容:无。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `day` | `number` | 一周的第几天,`0` 表示周日。 |
| `hour` | `number` | 小时序号。 |
+++
^^^
^^^slot-label
已选时间段的区域。
默认内容:时段在 3 小时及以上时,显示时段范围 <code>&#0096;${from}:00${to + 1}:00&#0096;</code>;选择全天的显示为“全天”;小于 3 小时无内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `from` | `number` | 时段开始的小时。 |
| `to` | `number` | 时段结束的小时。 |
+++
^^^
^^^slot-tooltip
光标移入每个小时格子的悬浮提示内容。
默认内容:当前小时格子的时间范围 <code>&#0096;${hour}:00${hour + 1}:00&#0096;</code>。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `day` | `number` | 一周的第几天,`0` 表示周日。 |
| `hour` | `number` | 小时序号。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: Object)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``schedule.statuses`` | Array<{name, label}> | 见描述。 | [^config-statuses] |
^^^config-statuses
默认图例状态数组。数组项类型为 `{name: string, label: string}`,默认值为:
```js
[
{ name: 'selected', label: '@@schedule.selectedRanges' },
{ name: 'available', label: '@@schedule.availableRanges' }
]
```
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
^^^

View File

@@ -1,207 +0,0 @@
# SearchBox <small>搜索框</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值:`strong`
[[ demo src="/demo/search-box/style.vue" ]]
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/search-box/size.vue" ]]
### 只读与禁用
[[ demo src="/demo/search-box/disabled.vue" ]]
### 推荐列表
[[ demo src="/demo/search-box/suggestion.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``placeholder`` | `string` | - | 搜索框占位符。 |
| ``autofocus`` | `boolean` | `false` | 是否自动聚焦。 |
| ``clearable`` | `boolean` | `false` | 是否显示清除按钮。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
| ``composition`` | `boolean` | `false` | 是否感知输入法状态。 |
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
| ``replace-on-select`` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | - | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
按钮预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式,搜索图标变成搜索按钮,背景为主题色。 |
| `xs` | 特小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中等尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
输入框的值。
^^^
^^^suggestions
推荐列表。列表项为 `Object` 时格式为 `{label, value}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 推荐项文本。 |
| `value` | `string` | 推荐项值。 |
+++
^^^
^^^suggest-trigger
展示推荐列表的触发时机。可以是枚举值,也可以枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `focus` | 输入框聚焦时。 |
| `input` | 输入框触发 [`input`](#events-input) 事件时。 |
| `submit` | 点击搜索按钮时。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
建议面板是否展开(如果 `suggestions` 中没有待选项,则即使为 `true` 时面板也会关闭)。
^^^
^^^trim
是否移除前后空格。当为 `true` 时,会移除前后空格,当为 `false` 时,不移除前后空格。设置为字符串时,按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``suggestions`` | [^slot-suggestions] |
| ``suggestions-before`` | 插入推荐列表前的内容。 |
| ``suggestions-after`` | 插入推荐列表后的内容。 |
| ``suggestion`` | [^slot-suggestion] |
| ``clear`` | 点击清除按钮时触发。 |
| ``group-label`` | 可以参考 [`Select`](./select) 组件的 [`group-label`](./select#props-group-label) 属性。 |
| ``option-label`` | 可以参考 [`Select`](./select) 组件的 [`option-label`](./select#props-option-label) 属性。 |
^^^slot-suggestions
推荐列表内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `suggestions` | `Array<{value: string, label: string}>` | 从 [`suggestions`](#props-suggestions) 属性归一化类型后的推荐列表。 |
| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
^^^slot-suggestion
推荐列表的单项插槽,用来定制选项内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
`suggestions` 中的每一项,除了 `label` 和 `value` 外的字段也会自动通过 `v-bind` 进行绑定。
当 `suggestions` 为 `Array<string>` 类型时,`label` 和 `value` 均为单项 `string` 值。
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``suggest`` | [^event-suggest] |
| ``select`` | [^event-select] |
| ``search`` | [^event-search] |
| ``toggle`` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
^^^event-input
输入框中文本发生变化时触发该事件,回调参数为 `(value: string)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
+++
^^^
^^^event-suggest
需要展示推荐列表时触发,回调参数为 `(value: string)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
+++
^^^
^^^event-select
选择推荐列表某个选项时触发,回调参数为 `(item: Object)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `{label: string, value: string=, ...}` | 单个选项。 |
+++
^^^
^^^event-search
输入内容被提交时触发,回调参数为 `(value: string, event: Event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
| `event` | [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click) | 原生点击事件。 |
+++
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``search`` | 搜索。 |

View File

@@ -1,281 +0,0 @@
# Select <small>下拉选择</small>
:::tip
`Select` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`
[[ demo src="/demo/select/size.vue" ]]
### 内联选项
`Select` 组件内支持内联使用 `OptionGroup``Option` 组件来代替 [`options`](#props-options) 属性。
[[ demo src="/demo/select/inline.vue" ]]
### 搜索选项
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
[[ demo src="/demo/select/searchable.vue" ]]
### 多选
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
[[ demo src="/demo/select/multiple.vue" ]]
### 自定义已选项展示
使用 [`label`](#slots-label) 插槽来自定义**下拉关闭时**已选项如何展示。
使用 [`selected`](#slots-selected) 插槽来自定义已选项如何展示,和下拉是否关闭无关。
[[ demo src="/demo/select/selected.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | - | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
| ``placeholder`` | `string` | `select.placeholder` | 未选择时的占位文本。 |
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
| ``show-select-all`` | `boolean` | `false` | 多选模式下是否显示“全选”选项。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``composition`` | `boolean=` | `false` | 是否感知搜索框输入法输入过程的值。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表,项目的类型为 `{label, value, options, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
已选值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
| ``before`` | [^slot-before] |
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`before`](#slots-before) 插槽。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
| ``selected`` | [^slot-selected] |
| ``no-data`` | 用于定义当搜索无数据时要展现的内容。 |
^^^slot-before
选项列表前的内容。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `*` | 已选项值。 |
| `select` | `function(value: *): void` | 用于切换已选项。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^
^^^slot-label
下拉按钮文本区域。
默认内容:已选项对应的 `label` 属性值或内联模式下已选项的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 已选项文本。 |
| `value` | `*` | 已选项值。 |
| `selected` | `boolean` | 是否已选择某个值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-group-label
下拉选项组(带 `options` 的选项)的标题文本区域。
默认内容:选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项(不带 `options` 的选项)的文本区域。
默认内容:选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容:`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外,当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^^slot-trigger
整个下拉触发区域。
默认内容:下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*` / `disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
| `handlers` | `Object` | [^handlers-desc] |
| `value` | `*` | 已选项值。 |
| `select` | `function(value: *): void` | 用于切换已选项。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^handlers-desc
需要绑定到触发元素上的事件监听器,可以使用 `v-on="handlers"` 统一进行输出。
:::tip
用于绑定 `handlers` 的元素需要支持获取焦点,以使各种键盘交互依然可以正常触发。
:::
^^^
^^^^
^^^slot-selected
选中值渲染区域。
默认内容:单选时渲染选中项目的标签;多选时将每个选中项目的标签渲染为 `Tag` 组件。
+++单选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
+++多选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `Array<Object>` | 选中项数据的数组。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)``value` 为输入框的 `value` 值。 |
| ``change`` | [^event-change] |
| ``toggle`` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
| ``clear`` | 点击清除按钮时触发。 |
| ``afteropen`` | 下拉打开完成之后触发。 |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发,回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``select.placeholder`` | `string` | `@@select.placeholder` | 未选择时的占位内容。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开浮层。 |
| ``collapse`` | 收起浮层。 |

View File

@@ -1,44 +0,0 @@
# Sidebar <small>布局侧边栏</small>
:::tip
`Sidebar` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
### 收起侧边栏
通过 [`collapse-mode`](#props-collapse-mode) 属性指定收起模式,分别是 `slim`(部分收起) / `hidden`(完全收起)。
[[ demo src="/demo/sidebar/collapse-mode.vue" browser="/demo/sidebar/collapse-mode.vue" ]]
### 展示/隐藏切换按钮
使用 `collapsible` 属性设置是否显示侧边栏展开/收起按钮。
[[ demo src="/demo/sidebar/collapsible.vue" browser="/demo/sidebar/collapsible.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
| ``collapsible`` | `boolean` | `false` | 是否显示收起/展开按钮。 |
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``autocollapse`` | `boolean` | `false` | 是否拉伸窗口到一定阈值时自动收起。 |
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式,分别是 `slim`(部分收起)/`hidden`(完全收起)。
^^^collapsed
:::badges
`.sync`
:::
收起/展开的状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局侧边栏的内容。 |

View File

@@ -1,140 +0,0 @@
# Sidenav <small>边栏菜单</small>
## 示例
### 普通
结合 Vue Router 使用边栏菜单。
[[ demo src="/demo/sidenav/normal.vue" ]]
### 可折叠
配合 `Sidebar` 的 [`collapsible`](./sidebar#props-collapsible) 属性可以控制菜单的展开/收起。
[[ demo src="/demo/sidenav/collaspible.vue" browser="/demo/sidenav/collaspible.vue" ]]
### 自定义插槽
[[ demo src="/demo/sidenav/slot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>=` | `[]` | [^items] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^active
当前激活节点,若该节点定义了 `name` 则就是该 `name` 值,否则该值是由 `to` 生成的路由路径([route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7))。
^^^
^^^items
数据源数组,每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `icon` | `string|{render: function}` | 首层节点使用的图标。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `items` 数组项。 |
+++
^^^
^^^matches
当路由发生切换时,用来从 `items` 中找到激活的项目。
默认实现:项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
^^^
^^^collapsed
:::badges
`.sync`
:::
当前折叠状态。
^^^
^^^expanded
:::badges
`.sync`
:::
指定当前展开的节点,是一个对应于 `items` 中节点数据中 `name` 属性或路由路径的数组。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 前置插槽。 |
| ``item`` | [^item] |
| ``icon`` | [^icon] |
| ``item-label`` | [^item-label] |
| ``after`` | 后置插槽。 |
^^^item
每个节点的渲染插槽。
默认内容:渲染了 [`icon`](#slots-icon) 插槽和 [`item-label`](#slots-item-label) 插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 图标名称。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `icon` | `string` | 首层节点使用的图标。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `items` 数组项。 |
+++
^^^
^^^icon
节点前的图标插槽。
默认内容:渲染 `item.icon` 指定的图标。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `icon` | `string|{render: function}` | 图标名称。 |
+++
^^^
^^^item-label
节点的文字标签插槽。
默认内容:渲染节点对应的 `Link`。
作用域参数参考 [`item`](#slots-item) 插槽。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``activate`` | 用户点击有 `to` 的节点触发,参数是激活节点的整个 `item` 数据。 |
| ``click`` | 用户点击节点时触发,参数是激活节点整个 `item` 数据。 |

View File

@@ -1,129 +0,0 @@
# Slider <small>滑块</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/slider/size.vue" ]]
### 只读/禁用
设置 [`readonly`](#props-readonly) 属性来使设置滑块只读,设置 [`disabled`](#props-disabled) 属性来使设置滑块禁用。
[[ demo src="/demo/slider/editable.vue" ]]
### 步进
使用 [`step`](#props-step) 属性来指定步进值,使点击调节按钮或按下 <kbd></kbd><kbd></kbd> 键时根据指定步进值来调整输入值。
[[ demo src="/demo/slider/steps.vue" ]]
### 范围
使用 [`max`](#props-max) / [`min`](#props-min) 属性来指定拖动范围两端的值。
[[ demo src="/demo/slider/range.vue" ]]
### 次级条
使用 [`secondary-progress`](#props-secondary-progress) 属性来指定一个次级进度条。
[[ demo src="/demo/slider/buffer.vue" ]]
### 定制内容
使用 [`thumb`](#slots-thumb) / [`tip`](#slots-tip) 插槽来自定义滑块按钮、悬浮提示等内容。
[[ demo src="/demo/slider/variant.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `*|Array<*>` | - | [^value] |
| ``secondary-progress`` | `number | Array<number>` | `0` | 次要条。 |
| ``min`` | `number` | `0` | `value` 经过 `parse` 函数处理后允许的最小值。 |
| ``max`` | `number` | `1` | `value` 经过 `parse` 函数处理后允许的最大值。 |
| ``step`` | `number` | `0` | `value` 经过 `parse` 函数处理后的步进值。 |
| ``mark`` | `boolean` | `false` | 是否显示步进标记。 |
| ``parse`` | `function` | `val => val` | 传入值处理函数。 |
| ``format`` | `function` | `val => val` | 输出值处理函数。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
值。
默认值类型为 `number`,经过 `parse` 函数处理后值大小范围应在 `min` 和 `max` 之间。
当值为 `Array<number>` 形式时,组件则渲染多个滑块与值一一对应。
:::tip
当提供 `parse` 和 `format` 时,值可以为任意类型,但 `parse` 需要把传入值解析为 `number` 类型并返回;`format` 需要把传出值格式化成原始形式。`parse` 和 `format` 的实现只需要处理单值,组件内部会给多值的每一项分别依次调用这两个函数。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``track`` | 滑轨。默认内容:横线。 |
| ``tip-label`` | 浮动提示文本。默认内容:当前 `value` 值。 |
| ``thumb`` | [^slot-thumb] |
| ``tip`` | [^slot-tip] |
^^^slot-thumb
滑块。
默认内容:圆形按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `index` | `number` | 滑块索引。 |
| `focus` | `boolean` | 滑块是否聚焦。 |
| `hover` | `boolean` | 鼠标是否悬浮。 |
| `dragging` | `boolean` | 滑块是否正在被拖动。 |
+++
^^^
^^^slot-tip
浮动提示。
默认内容:内容为 `value` 的 Tooltip 组件。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `target` | `HTMLElement` | 滑块元素。 |
| `open` | `boolean` | 是否存在激活的滑块。 |
| `active-index` | `boolean` | 激活的滑块索引。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
修改后触发,回调参数为 `(value: *)`。`value` 为改变后经 `format` 函数处理过的新值。
^^^

View File

@@ -1,11 +0,0 @@
# Span <small>行内文本</small>
:::tip
`Span` 组件可配合 [`InputGroup`](./input-group)、[`Field`](./field) 或 [`Fieldset`](./fieldset) 等组件使用。
:::
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |

View File

@@ -1,91 +0,0 @@
# Steps <small>步骤</small>
## 示例
### 尺寸及方向
可选的 [`ui`](#props-ui) 属性值:`s` / `m` / `vertical` / `label-vertical`
[[ demo src="/demo/steps/default.vue" ]]
### 步骤状态
可以通过设置 [`steps`](#props-steps) 属性数据项的 `status` 自动值定义步骤状态,若步骤出错,可设置为 `error`
[[ demo src="/demo/steps/status.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``steps`` | `Array` | - | [^steps] |
| ``current`` | `number` | - | 当前步骤的索引值。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `vertical` | 纵向样式。 |
| `label-vertical` | 文案纵向样式。 |
+++
^^^
^^^steps
步骤数据源。类型为 `{ label, desc, to, status }`。
+++字段详情
| 名称 | 类型 | | 描述 |
| -- | -- | -- |
| `label` | `string` | 步骤标题。 |
| `desc` | `string` | 步骤描述。 |
| `to` | `string | Object` | 步骤链接。类型见 [`Link`](./link) 组件的 [`to`](./link#propss-to) 属性。 |
| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``index`` | 序号部分内容,默认显示从 `1` 开始的序号,已完成的步骤显示完成图标,出错的步骤显示出错图标。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
| ``label`` | 步骤标题部分内容,默认显示 `steps` 中项目的 `label` 字段。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
| ``desc`` | 步骤描述部分内容,默认显示 `steps` 中项目的 `desc` 字段。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
^^^slot-default
整个步骤项内容。
默认内容:序号/完成图标、步骤标题、描述等内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 步骤标题。同 [`steps`](#props-steps) 属性中项目的 `label` 字段。 |
| `desc` | `string` | 步骤描述。同 [`steps`](#props-steps) 属性中项目的 `desc` 字段。 |
| `to` | `string | Object` | 步骤链接。同 [`steps`](#props-steps) 属性中项目的 `to` 字段。 |
| `status` | `string` | 步骤状态。同 [`steps`](#props-steps) 属性中项目的 `status` 字段。 |
| `index` | `number` | 步骤索引值。 |
另外,`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 任意步骤被点击后触发,回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值,`event` 为相应的原生事件对象。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 已成功完成的步骤。 |
| ``error`` | 出错的步骤。 |

View File

@@ -1,76 +0,0 @@
# Switch <small>开关</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m`
[[ demo src="/demo/switch/size.vue" ]]
### 值设定
可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 来修改打开、关闭状态下 `v-model` 的值。
[[ demo src="/demo/switch/value.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``true-value`` | `*` | `true` | 打开状态对应的值。 |
| ``false-value`` | `*` | `false` | 关闭状态对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``loading`` | `boolean=` | `false` | 是否为加载中状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于打开状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 开关的描述文本,点击时会切换选择状态。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换打开状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否打开。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
打开状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外,`Switch` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。

View File

@@ -1,57 +0,0 @@
# Tab <small>标签</small>
:::tip
`Tab` 组件需要配合 [`Tabs`](./tabs) 组件使用。
:::
## 示例
见 [`Tabs` 示例](./tabs#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项卡文本。 |
| ``name`` | `string` | - | 选项卡名称。 |
| ``disabled`` | `boolean=` | `false` | 选项卡是否禁用。 |
| ``to`` | `string | Object` | - | [^to] |
| ``matches`` | `function(Route, Route): boolean` | - | [^matches] |
| ``native`` | `boolean` | `false` | 路由模式是否强制使用原生的 `<a>` 元素。 |
| ``removable`` | `boolean` | | 是否可删除。 |
| ``status`` | `string` | - | [^status] |
^^^to
选项卡路由信息。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。如果 `to` 存在,则 [`name`](#props-name) 属性将被忽略。
:::tip
如果使用了 Vue Router当前被激活的状态将与 `$route` 对象自动匹配,无需在 [`Tabs`](./tabs) 组件中手动控制 [`index`](./tabs#props-index) 或 [`active`](./tabs#props-active)。
:::
^^^
^^^matches
在使用了 Vue Router 且提供了 [`to`](#props-to) 属性后,用于自定义判断路由当前激活 `Tab` 的逻辑。参数列表为 `(current: Route, to: Route)`。`current` 与 `to` 参数均为 Vue Router 的 [`Route`](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7) 类型对象。默认使用上层 [`Tabs`](./tabs) 组件的 [`matches`](./tabs#props-matches) 逻辑。
^^^
^^^status
选项卡状态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `success` | 成功状态。 |
| `warning` | 警示状态。 |
| `info` | 普通信息状态。 |
| `error` | 错误状态。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。 |
| ``item`` | 标签选项卡内容,包括对应的按钮/链接。 |
| ``label`` | 标签选项卡文本。 |

View File

@@ -1,180 +0,0 @@
# Table <small>表格</small>
:::tip
`Table` 组件需要配合 [`Column`](./column) 组件使用。
:::
## 示例
### 内容密度
可选的 [`ui`](#props-ui) 尺寸属性值:`compact` / `loose`
[[ demo src="/demo/table/basic.vue" ]]
### 选择模式与排序
允许自定义唯一键、设定选择模式以及进行排序。
[[ demo src="/demo/table/advanced.vue" ]]
### 筛选
使用 `Column` 组件的 [`filter`](./column#slots-filter) 插槽来开启自定义筛选功能。
[[ demo src="/demo/table/filter.vue" ]]
### 内部滚动
允许启用内部滚动模式,以达到固定表头表底的效果。
[[ demo src="/demo/table/scrollable.vue" ]]
### 固定列
使用 `Table` 的 [`scroll`](#props-scroll) 属性及 `Column` 组件的 [`fixed`](./column#props-fixed) 属性来控制固定列的位置。
[[ demo src="/demo/table/fixed.vue" ]]
### 展开行
支持将带有子数据的行进行展开。
[[ demo src="/demo/table/expandable.vue" ]]
### 表头描述
使用 `Column` 组件的 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
[[ demo src="/demo/table/desc.vue" ]]
### 排序
使用 [`order`](#props-order) 属性和 [`order-by`](#props-order-by) 属性来指定表头上的排序状态。
监听 [`sort`](#events-sort) 事件来处理排序状态的变化。
设置 [`allowed-orders`](#props-allowed-orders) 属性来自定义允许的排序状态。
[[ demo src="/demo/table/order.vue" ]]
### 加载状态
使用 [`loading`](#props-loading) 属性来指定表格处于加载状态。
[[ demo src="/demo/table/loading.vue" ]]
### 截断提示
使用 `Column` 组件的 [`tooltip`](./column#props-tooltip) 属性来指定在内容截断时显示悬浮提示。
[[ demo src="/demo/table/tooltip.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``data`` | `Array<Object>` | - | 表格数据。 |
| ``key-field`` | `string` | - | 用于指定充当表格数据的键的列标志符。值对应 [`data`](#props-data) 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 [`key` 属性](https://cn.vuejs.org/v2/guide/list.html#key)输出。当 [`selectable`](#props-selectable) 属性为 `true` 时,也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项,此时值必须来自内部某个 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| ``selectable`` | `boolean` | `false` | 是否支持表格行的选择。 |
| ``select-mode`` | `string` | `'multiple'` | 选择模式,支持的值为 `single` / `multiple`,分别对应于单选/多选模式。 |
| ``selected`` | `Array<*>|*` | `[]` | [^selected] |
| ``expandable`` | `boolean` | `false` | 是否允许展开行。 |
| ``expanded`` | `Array<*>` | `[]` | [^expanded] |
| ``order`` | `string | boolean` | `false` | 排序顺序。为 `false` 时表示无序,为字符串值 `'asc'` / `'desc'` 时分别为升序/降序。 |
| ``order-by`` | `string` | - | 用于指定当前基于哪一列进行了排序,值必须来自内部某个 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| ``scroll`` | `number` | - | 指定滚动区域的最大高度,当超出此高度时,表格将进入固定表头和底部只允许数据区域滚动的模式。 |
| ``loading`` | `boolean` | `false` | 指定表格是否处于加载状态。 |
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
| ``bordered`` | `boolean` | `false` | 指定表格是否有边框。 |
| ``column-filter`` | `Array<string>` | - | 用于过滤表格的列,元素的值应该是列的 `key-field`,默认全部列都显示出来。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `compact` | 紧凑样式。 |
| `loose` | 宽松样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^selected
:::badges
`.sync`
:::
已选行。当 [`select-mode`](#props-select-mode) 属性为 `'multiple'` 时为已选行 [`key-field`](#props-key-field) 对应字段值的数组;为 `'single'` 时为已选行 [`key-field`](#props-key-field) 对应字段值。
^^^
^^^expanded
:::badges
`.sync`
:::
已展开行。为已展开行 [`key-field`](#props-key-field) 对应字段值的数组。
^^^
^^^allowed-orders
在表格层级指定列的排序范围。
+++值范围
| 值 | 描述 |
| -- | -- |
| `false` | 不排序。 |
| `'asc'` | 升序。 |
| `'desc'` | 降序。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于定义表格列,只能包含 `Column` 组件。 |
| ``no-data`` | 用于定义无数据时要展现的内容。 |
| ``foot`` | 表格脚部内容,整个区域将打通成为一个容器,不再保留分列。 |
| ``sub-row`` | [^slot-sub-row] |
^^^slot-sub-row
展开行后子行的内容。使用此插槽时,内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 `Column` 的 [`sub-row`](./column#slots-sub-row) 插槽内容。
作用域参数为 [`data`](#props-data) 内当前行数据中的所有字段,以及当前行对应索引值 `index`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``sort`` | [^event-sort] |
^^^event-select
切换已选项时触发。回调参数为 `(selected, item, selectedItems)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `boolean` | `true` 表示已选择,`false` 则表示取消选择。 |
| `item` | `Object` | 选择状态发生变化的 [`data`](#props-data) 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时,将返回第一条相关的 `data` 数据项。 |
| `selectedItems` | `Object<string, Object | Array>` | 当前所有已选项的信息,键为 [`key-field`](#props-key-field) 对应字段,值为对应的 `data` 数据项。当存在纵向合并单元格且以相应行作为键进行选择时,值为所有相关行数据项组成的数组。 |
+++
^^^
^^^event-sort
进行排序时触发的事件。回调参数为 `(field, order)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `field` | `string` | 基于哪一列进行排序。值来自对应 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| `order` | `string | boolean` | 同 [`order`](#props-order) 属性。 |
+++
^^^

View File

@@ -1,143 +0,0 @@
# Tabs <small>标签页</small>
:::tip
`Tabs` 组件需要配合 [`Tab`](./tab) 组件使用。
:::
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 尺寸属性值:`s` / `m` / `l`
[[ demo src="/demo/tabs/size.vue" ]]
### 样式
设置 `ui``simple` / `strong` 来分别启用简单样式、加强样式。
[[ demo src="/demo/tabs/style.vue" ]]
### 路由模式
设置 [`Tab`](./tab) 组件 [`to`](./tab#props-to) 属性来使用路由模式。
[[ demo src="/demo/tabs/route.vue" ]]
### 禁用状态
设置 [`Tab`](./tab) 组件 [`disabled`](./tab#props-disabled) 属性来使选项卡处于禁用状态。
[[ demo src="/demo/tabs/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
| ``addable`` | `boolean` | `false` | 是否可以增加标签。 |
| ``max`` | `number` | - | 可增加标签的上限值。 |
| ``tip`` | `string` | - | 提示文本。 |
| ``add-label`` | `string=` | - | “添加”按钮的文字内容。 |
| ``eager`` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容(并隐藏)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `simple` | 简单样式。 |
| `strong` | 加强样式。 |
+++
^^^
^^^active
:::badges
`.sync`
:::
表示当前哪个标签页处于激活状态。具体映射的值受[标签](./tab)的属性影响,优先级 `to` > `name`。
^^^
^^^matches
用于给内部的 [`Tab`](./tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性。
:::warning
当内部的 `Tab` 组件设置了 [`matches`](./tab#props-matches) 属性,将会覆盖在 `Tabs` 组件上的 [`matches`](#props-matches) 属性。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 允许直接内联 `Tab` 组件。无默认内容。 |
| ``panel`` | 选项卡下方面板区域。 |
| ``extra`` | 位于标签页右侧的扩展区域。 |
| ``tab-item`` | [^tab-item] |
| ``tab-label`` | 标签选项卡文本区域,默认内容为选项卡文本。作用域参数同 [`tab-item`](#slots-tab-item) 插槽,`attrs` / `activate` 除外。 |
^^^tab-item
标签选项卡区域,默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项卡文本。 |
| `name` | `string` | 选项卡名称。 |
| `disabled` | `boolean=` | 选项卡是否禁用。 |
| `to` | `string` | 选项卡路由信息。 |
| `active` | `boolean` | 选项卡是否是激活项。 |
| `index` | `number` | 选项卡位于列表中的索引值。 |
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
| `removable` | `boolean` | 是否可删除。 |
| `status` | `string` | 选项卡状态。 |
| `attrs` | `Object<string, string>` | 其它需要输出到选项卡元素上的 HTML 属性,例如 `role` / `aria-selected` / `aria-controls` 等。 |
| `activate` | `function(): void` | 激活当前选项卡的方法。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 切换时触发。回调参数为 `(tab: Object)``tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
| ``add`` | 点击添加按钮触发的事件,无回调参数。 |
| ``remove`` | 删除标签时触发的事件。回调参数为 `(tab: Object)``tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``tabs.matches`` | `function` | 见描述。 | [^config-matches] |
^^^config-matches
函数签名与 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性相同。默认值为:
```js
function (current, to) {
return current.fullPath === to.fullPath
}
```
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``add`` | 添加按钮。 |
| ``remove`` | 清除按钮。 |
| ``prev`` | 往左翻页按钮。 |
| ``next`` | 往右翻页按钮。 |
| ``success`` | 成功状态。 |
| ``warning`` | 警示状态。 |
| ``info`` | 普通信息状态。 |
| ``error`` | 错误状态。 |

View File

@@ -1,5 +0,0 @@
<template>
<div>
Tab content #1
</div>
</template>

View File

@@ -1,5 +0,0 @@
<template>
<div>
Tab content #1
</div>
</template>

View File

@@ -1,5 +0,0 @@
<template>
<div>
Tab content #2
</div>
</template>

View File

@@ -1,5 +0,0 @@
<template>
<div>
Tab content #3
</div>
</template>

View File

@@ -1,100 +0,0 @@
# Tag <small>标签</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/tag/size.vue" ]]
### 可选择
使用 [`selectable`](#props-selectable) 属性使标签可以切换选中状态。
[[ demo src="/demo/tag/selectable.vue" ]]
### 可移除
使用 [`removable`](#props-removable) 属性使标签可以被移除。
[[ demo src="/demo/tag/removable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string=` | `'default'` | [^type] |
| ``selectable`` | `boolean=` | `false` | 是否允许选择。 |
| ``selected`` | `boolean=` | `false` | [^selected] |
| ``removable`` | `boolean=` | `false` | 是否允许删除。 |
| ``removed`` | `boolean=` | `false` | [^removed] |
| ``disabled`` | `boolean=` | `false` | 是否禁用。 |
:::warning
[`selectable`](#props-selectable) 和 [`removable`](#props-removable) 属性不允许同时为 `true`。
:::
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸。 |
| `m` | 中内容尺寸。 |
| `reverse` | 反色样式。 |
| `bordered` | 带边框样式。 |
+++
^^^
^^^type
标签类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `default` | 默认标签。 |
| `info` | 信息提示标签。 |
| `success` | 成功标签。 |
| `warning` | 警告标签。 |
| `error` | 错误标签。 |
+++
^^^
^^^selected
:::badges
`.sync`
:::
是否已被选中。
^^^
^^^removed
:::badges
`.sync`
:::
是否已被删除。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 点击删除按钮时触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 删除。 |

View File

@@ -1,99 +0,0 @@
# Textarea <small>文本域</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/textarea/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使文本域处于只读状态。
[[ demo src="/demo/textarea/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使文本域处于禁用状态。
[[ demo src="/demo/textarea/disabled.vue" ]]
### 自动扩展
设置 [`autoresize`](#props-autoresize) 来使文本域处于自动扩展状态。
[[ demo src="/demo/textarea/autoresize.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | 文本域是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 文本域是否为只读状态。 |
| ``line-number`` | `boolean` | `false` | 是否显示行号。 |
| ``rows`` | `number | string` | - | 默认情况下文本域可视行数。 |
| ``placeholder`` | `string` | - | 输入占位符。 |
| ``composition`` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
| ``autoresize`` | `boolean` | `false` | 高度是否会被内容撑开。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``resizable`` | `boolean=` | 指定是否可以调节长宽。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
文本域的值。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 文本域的值。 |
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发,受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)``value` 为输入框的 `value` 值。
^^^
此外,`Textarea` 支持如下的原生事件:
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。

View File

@@ -1,124 +0,0 @@
# TimePicker <small>时间选择</small>
## 示例
### 三种模式
支持三种模式,分别是 `hour``minute``second`,可以通过 [`mode`](#props-mode) 属性来控制。
[[ demo src="/demo/time-picker/mode.vue" ]]
### 定制时间选项
支持定制时间选项,分别可以通过 [`hours`](#props-hours)、[`minutes`](#props-minutes) 和 [`seconds`](#props-seconds) 来定制对应的时间选项。
[[ demo src="/demo/time-picker/datasource.vue" ]]
### 范围限制
支持范围限制,可以通过 [`min`](#props-min) 和 [`max`](#props-max) 来分别设置最小值和最大值。
[[ demo src="/demo/time-picker/range.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``mode`` | `string` | `'second'` | 指定选择的粒度,分别精确到时(`hour`)、分(`minute`)、秒(`second`)。 |
| ``value`` | `string` | | [^prop-value] |
| ``placeholder`` | `string` | `timepicker.placeholder` | 未选择时的占位文本。 |
| ``hours`` | `Array<number>` | - | 小时选项,默认 0-23。 |
| ``minutes`` | `Array<number>` | - | 分钟选项,默认 0-59。 |
| ``seconds`` | `Array<number>` | - | 秒钟选项,默认 0-59。 |
| ``min`` | `string` | - | 最小值限制。 |
| ``max`` | `string` | - | 最大值限制。 |
| ``autofocus`` | `boolean` | `false` | 是否自动获得焦点。 |
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^prop-value
:::badges
`v-model`
:::
当前选中的值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉浮层是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``option`` | [^slot-option] |
^^^slot-option
下拉面板中的时间选项插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 用来显示的文字描述。 |
| `value` | `string` | 实际对应的值。 |
| `disabled` | `boolean=` | 是否禁用。 |
| `part` | `string` | 该选项是哪个部分,分别是 `hour` / `minute` / `second`。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``change`` | 若当前选中的值发生变化,在时间选择下拉面板关闭时会触发该事件,参数是当前选中值。 |
| ``toggle`` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
| ``clear`` | 清除当前选中的值。 |
^^^event-input
:::badges
`v-model`
:::
当手动输入或下拉面板中选值会触发该事件,参数是当前输入值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``timepicker.placeholder`` | `string` | `@@timepickerpicker.placeholder` | 未选择时的占位文本。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``clock`` | 时钟。 |
| ``clear`` | 清除内容。 |

View File

@@ -1,78 +0,0 @@
# Toast <small>消息提示</small>
## 示例
### 类型
`Toast` 有四种类型,分别是 `info``success``warning``error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
[[ demo src="/demo/toast/default.vue" ]]
### 命令式调用
可使用 `veui/plugins/toast` 模块加载 [`toast` 插件](../plugins/toast)进行命令式调用。
[[ demo src="/demo/toast/plugin.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``open`` | `boolean` | `false` | [^open] |
| ``type`` | `string` | `'success'` | [^type] |
| ``title`` | `string` | - | 消息标题。 |
| ``message`` | `string` | - | 消息内容。 |
| ``duration`` | `number` | `toast.duration` | 消息展示时间毫秒数,超过此事件则消息提示自动关闭。 |
| ``closable`` | `boolean` | - | 是否有关闭按钮。 |
^^^open
:::badges
`.sync`
:::
是否显示消息提示。
^^^
^^^type
警告框类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `warning` | 警告样式。 |
| `error` | 错误样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。默认显示 [`message`](#props-message) 属性的内容。 |
| ``title`` | 标题区。默认显示 [`title`](#props-title) 属性的内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``close`` | 消息自动关闭后触发。 |
| ``ready`` | 组件挂载之后会触发该事件。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``toast.duration`` | `number` | `3000` | 消息默认展示时间毫秒数。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``info`` | 普通信息。 |
| ``success`` | 成功状态。 |
| ``warning`` | 警告状态。 |
| ``error`` | 错误状态。 |

View File

@@ -1,95 +0,0 @@
# Tooltip <small>浮层提示</small>
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值:`alt`
[[ demo src="/demo/tooltip/style.vue" ]]
### 定位
使用 [`position`](#props-position) 属性来指定浮层显示的位置。
[[ demo src="/demo/tooltip/position.vue" ]]
### 触发时机
使用 [`trigger`](#props-trigger) 属性来指定显示/隐藏浮层的时机。
[[ demo src="/demo/tooltip/trigger.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 [`target`](./overlay#props-target) 属性。 |
| ``position`` | `string` | `'top'` | [^position] |
| ``aim-center`` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
| ``trigger`` | `string` | `'hover'` | [^trigger] |
| ``interactive`` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
| ``autofocus`` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `reverse` | 反色样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示浮层提示。
^^^
^^^position
指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定,可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
^^^
^^^trigger
触发浮层提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数,并支持使用 <code>&#0096;${open}-${close}&#0096;</code> 语法分别指定触发打开/关闭提示的时机。另外,当 `trigger` 指定为 `custom` 时,将不会使用 `v-outside` 功能自动进行处理。
例如:`click` 表示点击 `target` 后打开,在空白处点击时关闭;`hover-mousedown` 表示光标移入 `target` 后打开,在空白处按下鼠标时关闭。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 浮层提示内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | [^event-toggle] |
^^^event-toggle
:::badges
`v-model`
:::
浮层提示展开状态切换时触发,回调参数为 `(open: boolean)`。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``tooltip.hideDelay`` | `number` | `300` | 见 [`hide-delay`](#props-hide-delay) 属性。 |

View File

@@ -1,213 +0,0 @@
# Transfer <small>穿梭框</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`
[[ demo src="/demo/transfer/size.vue" ]]
### 无搜索
[[ demo src="/demo/transfer/no-search.vue" ]]
### 自定义搜索
[[ demo src="/demo/transfer/custom-search.vue" ]]
### 扁平输出树形数据
[[ demo src="/demo/transfer/flat.vue" ]]
### 选中值的合并模式
设置 [`merge-checked`](#props-merge-checked) 来指定选中值的合并模式。
[[ demo src="/demo/transfer/merge-checked.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``searchable`` | `boolean=` | `true` | 是否允许搜索。 |
| ``filter`` | `function=` | 见描述 | [^filter] |
| ``selected`` | `Array=` | `[]` | [^selected] |
| ``candidate-placeholder`` | `string=` | - | 待选区内搜索框的占位文本。 |
| ``selected-placeholder`` | `string=` | - | 已选区内搜索框的占位文本。 |
| ``candidate-title`` | `string=` | - | “待选项”标题的文字内容。 |
| ``selected-title`` | `string=` | - | “已选项”标题的文字内容。 |
| ``selected-show-mode`` | `string=` | `'tree'` | [^selected-show-mode] |
| ``keys`` | `string | function` | `'value'` | [^keys] |
| ``merge-checked`` | `string=` | `keep-all` | [^merge-checked] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^datasource
数据源数组,每个项目类型为 `{label, value, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 项目的文字描述。 |
| `value` | `string` | 项目对应的值。 |
| `disabled` | `boolean=` | 项目是否被禁用。 |
| `children` | `Array<Object>=` | 项目的子项目数组,数组项类型同 `datasource` 数组项。 |
+++
^^^
^^^filter
搜索过滤函数,签名为 `function(from, keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `from` | `string` | 搜索来源,可选枚举值:`'candidate'`、`'selected'`。`'candidate'` 表示是待选列表触发的搜索,`'selected'` 表示是已选列表触发的搜索。 |
| `keyword` | `string` | 搜索关键词。 |
| `item` | `Object` | 当前遍历到的数据项。 |
| `index` | `number` | 当前数据项在兄弟项目中的索引。 |
| `datasource` | `Array<Object>` | 与 [`datasource`](#props-datasource) 属性一致。 |
+++
+++默认值
```js
import { includes } from 'lodash'
function (keyword, { label }) {
return includes(label, keyword)
}
```
+++
^^^
^^^selected
:::badges
`v-model`
:::
当前选中的值,是 `datasource` 中选中项的 `value` 集合(受 [`keys`](#props-keys) 属性影响)。
^^^
^^^selected-show-mode
选中框中选中项的显示方式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `tree` | 以树形结构展示。 |
| `flat` | 以扁平方式展示,数据展开成一维数组。 |
+++
^^^
^^^keys
自定义获取 `datasource` 中每一项的 `value` 值(具备唯一性)。可以用字符串的形式直接指定 `datasource` 中的哪个属性作为 `value`,也可以传递一个函数更加灵活地去生成 `value` 值。
若类型为 `function`,参数为 `(item: Object)``item` 是 `datasource` 中的一个节点的属性,返回值是添加到 `selected` 中的值。
^^^
^^^merge-checked
选中值的合并策略。当某个节点下的所有子节点都被选中时,可以选择只保留父节点、只保留子节点或都保留。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `keep-all` | 父子节点都会在选中值中。 |
| `upwards` | 尽可能往祖先方向合并选中值。 |
| `downwards` | 尽可能往后代方向合并选中值。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``candidate`` | 整个待选区。 |
| ``candidate-head`` | [^candidate-head] |
| ``selected-head`` | [^selected-head] |
| ``candidate-title`` | 待选区内顶部标题文本区域。作用域参数与 `candidate-head` 一致。 |
| ``selected-title`` | 已选区内顶部标题文本区域。作用域参数与 `selected-head` 一致。 |
| ``candidate-no-data`` | 数据源没数据时显示的内容。 |
| ``selected-no-data`` | 没有已选项时显示的内容。 |
| ``candidate-item`` | [^candidate-item] |
| ``selected-item`` | [^selected-item] |
| ``candidate-item-label`` | 待选区内每一项的文本区域。作用域参数与 `candidate-item` 一致。 |
| ``selected-item-label`` | 已选区内每一项的文本区域。当 `selected-show-mode` 为 `'tree'` 时作用域参数与 `selected-item` 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容,此时作用域参数与 `candidate-item` 一致。 |
^^^candidate-head
待选区内顶部标题区域。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `count` | `number` | 待选项的数量。 |
+++
^^^
^^^selected-head
已选区内顶部标题区域。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `count` | `number` | 已选项的数量。 |
+++
^^^
^^^candidate-item
待选区内的每一项内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 项目的文本描述。 |
| `value` | `string` | 项目的值。 |
| `disabled` | `boolean=` | 项目是否被禁用。 |
| `children` | `Array<Object>=` | 项目的子项目数组,数组项类型同 `datasource` 数组项。 |
| `index` | `number` | 当前项目在同层级兄弟项中的索引。 |
| `depth` | `number` | 当前项目在树结构中的深度。 |
+++
^^^
^^^selected-item
已选区内的每一项内容。
+++作用域参数
如果 `Transfer` 组件的 `selected-show-mode` 为 `'tree'`,则作用域参数与 `candidate-item` 一致;如果 `selected-show-mode` 为 `'flat'`,则作用域参数为:
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `items` | `Array<Object>` | 包含从树形结构的根项目到叶子项目的路径。数组项类型与 `datasource` 项目相同。 |
| `index` | `number` | 当前项目在展开数组中的索引。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | 切换选择时触发。回调参数为 `(selected: Array<string>)`。`selected` 为已选项 `value` 字段集合。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``checked`` | 已选状态。 |
| ``select`` | 待选择。 |
| ``remove`` | 移除。 |
| ``expand`` | 收起状态,点击后展开。 |
| ``collapse`` | 展开状态,点击后收起。 |
| ``separator`` | 当 `selected-show-mode` 为 `'flat'` 时层级间的分隔符。 |

View File

@@ -1,181 +0,0 @@
# Tree <small>树形控件</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值:`m` / `s`
[[ demo src="/demo/tree/size.vue" ]]
### 控制展开、选中状态
[[ demo src="/demo/tree/default.vue" ]]
### 自定义内容
[[ demo src="/demo/tree/custom-item.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``expanded`` | `Array` | `[]` | [^expanded] |
| ``checkable`` | `boolean` | `false` | 子节点是否可勾选。 |
| ``checked`` | `Array` | `[]` | [^checked] |
| ``selectable`` | `boolean` | `false` | 点击整个节点区域时是否选中该节点。 |
| ``selected`` | `string` | - | [^selected] |
| ``merge-checked`` | `string` | `keep-all` | [^merge-checked] |
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。[`datasource`](#props-datasource) 节点中的非叶子节点若有部分子孙节点被选中,则为半选状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^datasource
数据源数组,每个项目类型为 `{label, value, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `datasource` 数组项。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
指定当前展开的节点,是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
^^^
^^^checked
:::badges
`v-model`
:::
当前被勾选的叶节点的值,是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
^^^
^^^selected
:::badges
`.sync`
:::
当前被选中的叶节点的值,是一个对应于 `datasource` 中节点数据中 `value` 属性的数组。
^^^
^^^merge-checked
选中值的合并策略。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `keep-all` | 父子节点都会在选中值中。 |
| `upwards` | 尽可能往祖先方向合并选中值。 |
| `downwards` | 尽可能往后代方向合并选中值。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^item] |
| ``item-label`` | 每个节点的文本区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
| ``item-before`` | 每个节点的文本之前的区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
| ``item-after`` | 每个节点的文本之后的区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
^^^item
每个节点的整个内容区域。
+++参数属性
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文本描述。 |
| `value` | `string` | 节点的值。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `datasource` 数组项。 |
| `index` | `number` | 当前数据节点在共父节点层级的索引。 |
| `depth` | `number` | 当前数据节点在树种的深度。 |
+++
另外,`datasource` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | [^click] |
| ``expand`` | [^expand] |
| ``collapse`` | [^collapse] |
| ``check`` | [^check] |
^^^click
点击节点触发,回调参数为 `(item, parents, index, depth)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
| `parents` | `Array<Object>` | 从根节点到当前节点父节点的路径。数组项类型与 `datasource` 项目相同。 |
| `index` | `number` | 当前节点在自己所属层级的索引。 |
| `depth` | `number` | 当前节点在树形层级中的深度。 |
+++
^^^
^^^expand
节点展开时触发。回调参数为 `(item, index, depth)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
| `index` | `number` | 当前节点在自己所属层级的索引。 |
| `depth` | `number` | 当前节点在树形层级中的深度。 |
+++
^^^
^^^collapse
点击收起图标或者整个节点时触发,由 [`item-click`](#props-item-click) 属性决定,回调参数为 `(item, index, depth)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `Object` | 节点数据。数组项类型与 `datasource` 项目相同。 |
| `index` | `number` | 当前节点在自己所属层级的索引。 |
| `depth` | `number` | 当前节点在树形层级中的深度。 |
+++
^^^
^^^check
:::badges
`v-model`
:::
勾选状态变化后触发,回调参数为 `(value: Array)`。`value` 为当前勾选中的叶节点的 `value` 字段组成的数组(受 [`keys`](#props-keys) 属性影响)。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 收起状态,点击后展开。 |
| ``collapse`` | 展开状态,点击后收起。 |

View File

@@ -1,385 +0,0 @@
# Uploader <small>上传</small>
## 示例
### 文件上传
设置 [`type`](#props-type) 的值为 `file` 进入文件上传模式。
[[ demo src="/demo/uploader/file.vue" ]]
### 图片上传
设置 [`type`](#props-type) 的值为 `image` 进入图片上传模式。
[[ demo src="/demo/uploader/image.vue" ]]
### 媒体上传
设置 [`type`](#props-type) 的值为 `media` 进入媒体上传模式。
[[ demo src="/demo/uploader/media.vue" ]]
### 前端校验
图片格式、大小、数量校验以及使用 [`validator`](#props-validator) 自定义校验。
[[ demo src="/demo/uploader/validate.vue" ]]
### 自定义配置
使用 [`upload`](#props-upload) 自定义上传过程,使用 [`controls`](#props-controls) 配置浮层操作项。
[[ demo src="/demo/uploader/custom.vue" ]]
### 拖拽排序
设置 [`sortable`](#props-sortable) 属性来指定上传项目之间可以拖拽排序。
[[ demo src="/demo/uploader/sortable.vue" ]]
### 已上传项自定义操作
设置 [`controls`](#props-controls) 属性来指定悬浮到每个上传项时的操作选项。
[[ demo src="/demo/uploader/controls.vue" ]]
### 上传入口自定义操作
设置 [`entries`](#props-entries) 属性来指定悬浮到继续上传项目时的操作选项。
[[ demo src="/demo/uploader/entries.vue" ]]
## API
### 属性
| 属性 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string` | `'file'` | [^type] |
| ``value`` | `Object | Array<Object>` | - | [^value] |
| ``key-field`` | `string` | `'key'` | 用于指定文件对象的唯一 key作为数据变化时正确处理文件列表顺序的依据。 |
| ``name`` | `string` | `'file'` | 原生 `<input>` 元素的 `name`。 |
| ``action`` | `string` | - | 上传地址。 |
| ``headers`` | `Object` | `uploader.headers` | 需要加入 [HTTP 请求头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 的内容。可进行[全局统一配置](#configs-uploader-headers)。 |
| ``with-credentials`` | `boolean` | `true` | 同 `XMLHttpRequest` 的 [`withCredentials`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) 属性。 |
| ``request-mode`` | `string` | `uploader.requestMode` | [^request-mode] |
| ``iframe-mode`` | `string` | `uploader.iframeMode` | [^iframe-mode] |
| ``callback-namespace`` | `string` | `uploader.callbackNamespace` | 在 `request-mode` 的值为 `'iframe'` 并且 `iframe-mode` 的值为 `'callback'` 的模式下,指定回调函数的命名空间,放在 `window` 对象下。可进行[全局统一配置](#configs-uploader-callbackNamespace)。 |
| ``data-type``| `string` | `'json'` | [^data-type] |
| ``convert-response`` | `uploader.convertResponse` | - | [^convert-response] |
| ``accept`` | `string` | - | 与原生 `<input>` 元素 的 [`accept`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%8F%AF%E6%8E%A5%E5%8F%97%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) 属性相同,在浏览器的文件类型筛选后再加一层校验。对于类似 `application/msword` 这样的 MIME type 与扩展名对不上的情形跳过校验。 |
| ``max-count`` | `number` | - | 最大文件数量。 |
| ``max-size`` | `number | string` | - | 单个文件的最大大小,如果是 `number`,单位是 `byte`;如果是 `string`,支持在数字后面添加单位,单位可以是 `b` / `kb` / `mb` / `gb` / `tb`。 |
| ``validator`` | `function(Object): Object | Promise<Object>` | - | [^validator] |
| ``payload`` | `Object` | - | 附带在上传请求中的额外参数。 |
| ``autoupload`` | `boolean` | `true` | 指定是否在选完文件后立刻上传。 |
| ``order`` | `string` | `'asc'` | [^order] |
| ``picker-position`` | `string` | `'after'` | [^picker-position] |
| ``upload`` | `function(Object, Object): function` | - | [^upload] |
| ``controls`` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
| ``multiple`` | `boolean` | `false` | 上传多个文件,当 `max-count` 是 `1``multiple` 是 `true`,那么 `value` 也是数组。 |
| ``entries`` | `function(Array<Object>): Array<Object>` | - | [^entries] |
| ``after-pick`` | `function(Array<Object>): void` | - | 选择文件之后的回调。 |
| ``sortable`` | `boolean` | `false` | 文件列表是否可以排序。 |
| ``preview-options`` | `object` | `{wrap: true, indicator: 'number'}` | 传递给 [`Lightbox`](./lightbox) 的预览选项。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^type
上传类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `file` | 文件上传。 |
| `image` | 图片上传。 |
| `media` | 媒体上传(支持视频和图片)。 |
| `video` | 视频上传。 |
+++
^^^
^^^value
当 `multiple` 为 `true`,返回文件对象的数组。另外,当 `max-count` 被设置为大于 `1` 的值,则会视为开启了 `multiple`。
每个文件对象的类型为 `{name: string, src: string, ...}`,以及在 `convert-response` 中自定义添加的字段。
^^^
^^^request-mode
指定异步上传方式。可进行[全局统一配置](#configs-uploader-request-mode)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xhr` | 通过 `XMLHttpRequest` 上传。 |
| `iframe` | 通过 `<iframe>` 上传。 |
| `custom` | 自定义上传过程,通过 prop `upload` 方法上传。 |
+++
^^^
^^^iframe-mode
指定在 [`request-mode`](#props-request-mode) 的值为 `iframe` 的模式下,上传成功后的回调方式。可进行[全局统一配置](#configs-uploader-request-mode)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `postmessage` | 通过 `PostMessage` 回调。 |
| `callback` | 通过调用 `window` 的 [`callback-namespace`](#props-callback-namespace) 里的回调函数回调。 |
+++
^^^
^^^data-type
如果回调的值是文本, 指明文本的解析方式。如果回调的数据是 `Object`,则 `data-type` 可以为空。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `json` | 回调的文本是 JSON。 |
| `text` | 回调的文本是普通文本。 |
+++
^^^
^^^convert-response
将回调数据转换成需要的格式的函数,使组件能够判断上传是否成功以便显示相应结果,参数是回调数据。返回结果的格式要求如下:
+++字段详情
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `success` | `boolean` | 表示上传是否成功。 |
| `name` | `string=` | 文件的名称。`success` 为 `true` 时必须。 |
| `src` | `string=` | 文件的地址。`success` 为 `true` 时必须。 |
| `message` | `string=` | 上传失败时的出错信息。`success` 为 `false` 时必须。 |
还可以给返回结果加上其它自定义的属性,这些自定义属性会被包含在 [`value`](#props-value) 以及 [`change`](#events-change)、[`success`](#events-success)、[`failure`](#events-failure)、[`remove`](#events-remove)、[`progress`](#events-progress) 事件的回调参数 `file` 中 。可进行[全局统一配置](#configs-uploader-convert-response)。
+++
^^^
^^^order
上传文件的显示顺序,按照开始上传的时间排序。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `asc` | 升序排列。 |
| `desc` | 降序排列。 |
+++
^^^
^^^picker-position
图片上传模式下,上传按钮在图片队列中的位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `before` | 上传按钮始终在队列最前面。 |
| `after` | 上传按钮始终在队列最后面。 |
+++
^^^
^^^validator
自定义校验逻辑,参数为原生 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象。返回结果的格式要求如下:
+++字段详情
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `valid` | `boolean` | 是否通过校验。 |
| `message` | `string=` | `valid` 为 `false` 时的错误提示信息。 |
支持异步校验,返回值可以是一个 resolve 上述返回结果的 `Promise`。
^^^
^^^upload
在 `request-mode` 的值是 `'custom'` 的情况下自定义上传过程,第一个参数为原生 [`File`](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 对象,第二个参数为包含与上传过程相关的回调函数的对象,具体字段如下:
+++字段详情
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `onload` | `function` | 上传完成的回调函数,参数内容与 [`convert-response`](#props-convert-response) 属性返回值相同。 |
| `onprogress` | `function` | 上传进度发生变化的回调函数,参数为 `{ loaded: number, total: number }``loaded` 为已上传部分字节数,`total` 为文件总字节数。 |
| `oncancel` | `function` | 自定义上传主动取消时对组件进行的回调,无参数。 |
| `onerror` | `function` | 上传出错的回调函数,参数为 `{ message: string }``message` 为错误提示信息。 |
如果 `upload` 返回一个函数,该函数将在用户操作取消或上传组件销毁时被调用,用来中断自定义上传过程。
^^^
^^^controls
图片上传模式下,用来自定义配置图片遮罩浮层上的操作项,参数为 `(file: Object, defaultControls: Array<Object>)``file` 为文件相关信息,`defaultControls` 为包含默认的操作项的数组。可根据文件状态的不同,返回包含不同的操作项的数组。每个操作项的具体字段如下:
+++字段详情
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `name` | `string` | 操作项的名称,点击该按钮后会抛出同名的事件,事件的回调参数为 `(file: Object, index: number)` `file` 为触发事件的文件对象,`index` 为文件在列表中的序号。 |
| `label` | `string` | 操作项的文字描述。 |
| `icon` | `string` | 操作项使用的图标。 |
| `disabled` | `boolean=` | 操作项是否被禁用。如果该字段为空,则该操作项的禁用状态跟随组件整体的禁用状态。 |
^^^
^^^entries
控制每个上传文件的操作项,如删除,预览等,会传递默认的操作项数组作为参数,返回实际生效的操作项数组。操作项对象参考 [`controls`](#props-controls) 属性的字段详情。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``button-label`` | [^button-label] |
| ``upload`` | 图片上传模式下,上传按钮的区域。 |
| ``desc`` | 对文件数量、格式、大小等的提示内容。 |
| ``file`` | [^file] |
| ``file-before`` | 单个文件内容之前的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
| ``file-after`` | 单个文件内容之后的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
| ``uploading`` | 图片上传模式下,上传中的单个图片的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
| ``failure`` | 图片上传模式下,上传失败的单个图片的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
^^^button-label
上传按钮里的内容。
默认内容:文件上传为提示选择文件,图片上传则为上传图片图标。
^^^
^^^file
单个文件的区域,用来定制文件内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `name` | `string` | 文件的名称。 |
| `src` | `string` | 文件的地址。 |
| `status` | `string` | 文件的状态。`'success'` 表示上传成功;`'uploading'` 表示正在上传;`'failure'` 表示上传失败。 |
| `index` | `number` | 文件在列表中的序号。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``remove`` | [^event-remove] |
| ``success`` | 上传成功时触发,回调参数与 [`remove`](#events-remove) 事件的回调参数相同。 |
| ``failure`` | 上传失败时触发,回调参数与 [`remove`](#events-remove) 事件的回调参数相同。 |
| ``invalid`` | [^event-invalid] |
| ``statuschange`` | [^event-statuschange] |
| ``progress`` | [^event-progress] |
^^^event-change
只在上传成功、删除文件时触发,回调参数为 `(value)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `Object | Array<Object>` | 组件的 `value` 的值。 |
+++
^^^
^^^event-remove
删除文件时触发,回调参数为 `(file, index)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `file` | `Object` | 被删除的文件。 |
| `index` | `number` | 被删除的文件的序号。 |
`file` 字段详情
| 字段 | 类型 | 描述 |
| -- | -- | -- |
| `name` | `string` | 文件名称。 |
| `src` | `string` | 文件地址。 |
| `status` | `string` | 上传状态。`'success'` 表示上传成功;`'uploading'` 表示正在上传;`'failure'` 表示上传失败。 |
同时也包含在 [`convert-response`](#props-convert-response) 中添加的自定义属性。
+++
^^^
^^^event-invalid
文件校验失败时触发,回调参数为 `(validity: Object)`。
+++参数字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `file` | `Object` | 没有通过校验的文件信息,与 [`remove`](#events-remove) 事件的回调参数中的 `file` 相同。如果校验失败的原因是选择的文件数量超过最大数量 `max-count` 限制,则这个字段为空。 |
| `errors` | `Array<Object>` | 包含该文件所有校验错误信息的数组,数组的每一项是包含校验失败信息的对象。 |
+++
+++校验失败信息字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `type` | `string` | 校验失败的类型,类型枚举值可从 `Uploader.errors` 对象获取,如 `Uploader.errors.SIZE_INVALID`。 |
| `value` | `number | string | Object` | 没有通过校验的值,根据 `type` 的不同有不同的类型。 |
| `message` | `string` | 检验失败的提示信息。 |
+++
+++校验失败类型与参数关系
| 类型 | 描述 | `value` 类型 | `value` 描述 |
| -- | -- | -- | -- |
| `TYPE_INVALID` | 文件类型校验失败。 | `string` | 文件名称。 |
| `SIZE_INVALID` | 文件大小校验失败。 | `number` | 文件大小字节数。 |
| `TOO_MANY_FILES` | 选择的文件数超过 `max-count` 限制。 | `number` | 已选择的文件数。 |
| `CUSTOM_INVALID` | `validator` 自定义校验失败。 | `Object` | 文件对象,字段同 [`remove`](#events-remove) 事件回调参数。 |
+++
^^^
^^^event-statuschange
在所有文件总的状态发生变化时触发,回调参数为组件整体的状态 `(status: string)`。
+++值详情
| 值 | 描述 |
| -- | -- |
| `empty` | 没有选择任何文件上传。 |
| `uploading` | 有任一文件正在上传中。 |
| `failure` | 有任一文件上传失败。 |
| `success` | 所有文件上传成功。 |
+++
^^^
^^^event-progress
在 `request-mode` 的值为 `'xhr'` 的情况下,在上传进度发生变化时触发,回调参数为 `(file, index, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `file` | `Object` | 与 [`remove`](#events-remove) 事件的回调参数中的 `file` 相同。 |
| `index` | `number` | 正在上传的文件的序号。 |
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/progress) | 上传进度原生事件。 |
+++
^^^
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``uploader.requestMode`` | `string` | `'xhr'` | 参见 [`request-mode`](#props-request-mode) 属性。 |
| ``uploader.iframeMode`` | `string` | `'postmessage'` | 参见 [`iframe-mode`](#props-iframe-mode) 属性。 |
| ``uploader.callbackNamespace`` | `string` | `'veuiUploadResult'` | 参见 [`callback-namespace`](#props-callback-namespace) 属性。 |
| ``uploader.headers`` | `Object` | - | 参见 [`headers`](#props-headers) 属性。 |
| ``uploader.convertResponse`` | `function(Object): Object` | - | 参见 [`convert-response`](#props-convert-response) 属性。 |
| ``uploader.pickerPosition`` | `string` | `'after'` | 参见 [`picker-position`](#props-picker-position) 属性。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``upload`` | 上传文件。 |
| ``add-image`` | 上传图片。 |
| ``clear`` | 删除。 |
| ``success`` | 上传成功。 |
| ``failure`` | 上传失败。 |
| ``loading`` | 上传中。 |
| ``file`` | 已上传文件。 |
| ``alert`` | 校验失败警告。 |
| ``preview`` | 预览图片。 |