initial
This commit is contained in:
@@ -1,91 +0,0 @@
|
||||
# 自定义校验规则
|
||||
|
||||
对于多值校验，`Form` 组件的 [`validators`](../components/form#props-validators) 属性提供了比较完善的功能来实现自定义校验。对于单值校验，`Field` 组件内置了 7 种常见规则，具体参考其 [`rule`](../components/field#props-rule) 属性。如果无法覆盖需求，`VEUI` 校验规则模块允许你添加自定义规则。
|
||||
|
||||
## 示例
|
||||
|
||||
```js
|
||||
import ruleManager from 'veui/managers/rule'
|
||||
ruleManager.addRule('range', {
|
||||
validate (value, ruleValue) {
|
||||
// 仅实现大小校验部分
|
||||
let range = value.split('-')
|
||||
return +range[0] >= ruleValue.floor && +range[1] <= ruleValue.ceil
|
||||
},
|
||||
message: '范围值必须在限定区间内',
|
||||
priority: 100
|
||||
})
|
||||
```
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<veui-field
|
||||
:rules="[{
|
||||
triggers: 'change'
|
||||
name: 'range',
|
||||
value: {
|
||||
ceil: 100,
|
||||
floor: 50
|
||||
}
|
||||
}]"
|
||||
...
|
||||
>...</veui-field>
|
||||
</template>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑，`value` 为 `Field` 需要校验的值，`ruleValue` 可选，根据规则需要添加，表示规则的限定值。 |
|
||||
| `message` | `function | string` | [^message] |
|
||||
| `priority` | `number` | [^priority] |
|
||||
|
||||
^^^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` 类型。
|
||||
:::
|
||||
^^^
|
||||
|
||||
^^^priority
|
||||
规则优先级。数值低优先级高。
|
||||
|
||||
+++目前内置的优先级
|
||||
| 名称 | 优先级 |
|
||||
| -- | -- | -- |
|
||||
| `required` | `0` |
|
||||
| `numeric` | `10` |
|
||||
| `pattern` | `50` |
|
||||
| `maxLength` | `100` |
|
||||
| `minLength` | `100` |
|
||||
| `max` | `200` |
|
||||
| `min` | `200` |
|
||||
+++
|
||||
@@ -1,61 +0,0 @@
|
||||
# 全局配置
|
||||
|
||||
VEUI 中很多组件都定义了全局配置项，允许开发者在使用时全局配置某个组件的行为细节。
|
||||
|
||||
例如，`Uploader` 组件可以统一配置上传模式，用户可以根据项目前后端接口、需要支持浏览器版本的具体情况选择使用 iframe 回调方式还是 XHR2 方式传递数据，也可以统一配置远端数据格式的转换函数。
|
||||
|
||||
VEUI 全局配置项可以通过 `veui/managers/config` 模块进行覆盖：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set('uploader.requestMode', 'iframe')
|
||||
config.set('uploader.convertResponse', ({ code, error, result }) => {
|
||||
/**
|
||||
* Transform from
|
||||
*
|
||||
* {
|
||||
* code: 0,
|
||||
* error: '...',
|
||||
* result: {
|
||||
* url: '...'
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* to
|
||||
*
|
||||
* {
|
||||
* success: true,
|
||||
* message: '...',
|
||||
* src: '...'
|
||||
* }
|
||||
*/
|
||||
return {
|
||||
success: code === 0,
|
||||
src: error ? null : result.url,
|
||||
message: error || null
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
如果需要一次修改同一个组件的多项设置，可以使用如下写法：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set({
|
||||
requestMode: 'iframe',
|
||||
convertResponse: data => data
|
||||
}, 'uploader')
|
||||
```
|
||||
|
||||
`config.set()` 方法参数可为如下形式：
|
||||
|
||||
* `(key: string, value: *, namespace: string)`
|
||||
* `(values: Object<{key: string, value: *}>, namespace: string)`
|
||||
|
||||
当提供了 `namespace` 参数时，最终生成的配置项键名为 <code>\`${namespace}.${key}\`</code>。
|
||||
|
||||
除此以外，还提供了相同参数列表的 `config.defaults()` 方法，区别在于当需要在配置项中写入的键值已经存在，则不会覆盖。
|
||||
|
||||
每个组件、指令等支持的全局配置请查看对应组件、指令的详情页。
|
||||
@@ -1,124 +0,0 @@
|
||||
# 浮层管理
|
||||
|
||||
在 VEUI 中，有大量组件使用到了浮层功能：
|
||||
|
||||
* 各种类型的弹框：[对话框](../components/dialog)、[警告弹框](../components/alert-box)等；
|
||||
* [下拉选择](../components/select)；
|
||||
* ……
|
||||
|
||||
针对这些组件，我们抽离了具备如下功能的浮层模块：
|
||||
|
||||
* 能够浮于页面上所有普通元素之上；
|
||||
* 能够进行层叠顺序管理；
|
||||
* 能够基于指定元素定位。
|
||||
|
||||
## 层叠覆盖
|
||||
|
||||
为了避免浮层被上层 `overflow: hidden` 的元素意外遮盖，我们将浮层根元素直接置于 `<body>` 下统一管理。
|
||||
|
||||
在[浮层组件](../components/overlay)中，`.veui-overlay-box` 对应了浮层根元素，该元素在组件初始化的时候，会被放置到 `<body>` 之下，组件销毁的时候，会被移除掉。
|
||||
|
||||
## 层叠顺序管理
|
||||
|
||||
在将浮层根元素置于 `<body>` 下后，原有的层级嵌套关系会丢失，同时也无法通过原生的层叠上下文机制来控制浮层的层叠顺序。比如：
|
||||
|
||||
* 某个对话框组件 A 上有一个下拉选择组件 B，那么 B 组件浮层应该位于 A 组件浮层之上。
|
||||
* 警告框浮层应该位于普通对话框浮层之上。
|
||||
|
||||
基于上述限制，浮层模块实现了自己的层叠顺序管理机制。整个浮层层级嵌套关系，是通过一棵树来表达的：
|
||||
|
||||
<img class="preview hero" src="/images/development/advanced/overlay-tree.png">
|
||||
|
||||
树中每一个蓝色节点都对应关联到具体的[浮层组件](../components/overlay)实例。针对上图，树的构造顺序可以是：
|
||||
|
||||
1. 弹出“对话框 1”，创建一个“对话框 1”节点，根据节点权重信息创建一个分组，然后将分组挂在 root 节点之下。
|
||||
2. 弹出“对话框 2”，创建一个“对话框 2”节点，发现已经存在相同权重的分组，就直接将“对话框 2”节点放置在该分组的末尾位置。
|
||||
3. 在“对话框 2”中实例化一个“下拉选择 1”组件实例，由于“对话框 2”组件实例是“下拉选择 1”组件实例的父级，因此对应的浮层节点也应当具备父子关系，因此按照类似于“步骤 1”的顺序在“对话框 2”节点下生成分组及“下拉选择 1”节点。
|
||||
4. 此时由于程序运行出现了故障，弹出了“警告弹框 1”，由于“警告弹框”类型的组件相对于“对话框”组件具备更高的层级权重，因此在 root 之下新建了一个靠右的分组，并将生成的“警告弹框 1”节点置于分组末尾。
|
||||
|
||||
有了树之后，就会按照深度优先的遍历顺序生成每个节点的 `z-index` 值。
|
||||
|
||||
其中，基准 `z-index` 值可以通过全局配置对象进行配置：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set('overlay.baseZIndex', 200)
|
||||
```
|
||||
|
||||
:::warning
|
||||
必须在[浮层组件](../components/overlay)引入之前设置基准 `z-index`，不然不会生效。
|
||||
:::
|
||||
|
||||
可以针对组件类型，甚至组件实例粒度设置层叠优先级，层叠优先级值越大，最终生成的 `z-index` 值就越大。具有相同层叠优先级的同级组件实例，越靠后实例化的组件，生成的 `z-index` 值越大。
|
||||
|
||||
浮层组件、对话框组件、弹框组件等提供了 `priority` 属性，用于自定义组件实例的层叠优先级：
|
||||
|
||||
```html
|
||||
<veui-dialog :priority="300"/>
|
||||
```
|
||||
|
||||
一些比较特殊的组件，会提供基于组件类型粒度的层叠优先级配置：
|
||||
|
||||
| 组件 | 配置字段 | 默认值 | 修改配置示例 |
|
||||
| -- | -- | -- | -- |
|
||||
| 警告弹框 | `alertbox.priority` | `100` | [^alert-box] |
|
||||
| 确认弹框 | `confirmbox.priority` | `100` | [^confirm-box] |
|
||||
| 输入弹框 | `promptbox.priority` | `100` | [^prompt-box] |
|
||||
|
||||
^^^alert-box
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set('alertbox.priority', 100)
|
||||
```
|
||||
^^^
|
||||
|
||||
^^^confirm-box
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set('confirmbox.priority', 100)
|
||||
```
|
||||
^^^
|
||||
|
||||
^^^prompt-box
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.set('promptbox.priority', 100)
|
||||
```
|
||||
^^^
|
||||
|
||||
总结起来，确定某个浮层系组件实例的层叠优先级的逻辑流程为：
|
||||
|
||||
* 如果能够设置组件实例级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
|
||||
* 如果能够设置组件类型级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
|
||||
* 使用默认的层叠优先级值：`1`。
|
||||
|
||||
## 定位
|
||||
|
||||
VEUI 中，浮层支持两种定位方式：
|
||||
|
||||
* 在页面范围内，以坐标值的形式进行定位；
|
||||
* 相对于某个元素，指定偏移和变换规则进行定位。
|
||||
|
||||
以坐标方式定位时，需要自己写 CSS 进行控制（浮层模块内部只会生成浮层根元素的 `z-index` 值）。
|
||||
|
||||
相对元素定位时，可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Popper.js](https://popper.js.org/docs/v1/) 实现，因此完整的配置项可以参考 [Popper.js 官网](https://popper.js.org/docs/v1/#popperdefaults--codeobjectcode)。
|
||||
|
||||
## 样式
|
||||
|
||||
由于浮层根元素被手动放置到 `<body>` 元素之下了，要设置浮层内容的样式，就需要给浮层根元素指定 `class`。所有浮层系组件都支持 `overlay-class` 属性，通过该属性为浮层根元素设置 `class`：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<veui-dialog overlay-class="my-dialog-overlay"/>
|
||||
<template>
|
||||
|
||||
<style>
|
||||
.my-dialg-overlay {
|
||||
/* 自定义浮层样式 */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -1,157 +0,0 @@
|
||||
# 主题
|
||||
|
||||
VEUI 的组件和主题包是完全解耦的。组件库中不含有任何样式代码，每个组件的样式都需要主题包中对应的样式文件来提供。
|
||||
|
||||
为了方便在按需引入的同时不需要手动引入每个组件的样式代码，我们提供了 `veui-loader` 来完成通过配置自动将依赖的样式文件注入组件，详情请参考 `veui-loader` 的[相关介绍](../getting-started/veui-loader)。
|
||||
|
||||
## 创建自定义主题包
|
||||
|
||||
veui-loader 为 VEUI 注入依赖时，同时支持注入 script 类型及 style 类型的模块。所以主题包中可以为每个组件提供这两种类型的主题配置。
|
||||
|
||||
### 自定义样式
|
||||
|
||||
:::warning
|
||||
注意，主题包样式对 VEUI 组件的 DOM 结构会有依赖。
|
||||
:::
|
||||
|
||||
为每个组件提供完整的样式，可以使用任何预处理语言。每个组件具体提供的类名及选择器可以参考 `veui-theme-dls` 中的实现。
|
||||
|
||||
```less
|
||||
.veui-button {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
VEUI 的 `Icon` 组件封装了 [Vue-Awesome](https://justineo.github.io/vue-awesome/demo/) 来输出内联 SVG 图标，无法直接在样式代码中指定，需要通过 script 模块进行注册。每个组件都定义了语义明确的图标接口，我们需要做的只是在全局配置中为组件注入相应的图标名称映射并引入对应的图标模块：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
import '../icons/angle-up-small'
|
||||
import '../icons/angle-down-small'
|
||||
|
||||
config.defaults({
|
||||
icons: {
|
||||
expand: 'angle-down-small',
|
||||
collapse: 'angle-up-small'
|
||||
}
|
||||
}, 'select')
|
||||
```
|
||||
|
||||
除了 `veui-theme-dls` 自带的图标外，目前可以使用的图标包还有：
|
||||
|
||||
* [`vue-awesome/icons`](https://justineo.github.io/vue-awesome/demo/)：Vue-Awesome 自带 [FontAwesome](https://fontawesome.com/) 图标包
|
||||
* [`vue-awesome-material-icons/icons`](https://justineo.github.io/vue-awesome-material-icons/demo/)：同样基于 Vue-Awesome 的 [Material Icons](https://material.io/tools/icons) 图标包
|
||||
|
||||
### 预设样式及自定义配置
|
||||
|
||||
VEUI 中各个组件的可切换的预设样式是通过为主题包提供可扩展的 `ui` 配置实现的。
|
||||
|
||||
新增一个预设样式 `foo` 只需要在样式文件中添加 `[ui~="foo"]` 对应的样式并在使用组件时添加对应的 `ui="foo"` 声明即可完成：
|
||||
|
||||
```less
|
||||
.veui-select {
|
||||
/* ... */
|
||||
|
||||
&[ui~="foo"] {
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<veui-select ui="foo">...</veui-select>
|
||||
```
|
||||
|
||||
一个组件也可以同时应用多个预设样式：
|
||||
|
||||
```html
|
||||
<veui-select ui="foo bar">...</veui-select>
|
||||
```
|
||||
|
||||
但如果我们想将预设样式定义得更完善一些，比如 `foo` 与 `bar` 是组件的两种不可同时使用的预设样式怎么办呢？比如 `small` 和 `large` 样式都会自定义组件的尺寸，是互斥的，我们就需要通过在全局配置中为组件注入更详细的 `ui` 配置来实现。
|
||||
|
||||
`ui` 字段下每个属性名都是需要声明的预设样式名称，其值的类型为：`{ values, boolean, inherit }`。
|
||||
|
||||
字段详情：
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `values` | `Array<string>` | - | 预设 `ui` 属性的可选值。 |
|
||||
| `boolean` | `boolean` | `false` | 预设 `ui` 属性是否为布尔型。 |
|
||||
| `inherit` | `boolean` | `false` | 预设 `ui` 属性值是否会被子组件继承。 |
|
||||
|
||||
以 `NumberInput` 组件为例：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.defaults({
|
||||
ui: {
|
||||
size: {
|
||||
values: ['xs', 's', 'm'],
|
||||
default: 'm',
|
||||
inherit: true
|
||||
},
|
||||
style: {
|
||||
values: ['normal', 'strong'],
|
||||
default: 'normal'
|
||||
}
|
||||
}
|
||||
}, 'select')
|
||||
```
|
||||
|
||||
在上面这个例子中，我们定义了两个 `ui` 属性：`size` 和 `style`。它们都是枚举类型，其中 `size` 值可被子组件继承。最终调用 `Select` 组件时，可以这样启用预设样式：
|
||||
|
||||
```html
|
||||
<veui-select ui="strong s">...</veui-select>
|
||||
```
|
||||
|
||||
当然，我们也可以完全不定义 `ui` 属性的详情，这时 VEUI 会将用户书写的 `ui` 属性原样输出，不会进行去重、同属性的属性值冲突检测、继承等特殊处理。
|
||||
|
||||
:::warning
|
||||
由于 `ui` 属性最后会将值序列化为空格分隔的字符串输出到 DOM 元素上，所以各个属性的值不能冲突。
|
||||
:::
|
||||
|
||||
### 指定组件内部组件的预设样式
|
||||
|
||||
有一些组件由多个其它组件组合而成，此时我们可能会需要全局指定内部特定部件的预设样式。比如在 `veui-theme-dls` 中，`Dialog` 中的取消按钮默认采用默认样式，而如果在其它主题中我们可能会想重置为 `link` 样式。此时可以使用全局配置修改组件的 `parts` 映射。
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
config.defaults({
|
||||
parts: {
|
||||
ok: 'primary',
|
||||
cancel: 'link'
|
||||
}
|
||||
}, 'select')
|
||||
```
|
||||
|
||||
如果希望部件的 `ui` 属性值可以根据声明/继承的值动态计算得出，也可以直接使用计算函数：
|
||||
|
||||
```js
|
||||
import config from 'veui/managers/config'
|
||||
|
||||
const SIZE_MAPPING = {
|
||||
xs: 's',
|
||||
s: 's',
|
||||
m: 's',
|
||||
l: 'm'
|
||||
}
|
||||
|
||||
config.defaults({
|
||||
parts: {
|
||||
item: ({ size }) => SIZE_MAPPING[size]
|
||||
}
|
||||
}, 'select')
|
||||
```
|
||||
|
||||
上面的例子中，组件内部件 `item` 的 `ui` 属性将在 `size` 属性的基础上进行一次映射。
|
||||
|
||||
## 主题包列表
|
||||
|
||||
* [veui-theme-dls](https://github.com/ecomfe/veui/tree/dev/packages/veui-theme-dls)：基于 Light DLS 的 VEUI 2.x 主题
|
||||
* [veui-theme-blue](https://github.com/ecomfe/veui-theme-blue)：基于 Theme Blue 的 VEUI 2.x 主题
|
||||
* [veui-theme-spectre](https://justineo.github.io/veui-theme-spectre/demo/)：基于 Spectre.css 的 VEUI 1.x 主题
|
||||
@@ -1,394 +0,0 @@
|
||||
<template>
|
||||
<article
|
||||
class="content post"
|
||||
:class="{ 'filter-version': compareValid }"
|
||||
>
|
||||
<h1 data-md>
|
||||
升级日志
|
||||
</h1>
|
||||
<veui-form
|
||||
style="--dls-field-label-width: calc(4em + 2px); /* WTF Safari? */"
|
||||
ui="s"
|
||||
class="form"
|
||||
>
|
||||
<veui-field
|
||||
ui="s"
|
||||
label="变更类型"
|
||||
>
|
||||
<veui-checkbox-group
|
||||
v-model="types"
|
||||
class="types"
|
||||
:items="allTypes"
|
||||
>
|
||||
<template #item="{ label, emoji }">
|
||||
<span class="emoji">{{ emoji }}</span> {{ label }}
|
||||
</template>
|
||||
</veui-checkbox-group>
|
||||
</veui-field>
|
||||
<veui-field
|
||||
ui="s"
|
||||
label="功能筛选"
|
||||
>
|
||||
<veui-select
|
||||
v-model="tag"
|
||||
searchable
|
||||
clearable
|
||||
:options="allTags"
|
||||
placeholder="根据组件/指令/插件/模块等进行过滤……"
|
||||
/>
|
||||
</veui-field>
|
||||
<veui-fieldset
|
||||
ui="s"
|
||||
label="版本对比"
|
||||
>
|
||||
<veui-field>
|
||||
<veui-checkbox
|
||||
v-model="compare"
|
||||
class="compare-toggle"
|
||||
>
|
||||
开启
|
||||
</veui-checkbox>
|
||||
</veui-field>
|
||||
<template v-if="compare">
|
||||
<veui-field>
|
||||
<veui-select
|
||||
v-model="from"
|
||||
class="version"
|
||||
:options="allVersions"
|
||||
searchable
|
||||
clearable
|
||||
placeholder="选择起始版本……"
|
||||
/>
|
||||
</veui-field>
|
||||
→
|
||||
<veui-field>
|
||||
<veui-select
|
||||
v-model="to"
|
||||
class="version"
|
||||
:options="allVersions"
|
||||
searchable
|
||||
clearable
|
||||
placeholder="选择目标版本……"
|
||||
/>
|
||||
</veui-field>
|
||||
</template>
|
||||
</veui-fieldset>
|
||||
</veui-form>
|
||||
<section
|
||||
v-for="{ version, codeName, date, changeset } of pagedChangelog"
|
||||
:key="version"
|
||||
class="version-item"
|
||||
data-md
|
||||
>
|
||||
<h2
|
||||
:id="getHash(version)"
|
||||
:class="{
|
||||
major: isMajor(version),
|
||||
minor: isMinor(version),
|
||||
}"
|
||||
>
|
||||
<nuxt-link
|
||||
:to="`#${getHash(version)}`"
|
||||
>
|
||||
{{ version }}<small v-if="codeName">{{ codeName }}</small><time
|
||||
v-if="date"
|
||||
:datetime="date"
|
||||
>{{ date }}</time>
|
||||
</nuxt-link>
|
||||
</h2>
|
||||
<ul class="changeset">
|
||||
<li
|
||||
v-for="({ type, tags, content }, index) of changeset"
|
||||
:key="index"
|
||||
class="change"
|
||||
:class="type"
|
||||
>
|
||||
<span
|
||||
class="emoji"
|
||||
:title="getTypeLabel(type)"
|
||||
>{{
|
||||
getTypeEmoji(type)
|
||||
}}</span>
|
||||
<div v-html="content"/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section
|
||||
v-if="pagedChangelog.length === 0"
|
||||
class="not-found"
|
||||
@click="updateShrugger"
|
||||
>
|
||||
<span class="emoji">{{ shrugger }} </span>
|
||||
<p>没有符合条件的变更记录。</p>
|
||||
</section>
|
||||
<section class="pagination">
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:page-size="pageSize"
|
||||
:total="filteredChangelog.length"
|
||||
@redirect="val => page = val"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox, Pagination } from 'veui'
|
||||
import changelog from '../assets/data/changelog.json'
|
||||
|
||||
const allTypes = [
|
||||
{ label: '非兼容性变更', value: 'breaking', emoji: '⚠️' },
|
||||
{ label: '主要变更', value: 'feature', emoji: '💡' },
|
||||
{ label: '问题修复', value: 'bugfix', emoji: '🐞' },
|
||||
{ label: '实验性功能', value: 'experimental', emoji: '🧪' }
|
||||
]
|
||||
const typeMap = allTypes.reduce((map, { label, value, emoji }) => {
|
||||
map[value] = { label, emoji }
|
||||
return map
|
||||
}, {})
|
||||
|
||||
const allVersions = changelog.map(({ version }) => ({ label: version, value: version }))
|
||||
const allTags = [
|
||||
...new Set(changelog.map(({ changeset }) => changeset.map(({ tags }) => tags).flat()).flat())
|
||||
]
|
||||
.sort()
|
||||
.map(tag => ({ label: tag, value: tag }))
|
||||
|
||||
function isMajor (version) {
|
||||
return /^\d+\.0.0$/.test(version)
|
||||
}
|
||||
|
||||
function isMinor (version) {
|
||||
return /^\d+\.(?:[1-9]|\d{2,}).0$/.test(version)
|
||||
}
|
||||
|
||||
function getShrugger () {
|
||||
const candidates = ['🤷🏻♀️', '🤷🏼♀️', '🤷🏽♀️', '🤷🏾♀️', '🤷🏿♀️', '🤷🏻♂️', '🤷🏼♂️', '🤷🏽♂️', '🤷🏾♂️', '🤷🏿♂️']
|
||||
return candidates[Math.floor(Math.random() * candidates.length)]
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'one-changelog',
|
||||
layout: 'default',
|
||||
components: {
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-fieldset': Fieldset,
|
||||
'veui-checkbox-group': CheckboxGroup,
|
||||
'veui-select': Select,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-pagination': Pagination
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changelog,
|
||||
allTypes,
|
||||
types: allTypes.map(({ value }) => value),
|
||||
allVersions,
|
||||
allTags,
|
||||
compare: false,
|
||||
tag: null,
|
||||
from: null,
|
||||
to: allVersions[0].value,
|
||||
shrugger: getShrugger(),
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
compareValid () {
|
||||
return this.from && this.to
|
||||
},
|
||||
filteredChangelog () {
|
||||
const { changelog, tag, from, to } = this
|
||||
|
||||
let result = cloneDeep(changelog)
|
||||
|
||||
if (from && to) {
|
||||
const fromIndex = result.findIndex(({ version }) => version === from)
|
||||
const toIndex = result.findIndex(({ version }) => version === to)
|
||||
result = result.slice(toIndex, fromIndex)
|
||||
}
|
||||
|
||||
result.forEach((versionLog) => {
|
||||
const { changeset } = versionLog
|
||||
versionLog.changeset = changeset
|
||||
.filter(({ type, tags }) => this.types.includes(type) && (!tag || tags.includes(tag)))
|
||||
})
|
||||
|
||||
return result.filter(({ changeset }) => changeset.length !== 0)
|
||||
},
|
||||
pagedChangelog () {
|
||||
const { page, pageSize, filteredChangelog } = this
|
||||
return filteredChangelog.slice((page - 1) * pageSize, page * pageSize)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
compare (val) {
|
||||
if (!val) {
|
||||
this.from = null
|
||||
this.to = allVersions[0].value
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
['from', 'to', 'compare', 'tag', 'types'].forEach((key) => {
|
||||
this.$watch(key, this.updateShrugger)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
isMajor,
|
||||
isMinor,
|
||||
getTypeEmoji (type) {
|
||||
return typeMap[type].emoji
|
||||
},
|
||||
getTypeLabel (type) {
|
||||
return typeMap[type].label
|
||||
},
|
||||
updateShrugger () {
|
||||
this.shrugger = getShrugger()
|
||||
},
|
||||
getHash (version) {
|
||||
return `v${version.replace(/\./g, '-')}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.emoji
|
||||
font-family "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Android Emoji", EmojiSymbols
|
||||
|
||||
.compare-toggle
|
||||
margin-right 8px
|
||||
|
||||
.version
|
||||
width 160px
|
||||
margin 0 8px
|
||||
|
||||
.veui-field
|
||||
--dls-field-label-width inherit
|
||||
|
||||
.form
|
||||
& >>> .veui-field
|
||||
margin-bottom 12px
|
||||
|
||||
& .veui-field
|
||||
margin-bottom 0
|
||||
|
||||
& >>> .veui-field .veui-field-no-label
|
||||
margin-bottom 0
|
||||
|
||||
.version-item
|
||||
position relative
|
||||
|
||||
&::before
|
||||
content ""
|
||||
position absolute
|
||||
top -2px
|
||||
bottom -2px
|
||||
left -12px
|
||||
width 3px
|
||||
background-color #0052cc
|
||||
border-radius 1px
|
||||
opacity 0
|
||||
transform-origin 50% 0
|
||||
|
||||
&[data-target]::before
|
||||
animation line-enter 6s ease 1 both
|
||||
|
||||
h2
|
||||
display flex
|
||||
align-items center
|
||||
font-size 20px
|
||||
margin 1.2em 0 0.6em
|
||||
|
||||
&.minor
|
||||
font-size 24px
|
||||
|
||||
&.major
|
||||
font-size 28px
|
||||
|
||||
&.minor
|
||||
&.major
|
||||
&::before
|
||||
content "§"
|
||||
|
||||
a
|
||||
display inline-flex
|
||||
align-items center
|
||||
color #333 !important
|
||||
|
||||
small
|
||||
time
|
||||
display inline-flex
|
||||
align-items center
|
||||
|
||||
small
|
||||
font-size 14px
|
||||
|
||||
&::before
|
||||
content "·"
|
||||
font-size 20px
|
||||
margin 0 8px
|
||||
|
||||
time
|
||||
font-size 12px
|
||||
color #999
|
||||
|
||||
&::before
|
||||
content "/"
|
||||
font-size 10px
|
||||
margin 0 8px
|
||||
color #ccc
|
||||
|
||||
.changeset
|
||||
list-style-type none
|
||||
padding-left 0
|
||||
|
||||
.change
|
||||
display flex
|
||||
|
||||
.emoji
|
||||
flex none
|
||||
margin-right 8px
|
||||
cursor help
|
||||
|
||||
& >>> p
|
||||
margin-top 0
|
||||
|
||||
&:only-child
|
||||
margin 0
|
||||
|
||||
.not-found
|
||||
display inline-flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
margin 32px
|
||||
color #ababab
|
||||
font-size 28px
|
||||
cursor pointer
|
||||
user-select none
|
||||
|
||||
.emoji
|
||||
font-size 64px
|
||||
opacity 0.75
|
||||
|
||||
p
|
||||
margin 0 -0.75em 0 0
|
||||
|
||||
.pagination
|
||||
margin-top 36px
|
||||
|
||||
@keyframes line-enter
|
||||
0%
|
||||
100%
|
||||
transform scaleY(0)
|
||||
opacity 0
|
||||
|
||||
5%
|
||||
95%
|
||||
transform none
|
||||
opacity 1
|
||||
</style>
|
||||
@@ -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>` | 当前所有被展开的折叠面板标识。 |
|
||||
+++
|
||||
^^^
|
||||
@@ -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`` | 错误状态。 |
|
||||
@@ -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`` | 关闭。 |
|
||||
@@ -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) 插槽。
|
||||
^^^
|
||||
@@ -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`。
|
||||
^^^
|
||||
@@ -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`` | 需要显示徽标的目标内容。 |
|
||||
@@ -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`` | 分隔符。 |
|
||||
@@ -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` | 当前点击条目的索引。 |
|
||||
+++
|
||||
^^^
|
||||
@@ -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><value></var> | [^value-var-event] |
|
||||
|
||||
^^^click-event
|
||||
点击后触发，回调参数为 `(item, index)`。
|
||||
|
||||
+++参数详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `item` | `{label: string, value: *=, ...}` | 数据项。 |
|
||||
| `index` | `number` | 按钮在 `items` 中的序号。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^value-var-event
|
||||
如果对应数据项有字符串类型的 `value` 字段，则在点击后触发名为 `value` 值的事件，参数与 [`click`](#events-click) 事件相同。
|
||||
^^^
|
||||
@@ -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`` | 加载状态。 |
|
||||
@@ -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`` | 展开下拉菜单。 |
|
||||
@@ -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`` | 下一页。 |
|
||||
@@ -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`` | 分隔符。 |
|
||||
@@ -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`` | 已选标志。 |
|
||||
@@ -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` 字段组成的数组。
|
||||
^^^
|
||||
@@ -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`` | 半选状态。 |
|
||||
@@ -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`` | 展开状态，点击后收起。 |
|
||||
@@ -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` 为过滤器的当前值。 |
|
||||
@@ -1,22 +0,0 @@
|
||||
# ConfigProvider <small>配置器</small>
|
||||
|
||||
## 示例
|
||||
|
||||
### 配置占位符
|
||||
|
||||
[[ demo src="/demo/config-provider/select.vue" ]]
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| ``value`` | `Object` | - | 向其后代组件提供的配置值。 |
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 需要接收配置的内容，其中 VEUI 的组件会响应对应的配置值。 |
|
||||
@@ -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`` | 弹框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
|
||||
28
one/docs/components/conponent.md
Normal file
28
one/docs/components/conponent.md
Normal 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`` | 布局内容 |
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
# Content <small>布局内容</small>
|
||||
|
||||
:::tip
|
||||
`Content` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Sidebar`](./sidebar) 组件使用。
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
见 [`Layout` 示例](./layout#示例)。
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 布局内容。 |
|
||||
@@ -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`` | 清除内容。 |
|
||||
@@ -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><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||
| ``afteropen`` | 对话框打开后触发。对话框内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
|
||||
| ``afterclose`` | 对话框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
|
||||
|
||||
### 图标
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``close`` | 关闭。 |
|
||||
@@ -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><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||
| ``afteropen`` | 抽屉打开后触发。抽屉内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
|
||||
| ``afterclose`` | 抽屉关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
|
||||
@@ -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`` | 收起浮层。 |
|
||||
@@ -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><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
|
||||
@@ -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) 属性。 |
|
||||
@@ -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) 属性的文本值。 |
|
||||
@@ -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` 保持一致。 |
|
||||
+++
|
||||
^^^
|
||||
@@ -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`` | 布局底部的内容。 |
|
||||
@@ -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) 事件中去。
|
||||
@@ -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`` | 栅格栏内容。 |
|
||||
@@ -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` |
|
||||
@@ -1,17 +0,0 @@
|
||||
# GridRow <small>栅格行</small>
|
||||
|
||||
:::tip
|
||||
`GridRow` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridColumn`](./grid-column) 组件使用。
|
||||
:::
|
||||
|
||||
## 示例
|
||||
|
||||
见 [`GridContainer` 示例](./grid-container#示例)。
|
||||
|
||||
## API
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 栅格行内容，直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |
|
||||
@@ -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`` | 布局头部的内容。 |
|
||||
@@ -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) 属性。 |
|
||||
@@ -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`` | 内容区，用来内联输入组件。 |
|
||||
@@ -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`` | 清除按钮。 |
|
||||
@@ -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`` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |
|
||||
@@ -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` 组件。 |
|
||||
@@ -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`` | 下一页。 |
|
||||
@@ -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 的实现。 |
|
||||
@@ -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`` | 加载中提示文字。 |
|
||||
@@ -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`` | 辅助消息。 |
|
||||
@@ -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`` | 更多。 |
|
||||
@@ -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`` | 减少按钮。 |
|
||||
@@ -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`` | 可展开的项目。 |
|
||||
@@ -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`` | 已选状态。 |
|
||||
@@ -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)。 |
|
||||
@@ -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]` | 每页个数候选项。 |
|
||||
|
||||
@@ -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>`${open}-${close}`</code> 语法分别指定触发打开/关闭提示的时机。另外，当 `trigger` 指定为 `custom` 时，将不会使用 `v-outside` 功能自动进行处理。
|
||||
|
||||
例如：`click` 表示点击 `target` 后打开，在空白处点击时关闭；`hover-mousedown` 表示光标移入 `target` 后打开，在空白处按下鼠标时关闭。
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 气泡提示内容。 |
|
||||
| ``title`` | 用于自定义标题内容。 |
|
||||
| ``foot`` | 用于自定义底部操作区。 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``ok`` | 点击“确定”按钮时触发。 |
|
||||
| ``cancel`` | 点击“取消”按钮时触发。 |
|
||||
@@ -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) 属性。 |
|
||||
+++
|
||||
^^^
|
||||
@@ -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` 为输入框当前值。
|
||||
^^^
|
||||
@@ -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` 字段的值。
|
||||
^^^
|
||||
@@ -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` 字段的值。
|
||||
^^^
|
||||
@@ -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`。
|
||||
|
||||
回调参数均为相应的原生事件对象。
|
||||
@@ -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) 属性相同。
|
||||
^^^
|
||||
@@ -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>`veui-schedule-legend-${value}`</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:00–18:00 与周六的 0:00–3:00 和 18:00–21: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>`${from}:00–${to + 1}:00`</code>；选择全天的显示为“全天”；小于 3 小时无内容。
|
||||
|
||||
+++作用域参数
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `from` | `number` | 时段开始的小时。 |
|
||||
| `to` | `number` | 时段结束的小时。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^slot-tooltip
|
||||
光标移入每个小时格子的悬浮提示内容。
|
||||
|
||||
默认内容：当前小时格子的时间范围 <code>`${hour}:00–${hour + 1}:00`</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
|
||||
`@@` 开头的值表示引用多语言配置中的相应字段。
|
||||
:::
|
||||
^^^
|
||||
@@ -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`` | 搜索。 |
|
||||
@@ -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`` | 收起浮层。 |
|
||||
@@ -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`` | 布局侧边栏的内容。 |
|
||||
@@ -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` 数据。 |
|
||||
@@ -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` 函数处理过的新值。
|
||||
^^^
|
||||
@@ -1,11 +0,0 @@
|
||||
# Span <small>行内文本</small>
|
||||
|
||||
:::tip
|
||||
`Span` 组件可配合 [`InputGroup`](./input-group)、[`Field`](./field) 或 [`Fieldset`](./fieldset) 等组件使用。
|
||||
:::
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |
|
||||
@@ -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`` | 出错的步骤。 |
|
||||
@@ -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`。
|
||||
|
||||
回调参数均为相应的原生事件对象。
|
||||
@@ -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`` | 标签选项卡文本。 |
|
||||
@@ -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) 属性。 |
|
||||
+++
|
||||
^^^
|
||||
@@ -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`` | 错误状态。 |
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Tab content #1
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Tab content #1
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Tab content #2
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
Tab content #3
|
||||
</div>
|
||||
</template>
|
||||
@@ -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`` | 删除。 |
|
||||
@@ -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`。
|
||||
|
||||
回调函数的参数都为原生事件对象。
|
||||
@@ -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`` | 清除内容。 |
|
||||
|
||||
@@ -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`` | 错误状态。 |
|
||||
@@ -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>`${open}-${close}`</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) 属性。 |
|
||||
@@ -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'` 时层级间的分隔符。 |
|
||||
@@ -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`` | 展开状态，点击后收起。 |
|
||||
@@ -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`` | 预览图片。 |
|
||||
@@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-accordion multiple>
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :toggle-position="position">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-accordion>
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
<section>
|
||||
<veui-accordion ui="s">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :ui="realVariants">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'basic', value: 'basic' },
|
||||
{ label: 'strong', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="open1 = true">
|
||||
title prop
|
||||
</veui-button>
|
||||
<veui-button @click="open2 = true">
|
||||
title slot
|
||||
</veui-button>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="open1"
|
||||
title="Success"
|
||||
@ok="ok"
|
||||
>
|
||||
<p>Saved successfully!</p>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="open2"
|
||||
@ok="ok"
|
||||
>
|
||||
<template #title>
|
||||
Success
|
||||
<veui-icon name="info-circle"/>
|
||||
</template>
|
||||
<p>Saved successfully!</p>
|
||||
</veui-alert-box>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AlertBox, Button, Icon, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/info-circle'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert-box': AlertBox,
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open1: false,
|
||||
open2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
toast.info('Confirmed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-button @click="successOpen = true">
|
||||
Success
|
||||
</veui-button>
|
||||
<veui-button @click="errorOpen = true">
|
||||
Error
|
||||
</veui-button>
|
||||
<veui-button @click="infoOpen = true">
|
||||
Info
|
||||
</veui-button>
|
||||
|
||||
<veui-alert-box
|
||||
type="success"
|
||||
:open.sync="successOpen"
|
||||
>
|
||||
<template #title>
|
||||
Success
|
||||
</template>
|
||||
<div>Saved successfully!</div>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="error"
|
||||
:open.sync="errorOpen"
|
||||
>
|
||||
<template #title>
|
||||
Error
|
||||
</template>
|
||||
<div>Not enough disk space!</div>
|
||||
</veui-alert-box>
|
||||
|
||||
<veui-alert-box
|
||||
type="info"
|
||||
:open.sync="infoOpen"
|
||||
>
|
||||
<template #title>
|
||||
Sytstem
|
||||
</template>
|
||||
<div>The total available storage is 5MB.</div>
|
||||
</veui-alert-box>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AlertBox, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert-box': AlertBox,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
successOpen: false,
|
||||
errorOpen: false,
|
||||
infoOpen: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
ui="strong"
|
||||
message="恭喜你，你的请求已成功处理"
|
||||
closable
|
||||
>
|
||||
<template #title>
|
||||
恭喜你
|
||||
</template>
|
||||
<template #extra>
|
||||
<veui-button ui="text">
|
||||
查看详情
|
||||
</veui-button>
|
||||
</template>
|
||||
恭喜你，你的请求已成功处理
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="info"
|
||||
close-label="Got it"
|
||||
closable
|
||||
:open.sync="open"
|
||||
:message="messages"
|
||||
/>
|
||||
<section v-if="!open">
|
||||
<veui-button @click="open = true">
|
||||
Open
|
||||
</veui-button>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: true,
|
||||
messages: [
|
||||
'Component data must be a function.',
|
||||
'Prop definitions should be as detailed as possible.',
|
||||
'Always use key with v-for.',
|
||||
'Never use v-if on the same element as v-for.'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
可以指定 [`closable`](#props-closable) 属性为 `true` 来允许提示被用户主动关闭，还可以通过指定 [`close-label`](#props-close-label) 属性来将关闭按钮以文字形式展现。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Set the [`closable`](#props-closable) prop to `true` to allow the alert message to be closed by users. You can also use the [`close-label`](#props-close-label) prop to make the close button shown as specified text.
|
||||
</docs>
|
||||
@@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
title="消息标题"
|
||||
>
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="success"
|
||||
>
|
||||
Your profile has been updated.
|
||||
<template #title>
|
||||
消息标题
|
||||
</template>
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息标题写在 `title` 插槽中，也可以通过 `title` 属性进行指定。
|
||||
</docs>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert type="success">
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert type="info">
|
||||
Press any key to continue...
|
||||
</veui-alert>
|
||||
<veui-alert type="warning">
|
||||
<code>slot-scope</code> is deprecated. Use <code>v-slot</code> instead.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="error"
|
||||
message="Uncaught SyntaxError: Unexpected token +"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息内容写在默认插槽中，也可以通过 [`message`](#props-message) 属性进行指定。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
Messages can either be specified in the default slot, or via the [`message`](#props-message) prop.
|
||||
</docs>
|
||||
@@ -1,108 +0,0 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
@@ -1,143 +0,0 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div class="target-offset-line"/>
|
||||
<div class="sticky-offset-line"/>
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<h3>吸附锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
target-offset="20px"
|
||||
sticky-offset="30px"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused1',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled1',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso1'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.sticky-offset-line,
|
||||
.target-offset-line {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 180px;
|
||||
border-top: 1px solid red;
|
||||
|
||||
&::after {
|
||||
content: "targetOffset（切换于此）";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-offset-line {
|
||||
top: 30px;
|
||||
left: 250px;
|
||||
|
||||
&::after {
|
||||
content: "stickyOffset（吸附于此）";
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，黑实线标记锚点项顶部。
|
||||
|
||||
当黑实线和 `tagetOffset` 线重合触发激活。
|
||||
|
||||
`Anchor` 吸附在 `stickyOffset` 线处。
|
||||
</docs>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<article class="anchor-demo">
|
||||
<div class="line"/>
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused2',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled2',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso2'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-one {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user