feat: add link for individual props/events/slots/configs/icons
This commit is contained in:
parent
df2b6892d2
commit
b0dcdbb873
@ -4,7 +4,7 @@ export default function scrollBehavior (to) {
|
|||||||
return {
|
return {
|
||||||
selector: decodeURIComponent(to.hash),
|
selector: decodeURIComponent(to.hash),
|
||||||
offset: {
|
offset: {
|
||||||
y: 20
|
y: 32
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@import "~highlight.js/styles/atom-one-light.css"
|
@import "~highlight.js/styles/night-owl.css"
|
||||||
|
|
||||||
margin-y($top, $bottom = $top)
|
margin-y($top, $bottom = $top)
|
||||||
margin-top $top
|
margin-top $top
|
||||||
@ -141,19 +141,20 @@ margin-y($top, $bottom = $top)
|
|||||||
th
|
th
|
||||||
td
|
td
|
||||||
min-width 90px
|
min-width 90px
|
||||||
padding 7px 14px
|
padding 8px 14px
|
||||||
border 1px solid #f1f1f1
|
border 1px solid #f1f1f1
|
||||||
border-style solid none
|
border-style solid none
|
||||||
text-align left
|
text-align left
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
& > :first-child
|
& > :first-child
|
||||||
margin-top 5px
|
margin-top 0
|
||||||
|
|
||||||
& > :last-child
|
& > :last-child
|
||||||
margin-bottom 5px
|
margin-bottom 0
|
||||||
|
|
||||||
pre
|
pre
|
||||||
padding 10px 15px
|
font-size 90%
|
||||||
|
|
||||||
table
|
table
|
||||||
margin-y(0.2em, 0.5em)
|
margin-y(0.2em, 0.5em)
|
||||||
@ -177,14 +178,16 @@ margin-y($top, $bottom = $top)
|
|||||||
|
|
||||||
code
|
code
|
||||||
code&
|
code&
|
||||||
padding 2px 4px
|
|
||||||
background-color #0066ff16
|
|
||||||
font-size 90%
|
font-size 90%
|
||||||
overflow visible
|
|
||||||
hyphens none
|
hyphens none
|
||||||
border-radius 3px
|
|
||||||
font-family Menlo, consolas, monospace
|
font-family Menlo, consolas, monospace
|
||||||
|
|
||||||
|
&:not(pre > code)
|
||||||
|
padding 2px 4px
|
||||||
|
background-color #0066ff16
|
||||||
|
overflow visible
|
||||||
|
border-radius 3px
|
||||||
|
|
||||||
hr
|
hr
|
||||||
hr&
|
hr&
|
||||||
height 1px
|
height 1px
|
||||||
@ -249,17 +252,14 @@ margin-y($top, $bottom = $top)
|
|||||||
|
|
||||||
pre
|
pre
|
||||||
pre&
|
pre&
|
||||||
border 1px solid #eee
|
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
padding 18px 24px
|
|
||||||
background-color #f9f9f9
|
|
||||||
white-space pre
|
white-space pre
|
||||||
overflow auto
|
overflow auto
|
||||||
|
line-height 1.6
|
||||||
|
|
||||||
code
|
code
|
||||||
border none
|
border none
|
||||||
background-color transparent
|
padding 18px 24px
|
||||||
padding 0
|
|
||||||
|
|
||||||
var
|
var
|
||||||
font-family "PT Serif", Georgia, serif
|
font-family "PT Serif", Georgia, serif
|
||||||
@ -318,3 +318,23 @@ margin-y($top, $bottom = $top)
|
|||||||
|
|
||||||
a
|
a
|
||||||
margin-right 10px
|
margin-right 10px
|
||||||
|
|
||||||
|
[data-target]
|
||||||
|
outline 2px solid transparent
|
||||||
|
outline-offset -1px
|
||||||
|
animation target-blink 3s ease 1 both
|
||||||
|
|
||||||
|
.hljs-attr
|
||||||
|
color #c5e478
|
||||||
|
|
||||||
|
@keyframes target-blink
|
||||||
|
0%
|
||||||
|
outline-color #8fbcff
|
||||||
|
|
||||||
|
5%
|
||||||
|
15%
|
||||||
|
outline-color #0052cc
|
||||||
|
|
||||||
|
10%
|
||||||
|
95%
|
||||||
|
outline-color #8fbcff
|
||||||
|
@ -162,9 +162,8 @@ Icon.register({
|
|||||||
& >>> pre
|
& >>> pre
|
||||||
margin-top 0
|
margin-top 0
|
||||||
margin-bottom 0
|
margin-bottom 0
|
||||||
|
border-top-right-radius 0
|
||||||
.expanded &
|
border-top-left-radius 0
|
||||||
border-radius 0
|
|
||||||
|
|
||||||
.desc
|
.desc
|
||||||
.source >>> pre
|
.source >>> pre
|
||||||
@ -186,6 +185,9 @@ Icon.register({
|
|||||||
transition background-color 0.3s
|
transition background-color 0.3s
|
||||||
outline none
|
outline none
|
||||||
|
|
||||||
|
.expanded &
|
||||||
|
border-radius 0
|
||||||
|
|
||||||
.veui-button
|
.veui-button
|
||||||
font-size 18px
|
font-size 18px
|
||||||
|
|
||||||
|
@ -85,7 +85,7 @@ main
|
|||||||
|
|
||||||
.content
|
.content
|
||||||
.footer
|
.footer
|
||||||
max-width 1180px - $sidebar-width
|
max-width 1346px - $sidebar-width
|
||||||
min-width 560px
|
min-width 560px
|
||||||
transition margin-left 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
transition margin-left 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86)
|
||||||
</style>
|
</style>
|
||||||
|
@ -44,6 +44,7 @@ module.exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
{ src: '~plugins/i18n.js' },
|
{ src: '~plugins/i18n.js' },
|
||||||
{ src: '~plugins/l10n.js' },
|
{ src: '~plugins/l10n.js' },
|
||||||
|
{ src: '~plugins/target.js', ssr: false },
|
||||||
{ src: '~plugins/hm.js', ssr: false }
|
{ src: '~plugins/hm.js', ssr: false }
|
||||||
],
|
],
|
||||||
|
|
||||||
|
@ -20,9 +20,9 @@ export function vue (hljs) {
|
|||||||
className: 'string',
|
className: 'string',
|
||||||
endsParent: true,
|
endsParent: true,
|
||||||
variants: [
|
variants: [
|
||||||
{begin: /"/, end: /"/},
|
{ begin: /"/, end: /"/ },
|
||||||
{begin: /'/, end: /'/},
|
{ begin: /'/, end: /'/ },
|
||||||
{begin: /[^\s"'=<>`]+/}
|
{ begin: /[^\s"'=<>`]+/ }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -49,7 +49,7 @@ export function vue (hljs) {
|
|||||||
*/
|
*/
|
||||||
begin: '<style(?=\\s|>|$)',
|
begin: '<style(?=\\s|>|$)',
|
||||||
end: '>',
|
end: '>',
|
||||||
keywords: {name: 'style'},
|
keywords: { name: 'style' },
|
||||||
contains: [TAG_INTERNALS],
|
contains: [TAG_INTERNALS],
|
||||||
starts: {
|
starts: {
|
||||||
end: '</style>',
|
end: '</style>',
|
||||||
@ -62,7 +62,7 @@ export function vue (hljs) {
|
|||||||
// See the comment in the <style tag about the lookahead pattern
|
// See the comment in the <style tag about the lookahead pattern
|
||||||
begin: '<script(?=\\s|>|$)',
|
begin: '<script(?=\\s|>|$)',
|
||||||
end: '>',
|
end: '>',
|
||||||
keywords: {name: 'script'},
|
keywords: { name: 'script' },
|
||||||
contains: [TAG_INTERNALS],
|
contains: [TAG_INTERNALS],
|
||||||
starts: {
|
starts: {
|
||||||
end: '</script>',
|
end: '</script>',
|
||||||
@ -75,7 +75,7 @@ export function vue (hljs) {
|
|||||||
// See the comment in the <style tag about the lookahead pattern
|
// See the comment in the <style tag about the lookahead pattern
|
||||||
begin: '<template(?=\\s|>|$)',
|
begin: '<template(?=\\s|>|$)',
|
||||||
end: '>',
|
end: '>',
|
||||||
keywords: {name: 'template'},
|
keywords: { name: 'template' },
|
||||||
contains: [TAG_INTERNALS],
|
contains: [TAG_INTERNALS],
|
||||||
starts: {
|
starts: {
|
||||||
end: '</template>',
|
end: '</template>',
|
||||||
|
@ -12,6 +12,7 @@ import etpl from 'etpl'
|
|||||||
import { readFileSync, writeFileSync, replaceExtSync } from './util'
|
import { readFileSync, writeFileSync, replaceExtSync } from './util'
|
||||||
import demo from './remark-demo'
|
import demo from './remark-demo'
|
||||||
import ref from './remark-ref'
|
import ref from './remark-ref'
|
||||||
|
import anchor from './remark-anchor'
|
||||||
import details from './remark-details'
|
import details from './remark-details'
|
||||||
import custom from './remark-custom'
|
import custom from './remark-custom'
|
||||||
import extractFrontmatter from './remark-extract-frontmatter'
|
import extractFrontmatter from './remark-extract-frontmatter'
|
||||||
@ -30,6 +31,7 @@ const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
|
|||||||
const renderPage = etpl.compile(PAGE_TPL)
|
const renderPage = etpl.compile(PAGE_TPL)
|
||||||
|
|
||||||
const md = remark()
|
const md = remark()
|
||||||
|
.use(anchor)
|
||||||
.use(custom)
|
.use(custom)
|
||||||
.use(details)
|
.use(details)
|
||||||
.use(ref)
|
.use(ref)
|
||||||
|
58
one/build/remark-anchor.js
Normal file
58
one/build/remark-anchor.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import visit from 'unist-util-visit'
|
||||||
|
|
||||||
|
const KNOWN_SCOPES_CONFIG = {
|
||||||
|
props: '属性',
|
||||||
|
events: '事件',
|
||||||
|
methods: '方法',
|
||||||
|
slots: '插槽',
|
||||||
|
icons: '图标',
|
||||||
|
configs: '全局配置'
|
||||||
|
}
|
||||||
|
const KNOWN_SCOPES = Object.entries(KNOWN_SCOPES_CONFIG).reduce(
|
||||||
|
(acc, [key, value]) => {
|
||||||
|
acc[key] = key
|
||||||
|
acc[value] = key
|
||||||
|
return acc
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default function attacher () {
|
||||||
|
return tree => {
|
||||||
|
let scope = null
|
||||||
|
visit(tree, (node, index, parent) => {
|
||||||
|
const { type, depth, children, value, position } = node
|
||||||
|
if (type === 'heading') {
|
||||||
|
if (depth === 3) {
|
||||||
|
const text = children[0]
|
||||||
|
if (text && text.type === 'text' && KNOWN_SCOPES[text.value]) {
|
||||||
|
scope = KNOWN_SCOPES[text.value]
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (depth <= 3) {
|
||||||
|
scope = null
|
||||||
|
}
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
type === 'inlineCode' &&
|
||||||
|
position.end.offset - position.start.offset - value.length === 4
|
||||||
|
) {
|
||||||
|
const id = `${scope || 'doc'}-${value.replace(/\./g, '-')}`
|
||||||
|
|
||||||
|
node.data = node.data || {}
|
||||||
|
node.data.hProperties = { id }
|
||||||
|
|
||||||
|
parent.children[index] = {
|
||||||
|
type: 'link',
|
||||||
|
url: `#${id}`,
|
||||||
|
children: [node]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
# 自定义校验规则
|
# 自定义校验规则
|
||||||
|
|
||||||
对于多值校验,[表单 › validators 属性](../components/form#属性)提供了比较完善的功能来实现自定义校验。对于单值校验,`Field` 组件内置了 7 种常见规则,具体参考[表单项 › rule 属性](../components/field#属性)。如果无法覆盖需求,`VEUI` 校验规则模块允许你添加自定义规则。
|
对于多值校验,[表单 › validators 属性](../components/form#props-validators)提供了比较完善的功能来实现自定义校验。对于单值校验,`Field` 组件内置了 7 种常见规则,具体参考[表单项 › rule 属性](../components/field#props-rule)。如果无法覆盖需求,`VEUI` 校验规则模块允许你添加自定义规则。
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
@ -17,18 +17,20 @@ ruleManager.addRule('range', {
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
```html
|
```vue
|
||||||
|
<template>
|
||||||
<veui-field
|
<veui-field
|
||||||
:rules=[{
|
:rules="[{
|
||||||
triggers: 'change'
|
triggers: 'change'
|
||||||
name: 'range',
|
name: 'range',
|
||||||
value: {
|
value: {
|
||||||
ceil: 100,
|
ceil: 100,
|
||||||
floor: 50
|
floor: 50
|
||||||
}
|
}
|
||||||
}]
|
}]"
|
||||||
...
|
...
|
||||||
>...</veui-field>
|
>...</veui-field>
|
||||||
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
@ -36,7 +38,7 @@ ruleManager.addRule('range', {
|
|||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑,`value` 为 `Field` 需要校验的值,`ruleValue` 可选,根据规则需要添加,表示规则的限定值。 |
|
| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑,`value` 为 `Field` 需要校验的值,`ruleValue` 可选,根据规则需要添加,表示规则的限定值。 |
|
||||||
| `message` | `function|string` | [^message] |
|
| `message` | `function | string` | [^message] |
|
||||||
| `priority` | `number` | [^priority] |
|
| `priority` | `number` | [^priority] |
|
||||||
|
|
||||||
^^^message
|
^^^message
|
||||||
|
@ -8,13 +8,13 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/accordion/size.vue" ]]
|
[[ demo src="/demo/accordion/size.vue" ]]
|
||||||
|
|
||||||
### 允许多个展开
|
### 允许多个展开
|
||||||
|
|
||||||
可使用 `multiple` 属性来允许多个面板同时展开。
|
可使用 [`multiple`](#props-multiple) 属性来允许多个面板同时展开。
|
||||||
|
|
||||||
[[ demo src="/demo/accordion/multiple.vue" ]]
|
[[ demo src="/demo/accordion/multiple.vue" ]]
|
||||||
|
|
||||||
@ -24,29 +24,29 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `multiple` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
|
| ``multiple`` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `expanded` | `string | Array<string>` | - | [^expanded] |
|
| ``expanded`` | `string | Array<string>` | - | [^expanded] |
|
||||||
|
|
||||||
^^^expanded
|
^^^expanded
|
||||||
:::badges
|
:::badges
|
||||||
`.sync`
|
`.sync`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
已展开的折叠面板标识,对应于内联 `Collapse` 组件的 `name` 属性。当 `multiple` 为 `true` 时,为折叠面板标识的数组。
|
已展开的折叠面板标识,对应于内联 `Collapse` 组件的 [`name`](./collapse#props-name) 属性。当 `multiple` 为 `true` 时,为折叠面板标识的数组。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区,用来内联 `Collapse` 组件。 |
|
| ``default`` | 内容区,用来内联 `Collapse` 组件。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `toggle` | [^toggle] |
|
| ``toggle`` | [^toggle] |
|
||||||
|
|
||||||
^^^toggle
|
^^^toggle
|
||||||
点击内部折叠面板标题区触发展开/收起时触发。回调参数为 `(expand: boolean, name: string, expanded)`。
|
点击内部折叠面板标题区触发展开/收起时触发。回调参数为 `(expand: boolean, name: string, expanded)`。
|
||||||
@ -54,8 +54,8 @@
|
|||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `expand` | `boolean` | 是否展开。 |
|
| ``expand`` | `boolean` | 是否展开。 |
|
||||||
| `name` | `string` | 被切换的折叠面板标识。 |
|
| ``name`` | `string` | 被切换的折叠面板标识。 |
|
||||||
| `expanded` | `string | Array<string>` | 当前所有被展开的折叠面板标识。 |
|
| ``expanded`` | `string | Array<string>` | 当前所有被展开的折叠面板标识。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 类型
|
### 类型
|
||||||
|
|
||||||
`AlertBox` 有三种类型,分别是 `info`、`success` 和 `error`,可以通过 `type` 属性指定不同的类型。
|
`AlertBox` 有三种类型,分别是 `info`、`success` 和 `error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
|
||||||
|
|
||||||
[[ demo src="/demo/alert-box/type.vue" ]]
|
[[ demo src="/demo/alert-box/type.vue" ]]
|
||||||
|
|
||||||
### 标题
|
### 标题
|
||||||
|
|
||||||
可以通过 `title` 属性或 `title` 插槽自定义警告弹框的标题。
|
可以通过 [`title`](#props-title) 属性或 [`title`](#slots-title) 插槽自定义警告弹框的标题。
|
||||||
|
|
||||||
[[ demo src="/demo/alert-box/title.vue" ]]
|
[[ demo src="/demo/alert-box/title.vue" ]]
|
||||||
|
|
||||||
@ -20,15 +20,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `type` | `string=` | `'success'` | [^type] |
|
| ``type`` | `string=` | `'success'` | [^type] |
|
||||||
| `title` | `string=` | - | 标题。 |
|
| ``title`` | `string=` | - | 标题。 |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
||||||
| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
|
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
|
| ``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#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -54,21 +54,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | 底部区域,默认会展示一个“知道了”按钮。 |
|
| ``foot`` | 底部区域,默认会展示一个“知道了”按钮。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `ok` | 点击“知道了”按钮触发。 |
|
| ``ok`` | 点击“知道了”按钮触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `info` | 普通信息。 |
|
| ``info`` | 普通信息。 |
|
||||||
| `success` | 成功状态。 |
|
| ``success`` | 成功状态。 |
|
||||||
| `error` | 错误状态。 |
|
| ``error`` | 错误状态。 |
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 类型
|
### 类型
|
||||||
|
|
||||||
`Alert` 有四种类型,分别是 `success`、`info`、`warning` 和 `error`,可以通过 `type` 属性指定不同的类型。
|
`Alert` 有四种类型,分别是 `success`、`info`、`warning` 和 `error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
|
||||||
|
|
||||||
[[ demo src="/demo/alert/type.vue" ]]
|
[[ demo src="/demo/alert/type.vue" ]]
|
||||||
|
|
||||||
### 多消息切换
|
### 多消息切换
|
||||||
|
|
||||||
可以将 `message` 属性指定为数组,来实现展现多条可切换的消息提示。
|
可以将 [`message`](#props-message) 属性指定为数组,来实现展现多条可切换的消息提示。
|
||||||
|
|
||||||
[[ demo src="/demo/alert/multiple.vue" ]]
|
[[ demo src="/demo/alert/multiple.vue" ]]
|
||||||
|
|
||||||
@ -20,12 +20,12 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `type` | `string=` | `'success'` | [^type] |
|
| ``type`` | `string=` | `'success'` | [^type] |
|
||||||
| `title` | `string` | - | 消息标题。 |
|
| ``title`` | `string` | - | 消息标题。 |
|
||||||
| `message` | `string | Array<string>` | - | 消息内容,当类型为数组时会显示多条数据并支持切换上一条/下一条。 |
|
| ``message`` | `string | Array<string>` | - | 消息内容,当类型为数组时会显示多条数据并支持切换上一条/下一条。 |
|
||||||
| `closable` | `boolean=` | `false` | 是否允许关闭。 |
|
| ``closable`` | `boolean=` | `false` | 是否允许关闭。 |
|
||||||
| `open` | `boolean=` | `true` | [^open] |
|
| ``open`` | `boolean=` | `true` | [^open] |
|
||||||
| `index` | `number=` | `0` | [^index] |
|
| ``index`` | `number=` | `0` | [^index] |
|
||||||
|
|
||||||
^^^type
|
^^^type
|
||||||
警告框类型。
|
警告框类型。
|
||||||
@ -60,10 +60,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | [^slot-default] |
|
| ``default`` | [^slot-default] |
|
||||||
| `title` | 消息标题的内容区域。 |
|
| ``title`` | 消息标题的内容区域。 |
|
||||||
| `extra` | 消息之后的额外内容区域。 |
|
| ``extra`` | 消息之后的额外内容区域。 |
|
||||||
| `content` | 整个消息区域,包括状态图标、切换按钮、关闭按钮等。 |
|
| ``content`` | 整个消息区域,包括状态图标、切换按钮、关闭按钮等。 |
|
||||||
|
|
||||||
^^^slot-default
|
^^^slot-default
|
||||||
消息内容区域。
|
消息内容区域。
|
||||||
@ -83,10 +83,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `success` | 成功消息。 |
|
| ``success`` | 成功消息。 |
|
||||||
| `warning` | 警告消息。 |
|
| ``warning`` | 警告消息。 |
|
||||||
| `info` | 信息消息。 |
|
| ``info`` | 信息消息。 |
|
||||||
| `error` | 错误消息。 |
|
| ``error`` | 错误消息。 |
|
||||||
| `prev` | 上一条。 |
|
| ``prev`` | 上一条。 |
|
||||||
| `next` | 下一条。 |
|
| ``next`` | 下一条。 |
|
||||||
| `close` | 关闭。 |
|
| ``close`` | 关闭。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 容器与吸附
|
### 容器与吸附
|
||||||
|
|
||||||
使用 `container` 属性设置 `Anchor` 的容器,使用 `sticky` 属性来控制是否在滚动出容器时进行吸附。
|
使用 [`container`](#props-container) 属性设置 `Anchor` 的容器,使用 [`sticky`](#props-sticky) 属性来控制是否在滚动出容器时进行吸附。
|
||||||
|
|
||||||
[[ demo src="/demo/anchor/sticky.vue" ]]
|
[[ demo src="/demo/anchor/sticky.vue" ]]
|
||||||
|
|
||||||
@ -22,11 +22,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `items` | `Array<{value, label, children}>` | `[]` | [^items] |
|
| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] |
|
||||||
| `sticky` | `boolean=` | `false` | 是否有吸附效果。 |
|
| ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 |
|
||||||
| `container` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
|
| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
|
||||||
| `target-offset` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置,那么对应的锚点链接处于激活状态。 |
|
| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置,那么对应的锚点链接处于激活状态。 |
|
||||||
| `sticky-offset` | `string | number=` | `0` | 对于 sticky `Anchor` 而言,当容器滚动到 `sticky-offset` 位置,那么该 `Anchor` 开始吸附。 |
|
| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言,当容器滚动到 `sticky-offset` 位置,那么该 `Anchor` 开始吸附。 |
|
||||||
|
|
||||||
^^^items
|
^^^items
|
||||||
数据源数组,每个项目类型为 `{label, value, children, ...}`。
|
数据源数组,每个项目类型为 `{label, value, children, ...}`。
|
||||||
@ -36,7 +36,7 @@
|
|||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 节点的文字描述。 |
|
| `label` | `string` | 节点的文字描述。 |
|
||||||
| `value` | `string` | 节点对应的值,一般是页内 hash, 如 `#button` 。 |
|
| `value` | `string` | 节点对应的值,一般是页内 hash, 如 `#button` 。 |
|
||||||
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `items` 数组项。 |
|
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 [`items`](#props-items) 数组项。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -44,15 +44,15 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
| `item-label` | [^slot-item-label] |
|
| ``item-label`` | [^slot-item-label] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
渲染每个锚点链接。
|
渲染每个锚点链接。
|
||||||
|
|
||||||
默认内容:锚点链接。
|
默认内容:锚点链接。
|
||||||
|
|
||||||
作用域参数参见 `items` 属性详情。
|
作用域参数参见 [`items`](#props-items) 属性详情。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^slot-item-label
|
^^^slot-item-label
|
||||||
@ -60,5 +60,5 @@
|
|||||||
|
|
||||||
默认内容:锚点链接的描述文本 `label`。
|
默认内容:锚点链接的描述文本 `label`。
|
||||||
|
|
||||||
作用域参数参见 `item` 插槽。
|
作用域参数参见 [`item`](#slots-item) 插槽。
|
||||||
^^^
|
^^^
|
||||||
|
@ -10,18 +10,18 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `datasource` | `Array<string | Object>=` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
|
||||||
| `value` | `*` | - | [^prop-value] |
|
| ``value`` | `*` | - | [^prop-value] |
|
||||||
| `match` | `function(string | Object, string): boolean=` | - | 自定义搜索逻辑。 |
|
| ``match`` | `function(string | Object, string): boolean=` | - | 自定义搜索逻辑。 |
|
||||||
| `strict` | `boolean=` | `false` | 建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。 |
|
| ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。 |
|
||||||
| `suggest-trigger` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 |
|
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 |
|
||||||
| `placeholder` | `string=` | | 输入占位符。 |
|
| ``placeholder`` | `string=` | | 输入占位符。 |
|
||||||
| `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
|
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
|
||||||
| `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
|
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `clearable` | `boolean=` | `false` | 是否显示清除按钮。 |
|
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^datasource
|
^^^datasource
|
||||||
数据源数组,项目为 `Object` 时字段为 `{label, value, children, ...}`。
|
数据源数组,项目为 `Object` 时字段为 `{label, value, children, ...}`。
|
||||||
@ -31,7 +31,7 @@
|
|||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 节点的文字描述。 |
|
| `label` | `string` | 节点的文字描述。 |
|
||||||
| `value` | `string` | 节点对应的值,一般是页内 hash, 如 `#button` 。 |
|
| `value` | `string` | 节点对应的值,一般是页内 hash, 如 `#button` 。 |
|
||||||
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 `items` 数组项。 |
|
| `children` | `Array<Object>=` | 节点的子节点数组,数组项类型同 [`items`](#props-items) 数组项。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -55,8 +55,8 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `suggestions` | [^slot-suggestions] |
|
| ``suggestions`` | [^slot-suggestions] |
|
||||||
| `option-label` | [^slot-option-label] |
|
| ``option-label`` | [^slot-option-label] |
|
||||||
|
|
||||||
^^^slot-suggestions
|
^^^slot-suggestions
|
||||||
|
|
||||||
@ -65,7 +65,7 @@
|
|||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `datasource` | `Array<string | Object>` | 数据源,类型同 `datasource` 属性。 |
|
| `datasource` | `Array<string | Object>` | 数据源,类型同 [`datasource`](#props-datasource) 属性。 |
|
||||||
| `keyword` | `string` | 搜索关键词。 |
|
| `keyword` | `string` | 搜索关键词。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -87,10 +87,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
| `suggest` | 采纳建议时触发,参数是当前值。 |
|
| ``suggest`` | 采纳建议时触发,参数是当前值。 |
|
||||||
| `toggle` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
|
| ``toggle`` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
|
||||||
| `clear` | 清除当前值时触发。 |
|
| ``clear`` | 清除当前值时触发。 |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -26,10 +26,10 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `type` | `string=` | `'error'` | [^type] |
|
| ``type`` | `string=` | `'error'` | [^type] |
|
||||||
| `value` | `string | number` | - | 徽标内容值。为 `number` 类型值时,会受 `max` 属性限制。为 `string` 类型时,`max` 会被忽略。 |
|
| ``value`` | `string | number` | - | 徽标内容值。为 `number` 类型值时,会受 [`max`](#props-max) 属性限制。为 `string` 类型时,`max` 会被忽略。 |
|
||||||
| `max` | `number=` | `badge.max` | 徽标数值的最大值,当 `value` 超过此值时,徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
|
| ``max`` | `number=` | `badge.max` | 徽标数值的最大值,当 `value` 超过此值时,徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
|
||||||
| `hidden` | `boolean=` | `false` | 是否处于隐藏状态。 |
|
| ``hidden`` | `boolean=` | `false` | 是否处于隐藏状态。 |
|
||||||
|
|
||||||
^^^type
|
^^^type
|
||||||
徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
|
徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
|
||||||
@ -49,4 +49,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 需要显示徽标的目标内容。 |
|
| ``default`` | 需要显示徽标的目标内容。 |
|
||||||
|
@ -14,9 +14,9 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| `to` | `string | Object` | - | 点击面包屑项之后要跳转到的地址。见 [`Link`](./link#属性) 组件的同名属性。 |
|
| ``to`` | `string | Object` | - | 点击面包屑项之后要跳转到的地址。见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
|
||||||
| `type` | `string` | `'link'` | [^link] |
|
| ``type`` | `string` | `'link'` | [^link] |
|
||||||
| `native` | `boolean` | `false` | 当值为 `true` 且指定了 `to` 时,会直接使用原生 `<a>` 元素,`to` 值会被设置到 `<a>` 标签的 `href` 属性上。 |
|
| ``native`` | `boolean` | `false` | 当值为 `true` 且指定了 `to` 时,会直接使用原生 `<a>` 元素,`to` 值会被设置到 `<a>` 标签的 `href` 属性上。 |
|
||||||
|
|
||||||
^^^link
|
^^^link
|
||||||
面包屑项的类型。
|
面包屑项的类型。
|
||||||
@ -33,16 +33,16 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 填充面包屑项的正文内容区。 |
|
| ``default`` | 填充面包屑项的正文内容区。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `redirect` | 点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event: Event)`,直接透传[原生点击事件对象](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
|
| ``redirect`` | 点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event: Event)`,直接透传[原生点击事件对象](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `separator` | 分隔符。 |
|
| ``separator`` | 分隔符。 |
|
||||||
|
@ -8,13 +8,13 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的风格 `ui` 属性值:`strong`。
|
可选的风格 [`ui`](#props-ui) 属性值:`strong`。
|
||||||
|
|
||||||
[[ demo src="/demo/breadcrumb/style.vue" ]]
|
[[ demo src="/demo/breadcrumb/style.vue" ]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/breadcrumb/size.vue" ]]
|
[[ demo src="/demo/breadcrumb/size.vue" ]]
|
||||||
|
|
||||||
@ -38,7 +38,7 @@
|
|||||||
|
|
||||||
### 事件监听
|
### 事件监听
|
||||||
|
|
||||||
监听跳转事件后处理而非直接路由跳转。
|
监听 [`redirect`](#events-redirect) 事件后处理而非直接路由跳转。
|
||||||
|
|
||||||
[[ demo src="/demo/breadcrumb/redirect.vue" ]]
|
[[ demo src="/demo/breadcrumb/redirect.vue" ]]
|
||||||
|
|
||||||
@ -48,8 +48,8 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `routes` | `Array<Object>` | `[]` | [^routes] |
|
| ``routes`` | `Array<Object>` | `[]` | [^routes] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -73,9 +73,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 支持内联模式,直接传入 [`BreadcrumbItem`](./breadcrumb-item) 组件列表。填充后 `routes` 属性将被忽略。 |
|
| ``default`` | 支持内联模式,直接传入 [`BreadcrumbItem`](./breadcrumb-item) 组件列表。填充后 [`routes`](#props-routes) 属性将被忽略。 |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
| `separator` | [^slot-separator] |
|
| ``separator`` | [^slot-separator] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
用于为每个项目自定义内容。默认内容为 `routes` 项目的 `label` 或 [`BreadcrumbItem`]('./breadcrumb-item) 组件的默认插槽。
|
用于为每个项目自定义内容。默认内容为 `routes` 项目的 `label` 或 [`BreadcrumbItem`]('./breadcrumb-item) 组件的默认插槽。
|
||||||
@ -99,7 +99,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `redirect` | [^redirect] |
|
| ``redirect`` | [^redirect] |
|
||||||
|
|
||||||
^^^redirect
|
^^^redirect
|
||||||
点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event, route, index)`。
|
点击 `type` 为 `link` 的项目时将触发该事件,回调参数为 `(event, route, index)`。
|
||||||
@ -107,8 +107,8 @@
|
|||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `event` | [Event](https://developer.mozilla.org/zh-CN/docs/Web/Events/click) | 事件对象。 |
|
| ``event`` | [Event](https://developer.mozilla.org/zh-CN/docs/Web/Events/click) | 事件对象。 |
|
||||||
| `route` | `Object` | 面包屑条目对象。 |
|
| ``route`` | `Object` | 面包屑条目对象。 |
|
||||||
| `index` | `number` | 当前点击条目的索引。 |
|
| ``index`` | `number` | 当前点击条目的索引。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
@ -4,19 +4,19 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的 `ui` 属性值:`primary`/`strong`/`basic`。
|
可选的 [`ui`](#props-ui) 属性值:`primary` / `strong` / `basic`。
|
||||||
|
|
||||||
[[ demo src="/demo/button-group/style.vue" ]]
|
[[ demo src="/demo/button-group/style.vue" ]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`xs`/`s`/`m`/`l`/`xl`。
|
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`。
|
||||||
|
|
||||||
[[ demo src="/demo/button-group/size.vue" ]]
|
[[ demo src="/demo/button-group/size.vue" ]]
|
||||||
|
|
||||||
### 使用 `items` 数据源
|
### 使用 `items` 数据源
|
||||||
|
|
||||||
可以使用 `items` 属性通过数据源指定按钮内容。
|
可以使用 [`items`](#props-items) 属性通过数据源指定按钮内容。
|
||||||
|
|
||||||
[[ demo src="/demo/button-group/items.vue" ]]
|
[[ demo src="/demo/button-group/items.vue" ]]
|
||||||
|
|
||||||
@ -32,9 +32,9 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>` | - | [^items] |
|
| ``items`` | `Array<Object>` | - | [^items] |
|
||||||
| `disabled` | `boolean=` | `false` | 按钮是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 按钮是否为禁用状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。为空格分隔的一组枚举值的组合。
|
预设样式。为空格分隔的一组枚举值的组合。
|
||||||
@ -68,13 +68,13 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 按钮组内容区。 |
|
| ``default`` | 按钮组内容区。 |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
用来定制每个按钮的内容。
|
用来定制每个按钮的内容。
|
||||||
|
|
||||||
默认内容:`label` 属性值。
|
默认内容:[`label`](#props-label) 属性值。
|
||||||
|
|
||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
@ -92,7 +92,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `click` | [^click-event] |
|
| ``click`` | [^click-event] |
|
||||||
| <var><value></var> | [^value-var-event] |
|
| <var><value></var> | [^value-var-event] |
|
||||||
|
|
||||||
^^^click-event
|
^^^click-event
|
||||||
@ -107,5 +107,5 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^value-var-event
|
^^^value-var-event
|
||||||
如果对应数据项有字符串类型的 `value` 字段,则在点击后触发名为 `value` 值的事件,参数与 `click` 事件相同。
|
如果对应数据项有字符串类型的 `value` 字段,则在点击后触发名为 `value` 值的事件,参数与 [`click`](#events-click) 事件相同。
|
||||||
^^^
|
^^^
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的风格 `ui` 属性值:`primary`/`strong`/`translucent`/`text`/`icon`。
|
可选的风格 [`ui`](#props-ui) 属性值:`primary` / `strong` / `translucent` / `text` / `icon`。
|
||||||
|
|
||||||
[[ demo src="/demo/button/style.vue" ]]
|
[[ demo src="/demo/button/style.vue" ]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`/`xl`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`。
|
||||||
|
|
||||||
[[ demo src="/demo/button/size.vue" ]]
|
[[ demo src="/demo/button/size.vue" ]]
|
||||||
|
|
||||||
@ -32,10 +32,10 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `type` | `string=` | `'button'` | [^type] |
|
| ``type`` | `string=` | `'button'` | [^type] |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。为空格分隔的一组枚举值的组合。
|
预设样式。为空格分隔的一组枚举值的组合。
|
||||||
@ -46,11 +46,11 @@
|
|||||||
| `normal` | 普通按钮,为默认样式。 |
|
| `normal` | 普通按钮,为默认样式。 |
|
||||||
| `primary` | 主要按钮,背景显示为主题色。 |
|
| `primary` | 主要按钮,背景显示为主题色。 |
|
||||||
| `basic` | 基础按钮。 |
|
| `basic` | 基础按钮。 |
|
||||||
| `strong` | 加强样式。可单独使用,也可配合 `text`/`icon` 样式使用。 |
|
| `strong` | 加强样式。可单独使用,也可配合 `text` / `icon` 样式使用。 |
|
||||||
| `translucent` | 半透明样式,用于深色背景。 |
|
| `translucent` | 半透明样式,用于深色背景。 |
|
||||||
| `text` | 纯文字样式,没有背景色及边框。 |
|
| `text` | 纯文字样式,没有背景色及边框。 |
|
||||||
| `icon` | 纯图标样式,没有背景色及边框。 |
|
| `icon` | 纯图标样式,没有背景色及边框。 |
|
||||||
| `aux` | 辅助按钮,用于配合 `text`/`icon` 样式使用。 |
|
| `aux` | 辅助按钮,用于配合 `text` / `icon` 样式使用。 |
|
||||||
| `square` | 方形按钮。可配合其它样式一同使用。 |
|
| `square` | 方形按钮。可配合其它样式一同使用。 |
|
||||||
| `xs` | 超小尺寸样式。 |
|
| `xs` | 超小尺寸样式。 |
|
||||||
| `s` | 小尺寸样式。 |
|
| `s` | 小尺寸样式。 |
|
||||||
@ -80,7 +80,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 按钮上显示的内容。 |
|
| ``default`` | 按钮上显示的内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
@ -90,4 +90,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `loading` | 加载状态。 |
|
| ``loading`` | 加载状态。 |
|
||||||
|
@ -10,13 +10,13 @@
|
|||||||
|
|
||||||
### 多日选择、日期范围选择
|
### 多日选择、日期范围选择
|
||||||
|
|
||||||
配置 `multiple` 属性时,可以选择多个日期。配置 `range` 属性时,可以选择一个日期范围。
|
配置 [`multiple`](#props-multiple) 属性时,可以选择多个日期。配置 [`range`](#props-range) 属性时,可以选择一个日期范围。
|
||||||
|
|
||||||
[[ demo src="/demo/calendar/range-multiple.vue" ]]
|
[[ demo src="/demo/calendar/range-multiple.vue" ]]
|
||||||
|
|
||||||
### 多日期范围选择
|
### 多日期范围选择
|
||||||
|
|
||||||
同时配置 `multiple` 及 `range` 属性时,可以选择多段日期范围。配置 `panel` 属性时,可以指定日历面板的数量。两次选择的时间段合并的策略为,若从未选日期开始选择则选中该时段,否则则取消选择该时段。
|
同时配置 [`multiple`](#props-multiple) 及 [`range`](#props-range) 属性时,可以选择多段日期范围。配置 [`panel`](#props-panel) 属性时,可以指定日历面板的数量。两次选择的时间段合并的策略为,若从未选日期开始选择则选中该时段,否则则取消选择该时段。
|
||||||
|
|
||||||
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
|
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
|
||||||
|
|
||||||
@ -26,25 +26,25 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `type` | `string=` | `'date'` | 日历的类型,可用值为 `'date'`/`'month'`/`'year'`,分别对应日期/月/年视图。 |
|
| ``type`` | `string=` | `'date'` | 日历的类型,可用值为 `'date'` / `'month'` / `'year'`,分别对应日期/月/年视图。 |
|
||||||
| `multiple` | `boolean=` | `false` | 是否可以选择多个日期(范围)。 |
|
| ``multiple`` | `boolean=` | `false` | 是否可以选择多个日期(范围)。 |
|
||||||
| `range` | `boolean=` | `false` | 是否选择日期范围。 |
|
| ``range`` | `boolean=` | `false` | 是否选择日期范围。 |
|
||||||
| `selected` | `Date | Array=` | - | [^selected] |
|
| ``selected`` | `Date | Array=` | - | [^selected] |
|
||||||
| `panel` | `number=` | `1` | 日历面板数量。 |
|
| ``panel`` | `number=` | `1` | 日历面板数量。 |
|
||||||
| `today` | `Date=` | `new Date()` | 「今天」的日期。 |
|
| ``today`` | `Date=` | `new Date()` | 「今天」的日期。 |
|
||||||
| `week-start` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#全局配置)。 |
|
| ``week-start`` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#configs-calendar-weekStart)。 |
|
||||||
| `fill-month` | `boolean=` | `true` | 当只有一个面板时,是否要在当前月份面板显示非本月日期。 |
|
| ``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` 表达式。 |
|
| ``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-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期,会作为第二个参数传入。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^selected
|
^^^selected
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
已选日期(范围)的值,根据 `multiple` 和 `range` 属性值的不同,数据格式不同。
|
已选日期(范围)的值,根据 [`multiple`](#props-multiple) 和 [`range`](#props-range) 属性值的不同,数据格式不同。
|
||||||
|
|
||||||
+++类型详情
|
+++类型详情
|
||||||
| `multiple` | `range` | 类型 |
|
| `multiple` | `range` | 类型 |
|
||||||
@ -60,9 +60,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `before` | 日历内,面板上方可供定制的区域。 |
|
| ``before`` | 日历内,面板上方可供定制的区域。 |
|
||||||
| `after` | 日历内,面板下方可供定制的区域。 |
|
| ``after`` | 日历内,面板下方可供定制的区域。 |
|
||||||
| `date` | [^slot-date] |
|
| ``date`` | [^slot-date] |
|
||||||
|
|
||||||
^^^slot-date
|
^^^slot-date
|
||||||
单日单元格内的区域,可用来定制每一天对应区域的内容。
|
单日单元格内的区域,可用来定制每一天对应区域的内容。
|
||||||
@ -82,21 +82,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
| `selectstart` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
|
| ``selectstart`` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
|
||||||
| `selectprogress` | [^event-selectprogress] |
|
| ``selectprogress`` | [^event-selectprogress] |
|
||||||
| `viewchange` | 面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`,表示当前年月(`month` 为 `0` 表示一月)。 |
|
| ``viewchange`` | 面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`,表示当前年月(`month` 为 `0` 表示一月)。 |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选择修改后触发,回调参数为 `(selected)`。数据类型和 `selected` 属性一致。
|
选择修改后触发,回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^event-selectprogress
|
^^^event-selectprogress
|
||||||
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 `multiple` 属性的值。
|
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 [`multiple`](#props-multiple) 属性的值。
|
||||||
|
|
||||||
+++参数详请
|
+++参数详请
|
||||||
| `multiple` | 类型 |
|
| `multiple` | 类型 |
|
||||||
@ -110,14 +110,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `calendar.weekStart` | `number` | `1` | 一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。 |
|
| ``calendar.weekStart`` | `number` | `1` | 一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `backward` | 上一年。 |
|
| ``backward`` | 上一年。 |
|
||||||
| `prev` | 上一页。 |
|
| ``prev`` | 上一页。 |
|
||||||
| `next` | 下一页。 |
|
| ``next`` | 下一页。 |
|
||||||
| `forward` | 下一年。 |
|
| ``forward`` | 下一年。 |
|
||||||
| `expand` | 展开下拉菜单。 |
|
| ``expand`` | 展开下拉菜单。 |
|
||||||
|
@ -10,35 +10,35 @@
|
|||||||
|
|
||||||
### 进度指示器
|
### 进度指示器
|
||||||
|
|
||||||
使用 `indicator` 属性来指定进度指示器类型。
|
使用 [`indicator`](#props-indicator) 属性来指定进度指示器类型。
|
||||||
|
|
||||||
[[ demo src="/demo/carousel/indicator.vue" ]]
|
[[ demo src="/demo/carousel/indicator.vue" ]]
|
||||||
|
|
||||||
### 自动切换
|
### 自动切换
|
||||||
|
|
||||||
指定 `autoplay` 属性来允许自动播放。
|
指定 [`autoplay`](#props-autoplay) 属性来允许自动播放。
|
||||||
|
|
||||||
[[ demo src="/demo/carousel/autoplay.vue" ]]
|
[[ demo src="/demo/carousel/autoplay.vue" ]]
|
||||||
|
|
||||||
### 切换效果
|
### 切换效果
|
||||||
|
|
||||||
指定 `effect` 属性来设置切换效果。
|
指定 [`effect`](#props-effect) 属性来设置切换效果。
|
||||||
|
|
||||||
[[ demo src="/demo/carousel/effect.vue" ]]
|
[[ demo src="/demo/carousel/effect.vue" ]]
|
||||||
|
|
||||||
### 纵向布局
|
### 纵向布局
|
||||||
|
|
||||||
指定 `vertical` 属性来允许纵向布局的轮播。
|
指定 [`vertical`](#props-vertical) 属性来允许纵向布局的轮播。
|
||||||
|
|
||||||
使用 `controls-position` 属性来切换按钮相对于布局方向的位置。
|
使用 [`controls-position`](#props-controls-position) 属性来切换按钮相对于布局方向的位置。
|
||||||
|
|
||||||
[[ demo src="/demo/carousel/vertical.vue" ]]
|
[[ demo src="/demo/carousel/vertical.vue" ]]
|
||||||
|
|
||||||
### 轮播项设置
|
### 轮播项设置
|
||||||
|
|
||||||
`slides-per-view` 属性来指定同时显示多少个轮播项。
|
[`slides-per-view`](#props-slides-per-view) 属性来指定同时显示多少个轮播项。
|
||||||
|
|
||||||
`slides-per-group` 属性来指定每次前后切换的一组包含多少个轮播项。
|
[`slides-per-group`](#props-slides-per-group) 属性来指定每次前后切换的一组包含多少个轮播项。
|
||||||
|
|
||||||
[[ demo src="/demo/carousel/slides.vue" ]]
|
[[ demo src="/demo/carousel/slides.vue" ]]
|
||||||
|
|
||||||
@ -48,23 +48,23 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
|
||||||
| `index` | `number=` | `0` | [^index] |
|
| ``index`` | `number=` | `0` | [^index] |
|
||||||
| `indicator` | `string=` | `'radio'` | [^indicator] |
|
| ``indicator`` | `string=` | `'radio'` | [^indicator] |
|
||||||
| `switch-trigger` | `string=` | `'click'` | [^switch-trigger] |
|
| ``switch-trigger`` | `string=` | `'click'` | [^switch-trigger] |
|
||||||
| `autoplay` | `boolean=` | `false` | 是否自动轮播。 |
|
| ``autoplay`` | `boolean=` | `false` | 是否自动轮播。 |
|
||||||
| `pause-on-hover` | `boolean=` | `false` | 在自动轮播时,鼠标悬浮后是否暂停。 |
|
| ``pause-on-hover`` | `boolean=` | `false` | 在自动轮播时,鼠标悬浮后是否暂停。 |
|
||||||
| `interval` | `number=` | `3000` | 在自动轮播时,切换间隔的毫秒数。 |
|
| ``interval`` | `number=` | `3000` | 在自动轮播时,切换间隔的毫秒数。 |
|
||||||
| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
|
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
|
||||||
| `effect` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果,其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
|
| ``effect`` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果,其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
|
||||||
| `vertical` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
|
| ``vertical`` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
|
||||||
| `indicator-align` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
|
| ``indicator-align`` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
|
||||||
| `indicator-position` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
|
| ``indicator-position`` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
|
||||||
| `controls-position` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
|
| ``controls-position`` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
|
||||||
| `slide-aspect-ratio` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
|
| ``slide-aspect-ratio`` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
|
||||||
| `options` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
|
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
|
||||||
| `slides-per-view` | `number=` | `1` | 指定同时显示多少个轮播项。 |
|
| ``slides-per-view`` | `number=` | `1` | 指定同时显示多少个轮播项。 |
|
||||||
| `slides-per-group` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
|
| ``slides-per-group`` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
|
||||||
|
|
||||||
^^^datasource
|
^^^datasource
|
||||||
轮播图数据源,项目类型为:`{src, alt, label, type}`。
|
轮播图数据源,项目类型为:`{src, alt, label, type}`。
|
||||||
@ -114,21 +114,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
可用来定制每个轮播项的区域。
|
可用来定制每个轮播项的区域。
|
||||||
|
|
||||||
默认内容:轮播项图片。
|
默认内容:轮播项图片。
|
||||||
|
|
||||||
作用域参数为 `datasource` 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, label, index, ...}`。
|
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, label, index, ...}`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
|
|
||||||
@ -139,5 +139,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `prev` | 上一页。 |
|
| ``prev`` | 上一页。 |
|
||||||
| `next` | 下一页。 |
|
| ``next`` | 下一页。 |
|
||||||
|
@ -5,25 +5,25 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/cascader/size.vue" ]]
|
[[ demo src="/demo/cascader/size.vue" ]]
|
||||||
|
|
||||||
### 内联模式
|
### 内联模式
|
||||||
|
|
||||||
使用 `inline` 属性来开启内联模式。
|
使用 [`inline`](#props-inline) 属性来开启内联模式。
|
||||||
|
|
||||||
[[ demo src="/demo/cascader/inline.vue" ]]
|
[[ demo src="/demo/cascader/inline.vue" ]]
|
||||||
|
|
||||||
### 搜索选项
|
### 搜索选项
|
||||||
|
|
||||||
使用 `searchable` 属性来开启选项搜索。
|
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
|
||||||
|
|
||||||
[[ demo src="/demo/cascader/searchable.vue" ]]
|
[[ demo src="/demo/cascader/searchable.vue" ]]
|
||||||
|
|
||||||
### 多选
|
### 多选
|
||||||
|
|
||||||
使用 `multiple` 属性来开启多选模式。
|
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
|
||||||
|
|
||||||
[[ demo src="/demo/cascader/multiple.vue" ]]
|
[[ demo src="/demo/cascader/multiple.vue" ]]
|
||||||
|
|
||||||
@ -33,25 +33,25 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `options` | `Array<Object>` | - | [^options] |
|
| ``options`` | `Array<Object>` | - | [^options] |
|
||||||
| `value` | `Array<*>|*` | - | [^value] |
|
| ``value`` | `Array<*>|*` | - | [^value] |
|
||||||
| `multiple` | `boolean` | `false` | 是否允许多选。 |
|
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
|
||||||
| `inline` | `boolean` | `false` | 下拉面板是否内联展示。 |
|
| ``inline`` | `boolean` | `false` | 下拉面板是否内联展示。 |
|
||||||
| `max` | `number` | - | 多选时允许选择的项目上限。 |
|
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
|
||||||
| `placeholder` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
|
| ``placeholder`` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
|
||||||
| `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
|
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
|
||||||
| `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
|
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `column-trigger` | `hover | click` | `click` | [^column-trigger] |
|
| ``column-trigger`` | `hover | click` | `click` | [^column-trigger] |
|
||||||
| `select-mode` | `'leaf-only' | 'any'` | `any` | [^select-mode] |
|
| ``select-mode`` | `'leaf-only' | 'any'` | `any` | [^select-mode] |
|
||||||
| `column-width` | `number | string` | - | [^column-width] |
|
| ``column-width`` | `number | string` | - | [^column-width] |
|
||||||
| `show-select-all` | `boolean` | `false` | 在多选模式下是否有全选按钮。 |
|
| ``show-select-all`` | `boolean` | `false` | 在多选模式下是否有全选按钮。 |
|
||||||
| `value-display` | `'complete' | 'simple'` | `simple` | [^value-display] |
|
| ``value-display`` | `'complete' | 'simple'` | `simple` | [^value-display] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -75,7 +75,7 @@
|
|||||||
| `label` | `string` | 选项的文字说明。 |
|
| `label` | `string` | 选项的文字说明。 |
|
||||||
| `value` | `*` | 选项对应的值。 |
|
| `value` | `*` | 选项对应的值。 |
|
||||||
| `position` | `string` | 下级节点如何展示,默认弹出,可以设置 `inline` 来内联显示。 |
|
| `position` | `string` | 下级节点如何展示,默认弹出,可以设置 `inline` 来内联显示。 |
|
||||||
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 `options` 属性数组项。 |
|
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
|
||||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -139,16 +139,16 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `trigger` | [^slot-trigger] |
|
| ``trigger`` | [^slot-trigger] |
|
||||||
| `pane` | 下拉面板中的内容插槽。用域参数同 `trigger` 插槽。 |
|
| ``pane`` | 下拉面板中的内容插槽。用域参数同 [`trigger`](#slots-trigger) 插槽。 |
|
||||||
| `before` | 选项列表前的内容。无默认内容。作用域参数同 `trigger` 插槽。 |
|
| ``before`` | 选项列表前的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
|
||||||
| `after` | 选项列表后的内容。无默认内容。作用域参数同 `trigger` 插槽。 |
|
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
|
||||||
| `column-before` | [^slot-column-before] |
|
| ``column-before`` | [^slot-column-before] |
|
||||||
| `column-after` | 下拉面板中每列后的区域。无默认内容。作用域参数同 `column-before` 插槽。 |
|
| ``column-after`` | 下拉面板中每列后的区域。无默认内容。作用域参数同 [`column-before`](#slots-column-before) 插槽。 |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
| `option-label` | [^slot-option-label] |
|
| ``option-label`` | [^slot-option-label] |
|
||||||
| `option` | [^slot-option] |
|
| ``option`` | [^slot-option] |
|
||||||
| `selected` | [^slot-selected] |
|
| ``selected`` | [^slot-selected] |
|
||||||
|
|
||||||
^^^slot-trigger
|
^^^slot-trigger
|
||||||
整个下拉触发区域。
|
整个下拉触发区域。
|
||||||
@ -218,7 +218,7 @@
|
|||||||
|
|
||||||
默认内容:`Option` 内的组件默认结构。
|
默认内容:`Option` 内的组件默认结构。
|
||||||
|
|
||||||
作用域参数同 `option-label` 插槽。
|
作用域参数同 [`option-label`](#slots-option-label) 插槽。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^slot-selected
|
^^^slot-selected
|
||||||
@ -246,10 +246,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | 输入搜索关键词时触发。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。 |
|
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。 |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
| `afteropen` | 下拉打开后触发。 |
|
| ``afteropen`` | 下拉打开后触发。 |
|
||||||
| `afterclose` | 下拉关闭后触发。 |
|
| ``afterclose`` | 下拉关闭后触发。 |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
:::badges
|
:::badges
|
||||||
@ -263,7 +263,7 @@
|
|||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `cascader.placeholder` | `string` | `@@cascader.placeholder` | 未选择时的占位内容。 |
|
| ``cascader.placeholder`` | `string` | `@@cascader.placeholder` | 未选择时的占位内容。 |
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
`@@` 开头的值表示引用多语言配置中的相应字段。
|
`@@` 开头的值表示引用多语言配置中的相应字段。
|
||||||
@ -273,7 +273,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 展开下拉。 |
|
| ``expand`` | 展开下拉。 |
|
||||||
| `collapse` | 收起下拉。 |
|
| ``collapse`` | 收起下拉。 |
|
||||||
| `clear` | 清除。 |
|
| ``clear`` | 清除。 |
|
||||||
| `separator` | 分隔符。 |
|
| ``separator`` | 分隔符。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/check-button-group/default.vue" ]]
|
[[ demo src="/demo/check-button-group/default.vue" ]]
|
||||||
|
|
||||||
@ -20,12 +20,12 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>` | `[]` | [^items] |
|
| ``items`` | `Array<Object>` | `[]` | [^items] |
|
||||||
| `value` | `Array` | `[]` | [^value] |
|
| ``value`` | `Array` | `[]` | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
| `empty-value` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
|
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -62,7 +62,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
按钮内文本区域。
|
按钮内文本区域。
|
||||||
@ -85,7 +85,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
:::badges
|
:::badges
|
||||||
@ -99,4 +99,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `check` | 已选标志。 |
|
| ``check`` | 已选标志。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/checkbox-group/default.vue" ]]
|
[[ demo src="/demo/checkbox-group/default.vue" ]]
|
||||||
|
|
||||||
@ -20,12 +20,12 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>` | `[]` | [^items] |
|
| ``items`` | `Array<Object>` | `[]` | [^items] |
|
||||||
| `value` | `Array` | `[]` | [^value] |
|
| ``value`` | `Array` | `[]` | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
| `empty-value` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
|
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值,通常用于存在 `exclusive` 选项的场景。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -62,7 +62,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
选项描述文本区域。
|
选项描述文本区域。
|
||||||
@ -85,7 +85,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/checkbox/size.vue" ]]
|
[[ demo src="/demo/checkbox/size.vue" ]]
|
||||||
|
|
||||||
### 值设定
|
### 值设定
|
||||||
|
|
||||||
可以通过设置 `true-value` 和 `false-value` 来修改选中、非选中状态下 `model` 属性(`v-model`)的值。
|
可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 属性 `v-model` 的值。
|
||||||
|
|
||||||
[[ demo src="/demo/checkbox/value.vue" ]]
|
[[ demo src="/demo/checkbox/value.vue" ]]
|
||||||
|
|
||||||
@ -20,14 +20,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `checked` | `boolean=` | `false` | [^checked] |
|
| ``checked`` | `boolean=` | `false` | [^checked] |
|
||||||
| `value` | `*` | - | 当 `v-model` 绑定到数组时,代表当前复选框的值。 |
|
| ``value`` | `*` | - | 当 `v-model` 绑定到数组时,代表当前复选框的值。 |
|
||||||
| `true-value` | `*=` | `true` | 选中状态对应的值。 |
|
| ``true-value`` | `*=` | `true` | 选中状态对应的值。 |
|
||||||
| `false-value` | `*=` | `false` | 未选状态对应的值。 |
|
| ``false-value`` | `*=` | `false` | 未选状态对应的值。 |
|
||||||
| `indeterminate` | `boolean=` | `false` | 是否处于半选状态。 |
|
| ``indeterminate`` | `boolean=` | `false` | 是否处于半选状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -52,21 +52,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 复选框的描述文本,点击时会切换选择状态。无默认内容。 |
|
| ``default`` | 复选框的描述文本,点击时会切换选择状态。无默认内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
|
| ``change`` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 `change` 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
此外,`Checkbox` 支持如下的原生事件:
|
此外,`Checkbox` 支持如下的原生事件:
|
||||||
@ -79,5 +79,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `checked` | 已选状态。 |
|
| ``checked`` | 已选状态。 |
|
||||||
| `indeterminate` | 半选状态。 |
|
| ``indeterminate`` | 半选状态。 |
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/collapse/size.vue" ]]
|
[[ demo src="/demo/collapse/size.vue" ]]
|
||||||
|
|
||||||
@ -18,10 +18,10 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `label` | `string` | - | 折叠面板标题。 |
|
| ``label`` | `string` | - | 折叠面板标题。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `name` | `string | number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时,用来提供已展开面板的唯一标识。 |
|
| ``name`` | `string | number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时,用来提供已展开面板的唯一标识。 |
|
||||||
|
|
||||||
^^^expanded
|
^^^expanded
|
||||||
:::badges
|
:::badges
|
||||||
@ -35,18 +35,18 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 折叠式面板内容区。 |
|
| ``default`` | 折叠式面板内容区。 |
|
||||||
| `title` | 折叠式面板标题区。 |
|
| ``title`` | 折叠式面板标题区。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `toggle` | 点击标题区触发展开/收起时触发。回调参数为 `(expanded: boolean)`。`expanded` 为面板是否展开。 |
|
| ``toggle`` | 点击标题区触发展开/收起时触发。回调参数为 `(expanded: boolean)`。`expanded` 为面板是否展开。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 收起状态,点击后展开。 |
|
| ``expand`` | 收起状态,点击后展开。 |
|
||||||
| `collapse` | 展开状态,点击后收起。 |
|
| ``collapse`` | 展开状态,点击后收起。 |
|
||||||
|
@ -14,29 +14,29 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `title` | `string` | - | 列标题。 |
|
| ``title`` | `string` | - | 列标题。 |
|
||||||
| `field` | `string` | - | 列的键名,对应所属的 `Table` 组件 `data` 属性数据项的某个字段。 |
|
| ``field`` | `string` | - | 列的键名,对应所属的 `Table` 组件 [`data`](./table#props-data) 属性数据项的某个字段。 |
|
||||||
| `width` | `string=|number=` | - | 列宽,值为像素值。 |
|
| ``width`` | `string=|number=` | - | 列宽,值为像素值。 |
|
||||||
| `sortable` | `boolean=` | `false` | [^sortable] |
|
| ``sortable`` | `boolean=` | `false` | [^sortable] |
|
||||||
| `align` | `string=` | - | 内容对齐方式,支持 `left`/`center`/`right`。 |
|
| ``align`` | `string=` | - | 内容对齐方式,支持 `left` / `center` / `right`。 |
|
||||||
| `span` | `function(number): Object=` | | [^span] |
|
| ``span`` | `function(number): Object=` | | [^span] |
|
||||||
| `desc` | `string` | - | 表头描述。 |
|
| ``desc`` | `string` | - | 表头描述。 |
|
||||||
| `filter-value` | `*` | - | [^filter-value] |
|
| ``filter-value`` | `*` | - | [^filter-value] |
|
||||||
| `filter-multiple` | `boolean=` | `false` | 内置筛选是否为多选。 |
|
| ``filter-multiple`` | `boolean=` | `false` | 内置筛选是否为多选。 |
|
||||||
| `filter-options` | `Array<Object>` | - | 筛选选项列表,项目的类型为 `{label, value, options, disabled, ...}`,可参考 [`Select`](./select) 组件的 `options` 属性。 |
|
| ``filter-options`` | `Array<Object>` | - | 筛选选项列表,项目的类型为 `{label, value, options, disabled, ...}`,可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
|
||||||
| `filter-title` | `string=` | - | 筛选下拉的标题。 |
|
| ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
|
||||||
| `allowed-orders` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
|
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
|
||||||
|
|
||||||
^^^sortable
|
^^^sortable
|
||||||
本列是否支持排序。
|
本列是否支持排序。
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
组件本身不会处理排序逻辑,仅会在排序按钮被点击时在 `Table` 上抛出 `sort` 事件,使用者需要自行处理排序逻辑。
|
组件本身不会处理排序逻辑,仅会在排序按钮被点击时在 `Table` 上抛出 [`sort`](./table#events-sort) 事件,使用者需要自行处理排序逻辑。
|
||||||
:::
|
:::
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^span
|
^^^span
|
||||||
单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 `data` 属性中的索引。返回值的 `row`/`col` 字段对应于单元格的 `rowspan`/`colspan`,默认值均为 `1`。
|
单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 [`data`](./table#props-data) 属性中的索引。返回值的 `row` / `col` 字段对应于单元格的 `rowspan` / `colspan`,默认值均为 `1`。
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
可以参考 `Table` 组件中的[示例 › 高级](./table#高级)来了解如何使用。
|
可以参考 `Table` 组件中的[示例 › 高级](./table#高级)来了解如何使用。
|
||||||
@ -67,25 +67,25 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `head` | 列头区域。 |
|
| ``head`` | 列头区域。 |
|
||||||
| `foot` | [^slot-foot] |
|
| ``foot`` | [^slot-foot] |
|
||||||
| `default` | [^slot-default] |
|
| ``default`` | [^slot-default] |
|
||||||
| `sub-row` | [^slot-sub-row] |
|
| ``sub-row`` | [^slot-sub-row] |
|
||||||
| `desc` | [^slot-desc] |
|
| ``desc`` | [^slot-desc] |
|
||||||
| `filter` | [^slot-filter] |
|
| ``filter`` | [^slot-filter] |
|
||||||
|
|
||||||
^^^slot-foot
|
^^^slot-foot
|
||||||
列脚区域。
|
列脚区域。
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
如果所属的 `Table` 组件定义了 `foot` 插槽,单独的列脚配置将被覆盖。
|
如果所属的 `Table` 组件定义了 [`foot`](./table#slots-foot) 插槽,单独的列脚配置将被覆盖。
|
||||||
:::
|
:::
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^slot-default
|
^^^slot-default
|
||||||
单元格的内容。
|
单元格的内容。
|
||||||
|
|
||||||
默认内容:表格 `data` 数据项中与 `field` 属性对应的字段值。
|
默认内容:表格 `data` 数据项中与 [`field`](#props-field) 属性对应的字段值。
|
||||||
|
|
||||||
作用域参数为 `data` 内当前行数据中的所有字段。
|
作用域参数为 `data` 内当前行数据中的所有字段。
|
||||||
^^^
|
^^^
|
||||||
@ -93,17 +93,17 @@
|
|||||||
^^^slot-sub-row
|
^^^slot-sub-row
|
||||||
展开行后子行的内容。使用此插槽时,内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组,展开的子行数与 `children` 内数据项数相同,使用相同的列配置。
|
展开行后子行的内容。使用此插槽时,内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组,展开的子行数与 `children` 内数据项数相同,使用相同的列配置。
|
||||||
|
|
||||||
默认内容:表格 `data[i].children[j]` 数据项中与 `field` 属性对应的字段值。
|
默认内容:表格 `data[i].children[j]` 数据项中与 [`field`](#props-field) 属性对应的字段值。
|
||||||
|
|
||||||
作用域参数当前子行数据中的所有字段,以及当前主行对应索引值 `index`。
|
作用域参数当前子行数据中的所有字段,以及当前主行对应索引值 `index`。
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
如果所属的 `Table` 组件定义了插槽 `sub-row`,单独列的 `sub-row` 将被覆盖。
|
如果所属的 `Table` 组件定义了 [`sub-row`](./table#slots-sub-row) 插槽,单独列的 `sub-row` 插槽将被覆盖。
|
||||||
:::
|
:::
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^slot-desc
|
^^^slot-desc
|
||||||
表头描述。使用此插槽时会覆盖 `Column` 的 `desc` 属性。
|
表头描述。使用此插槽时会覆盖 `Column` 的 [`desc`](#props-desc) 属性。
|
||||||
|
|
||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
|
@ -13,10 +13,10 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `value` | `Object` | - | 向其后代组件提供的配置值。 |
|
| ``value`` | `Object` | - | 向其后代组件提供的配置值。 |
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 需要接收配置的内容,其中 VEUI 的组件会响应对应的配置值。 |
|
| ``default`` | 需要接收配置的内容,其中 VEUI 的组件会响应对应的配置值。 |
|
||||||
|
@ -12,15 +12,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `title` | `string=` | - | 标题。 |
|
| ``title`` | `string=` | - | 标题。 |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
||||||
| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
|
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||||
| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
|
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
|
| ``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#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -34,14 +34,14 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | 底部区域,默认会展示“确定”、“取消”按钮。 |
|
| ``foot`` | 底部区域,默认会展示“确定”、“取消”按钮。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `ok` | 点击“确定”按钮时触发。 |
|
| ``ok`` | 点击“确定”按钮时触发。 |
|
||||||
| `cancel` | 点击“取消”按钮时触发。 |
|
| ``cancel`` | 点击“取消”按钮时触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
@ -4,19 +4,19 @@
|
|||||||
|
|
||||||
### 单日选择
|
### 单日选择
|
||||||
|
|
||||||
默认情况下,在下拉浮层中单击日期可以选中一个日期。可以配置 `clearable` 属性来允许清除已选值,用 `placeholder` 属性来配置未选择时的占位文本。
|
默认情况下,在下拉浮层中单击日期可以选中一个日期。可以配置 [`clearable`](#props-clearable) 属性来允许清除已选值,用 [`placeholder`](#props-placeholder) 属性来配置未选择时的占位文本。
|
||||||
|
|
||||||
[[ demo src="/demo/date-picker/default.vue" ]]
|
[[ demo src="/demo/date-picker/default.vue" ]]
|
||||||
|
|
||||||
### 日期范围选择
|
### 日期范围选择
|
||||||
|
|
||||||
配置 `range` 属性时,可以在下拉浮层中选择一个日期范围。
|
配置 [`range`](#props-range) 属性时,可以在下拉浮层中选择一个日期范围。
|
||||||
|
|
||||||
[[ demo src="/demo/date-picker/range.vue" ]]
|
[[ demo src="/demo/date-picker/range.vue" ]]
|
||||||
|
|
||||||
### 设置快捷选项
|
### 设置快捷选项
|
||||||
|
|
||||||
选择日期范围时,可以通过配置 `shortcuts` 属性来提供快捷选项。
|
选择日期范围时,可以通过配置 [`shortcuts`](#props-shortcuts) 属性来提供快捷选项。
|
||||||
|
|
||||||
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
|
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
|
||||||
|
|
||||||
@ -26,29 +26,29 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `type` | `string` | `'date'` | 日历的类型,可用值为 `'date'`/`'month'`/`'year'`,分别对应日期/月/年视图。 |
|
| ``type`` | `string` | `'date'` | 日历的类型,可用值为 `'date'` / `'month'` / `'year'`,分别对应日期/月/年视图。 |
|
||||||
| `range` | `boolean` | `false` | 是否选择日期范围。 |
|
| ``range`` | `boolean` | `false` | 是否选择日期范围。 |
|
||||||
| `selected` | `Date | Array` | - | [^selected] |
|
| ``selected`` | `Date | Array` | - | [^selected] |
|
||||||
| `today` | `Date` | `new Date()` | 「今天」的日期。 |
|
| ``today`` | `Date` | `new Date()` | 「今天」的日期。 |
|
||||||
| `week-start` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#全局配置)。 |
|
| ``week-start`` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#configs-calendar-weekstart)。 |
|
||||||
| `fill-month` | `boolean` | `true` | 当只有一个面板时,是否要在当前月份面板显示非本月日期。 |
|
| ``fill-month`` | `boolean` | `true` | 当只有一个面板时,是否要在当前月份面板显示非本月日期。 |
|
||||||
| `date-class` | `string | Array | Object | function` | `{}` | 特定日期的自定义 HTML `class`。传非函数时,数据格式为所有 Vue 支持的 `class` 表达式;传函数时,签名为 `function(Date): string | Array<string>|Object<string, boolean>`,返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
|
| ``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` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期,会作为第二个参数传入。 |
|
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期,会作为第二个参数传入。 |
|
||||||
| `clearable` | `boolean` | `false` | 已选值是否可以清除。 |
|
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
|
||||||
| `placeholder` | `string` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | 未选择时的占位文本。可进行[全局配置](#全局配置)。 |
|
| ``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)。传入函数可自定义格式化逻辑。 |
|
| ``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` 对象的函数。 |
|
| ``parse`` | `function(string): Date=` | - | 自定义将输入字符串解析为 `Date` 对象的函数。 |
|
||||||
| `shortcuts` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
|
| ``shortcuts`` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^selected
|
^^^selected
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
已选日期(范围)的值,根据 `range` 属性值的不同,数据格式不同。
|
已选日期(范围)的值,根据 [`range`](#props-range) 属性值的不同,数据格式不同。
|
||||||
|
|
||||||
+++类型详情
|
+++类型详情
|
||||||
| `range` | 类型 |
|
| `range` | 类型 |
|
||||||
@ -59,7 +59,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^shortcuts
|
^^^shortcuts
|
||||||
在选择范围时,可以定制的浮层中的快捷选择项列表,格式为 `Array<{label, from, to}>`。可进行[全局配置](#全局配置)。
|
在选择范围时,可以定制的浮层中的快捷选择项列表,格式为 `Array<{label, from, to}>`。可进行[全局配置](#configs-datepicker-shortcuts)。
|
||||||
|
|
||||||
+++字段详情
|
+++字段详情
|
||||||
<table>
|
<table>
|
||||||
@ -99,7 +99,7 @@
|
|||||||
+++字段详情
|
+++字段详情
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `startOf` | `string=` | `'day'` | 起始日期基准,支持的值有 `'day'`/`'week'`/`'month'`/`'quarter'`/`'year'`。 |
|
| `startOf` | `string=` | `'day'` | 起始日期基准,支持的值有 `'day'` / `'week'` / `'month'` / `'quarter'` / `'year'`。 |
|
||||||
| `day` | `number=` | - | 偏移的天数。 |
|
| `day` | `number=` | - | 偏移的天数。 |
|
||||||
| `week` | `number=` | - | 偏移的周数。 |
|
| `week` | `number=` | - | 偏移的周数。 |
|
||||||
| `month` | `number=` | - | 偏移的月数。 |
|
| `month` | `number=` | - | 偏移的月数。 |
|
||||||
@ -170,7 +170,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `date` | [^slot-date] |
|
| ``date`` | [^slot-date] |
|
||||||
|
|
||||||
^^^slot-date
|
^^^slot-date
|
||||||
浮层中日历的单日单元格内的区域,可用来定制每一天对应区域的内容。
|
浮层中日历的单日单元格内的区域,可用来定制每一天对应区域的内容。
|
||||||
@ -190,21 +190,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
| `selectstart` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
|
| ``selectstart`` | 选择日期范围时,选择完起始日期时触发,回调参数 `(picking: Date)`,表示已选的起始项日期。 |
|
||||||
| `selectprogress` | [^event-selectprogress] |
|
| ``selectprogress`` | [^event-selectprogress] |
|
||||||
| `toggle` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
|
| ``toggle`` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选择修改后触发,回调参数为 `(selected)`。数据类型和 `selected` 属性一致。
|
选择修改后触发,回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^event-selectprogress
|
^^^event-selectprogress
|
||||||
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 `multiple` 属性的值。
|
选择日期范围时,在已经选择开始日期后,通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`,表示当前标记的日期范围,类型取决于 [`multiple`](#props-multiple) 属性的值。
|
||||||
|
|
||||||
+++参数详请
|
+++参数详请
|
||||||
| `multiple` | 类型 |
|
| `multiple` | 类型 |
|
||||||
@ -218,13 +218,13 @@
|
|||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `datepicker.shortcuts` | `Array` | `[]` | 快捷选项配置。 |
|
| ``datepicker.shortcuts`` | `Array` | `[]` | 快捷选项配置。 |
|
||||||
| `datepicker.placeholder` | `string` | `@@datepicker.selectDate` | 选择单日时,未选择状态的占位文本。 |
|
| ``datepicker.placeholder`` | `string` | `@@datepicker.selectDate` | 选择单日时,未选择状态的占位文本。 |
|
||||||
| `datepicker.monthPlaceholder` | `string` | `@@datepicker.selectMonth` | 选择月份时,未选择状态的占位文本。 |
|
| ``datepicker.monthPlaceholder`` | `string` | `@@datepicker.selectMonth` | 选择月份时,未选择状态的占位文本。 |
|
||||||
| `datepicker.yearPlaceholder` | `string` | `@@datepicker.selectYear` | 选择年时,未选择状态的占位文本。 |
|
| ``datepicker.yearPlaceholder`` | `string` | `@@datepicker.selectYear` | 选择年时,未选择状态的占位文本。 |
|
||||||
| `datepicker.rangePlaceholder` | `string` | `@@datepicker.selectRange` | 选择日期范围时,未选择状态的占位文本。 |
|
| ``datepicker.rangePlaceholder`` | `string` | `@@datepicker.selectRange` | 选择日期范围时,未选择状态的占位文本。 |
|
||||||
| `datepicker.monthRangePlaceholder` | `string` | `@@datepicker.selectMonthRange` | 选择月份范围时,未选择状态的占位文本。 |
|
| ``datepicker.monthRangePlaceholder`` | `string` | `@@datepicker.selectMonthRange` | 选择月份范围时,未选择状态的占位文本。 |
|
||||||
| `datepicker.yearRangePlaceholder` | `string` | `@@datepicker.selectYearRange` | 选择年份范围时,未选择状态的占位文本。 |
|
| ``datepicker.yearRangePlaceholder`` | `string` | `@@datepicker.selectYearRange` | 选择年份范围时,未选择状态的占位文本。 |
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
`@@` 开头的值表示引用多语言配置中的相应字段。
|
`@@` 开头的值表示引用多语言配置中的相应字段。
|
||||||
@ -234,5 +234,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `calendar` | 日历。 |
|
| ``calendar`` | 日历。 |
|
||||||
| `clear` | 清除内容。 |
|
| ``clear`` | 清除内容。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸与全屏
|
### 尺寸与全屏
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`/`narrow`/`medium`/`wide`/`auto`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m` / `narrow` / `medium` / `wide` / `auto`。
|
||||||
|
|
||||||
[[ demo src="/demo/dialog/size.vue" ]]
|
[[ demo src="/demo/dialog/size.vue" ]]
|
||||||
|
|
||||||
@ -38,23 +38,24 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `modal` | `boolean=` | `true` | 是否是模态对话框。模态对话框默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
|
| ``modal`` | `boolean=` | `true` | 是否是模态对话框。模态对话框默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
|
||||||
| `title` | `string=` | - | 对话框标题文本。如果指定了 `title` 插槽,则优先使用 `title` 插槽。 |
|
| ``title`` | `string=` | - | 对话框标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
||||||
| `outside-closable` | `boolean=` | `false` | 点击对话框外部时是否关闭对话框。 |
|
| ``outside-closable`` | `boolean=` | `false` | 点击对话框外部时是否关闭对话框。 |
|
||||||
| `draggable` | `boolean=` | `false` | 是否可拖拽。 |
|
| ``draggable`` | `boolean=` | `false` | 是否可拖拽。 |
|
||||||
| `escapable` | `boolean=` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭对话框。仅在 `closable` 为 `true` 时生效。 |
|
| ``escapable`` | `boolean=` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭对话框。仅在 `closable` 为 `true` 时生效。 |
|
||||||
| `inline` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
|
| ``inline`` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
|
||||||
| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
|
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
||||||
| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
|
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||||
| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
|
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
|
||||||
| `priority` | `number=` | - | 对话框浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
|
| ``priority`` | `number=` | - | 对话框浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
|
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
|
||||||
| `overlay-class` | `string | Object=` | - | 对话框浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
|
| ``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
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -112,9 +113,9 @@ methods: {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | [^slot-foot] |
|
| ``foot`` | [^slot-foot] |
|
||||||
|
|
||||||
^^^slot-foot
|
^^^slot-foot
|
||||||
底部区域,默认会展示“确定”、“取消”按钮。
|
底部区域,默认会展示“确定”、“取消”按钮。
|
||||||
@ -131,13 +132,13 @@ methods: {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
||||||
| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭对话框时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭对话框时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
||||||
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `close` | 关闭。 |
|
| ``close`` | 关闭。 |
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 位置
|
### 位置
|
||||||
|
|
||||||
使用 `placement` 属性控制抽屉弹出的位置。
|
使用 [`placement`](#props-placement) 属性控制抽屉弹出的位置。
|
||||||
|
|
||||||
[[ demo src="/demo/drawer/placement.vue" ]]
|
[[ demo src="/demo/drawer/placement.vue" ]]
|
||||||
|
|
||||||
### 模态与非模态
|
### 模态与非模态
|
||||||
|
|
||||||
使用 `modal` 属性控制抽屉是否为模态类型。
|
使用 [`modal`](#props-modal) 属性控制抽屉是否为模态类型。
|
||||||
|
|
||||||
[[ demo src="/demo/drawer/modal.vue" ]]
|
[[ demo src="/demo/drawer/modal.vue" ]]
|
||||||
|
|
||||||
@ -24,22 +24,22 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `placement` | `string` | `'right'` | [^placement] |
|
| ``placement`` | `string` | `'right'` | [^placement] |
|
||||||
| `modal` | `boolean` | `true` | 是否是模态抽屉。模态抽屉默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
|
| ``modal`` | `boolean` | `true` | 是否是模态抽屉。模态抽屉默认遮挡底层(无法点击)且抢占焦点(关闭后焦点会回归)。 |
|
||||||
| `title` | `string` | - | 抽屉标题文本。如果指定了 `title` 插槽,则优先使用 `title` 插槽。 |
|
| ``title`` | `string` | - | 抽屉标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `closable` | `boolean` | `true` | 是否显示关闭按钮。 |
|
| ``closable`` | `boolean` | `true` | 是否显示关闭按钮。 |
|
||||||
| `outside-closable` | `boolean` | `false` | 点击抽屉外部时是否关闭抽屉。 |
|
| ``outside-closable`` | `boolean` | `false` | 点击抽屉外部时是否关闭抽屉。 |
|
||||||
| `draggable` | `boolean` | `false` | 是否可拖拽。 |
|
| ``draggable`` | `boolean` | `false` | 是否可拖拽。 |
|
||||||
| `escapable` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
|
| ``escapable`` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
|
||||||
| `footless` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
|
| ``footless`` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
||||||
| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
|
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||||
| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
|
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
|
| ``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`` | `string | Object` | - | 抽屉浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -78,9 +78,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | [^slot-foot] |
|
| ``foot`` | [^slot-foot] |
|
||||||
|
|
||||||
^^^slot-foot
|
^^^slot-foot
|
||||||
底部区域,默认会展示“确定”、“取消”按钮。
|
底部区域,默认会展示“确定”、“取消”按钮。
|
||||||
@ -96,7 +96,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
||||||
| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭抽屉时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭抽屉时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
||||||
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
@ -8,37 +8,37 @@
|
|||||||
|
|
||||||
### 样式
|
### 样式
|
||||||
|
|
||||||
可选的样式 `ui` 属性值: `primary`/`text`。
|
可选的样式 [`ui`](#props-ui) 属性值: `primary` / `text`。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/style.vue" ]]
|
[[ demo src="/demo/dropdown/style.vue" ]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/size.vue" ]]
|
[[ demo src="/demo/dropdown/size.vue" ]]
|
||||||
|
|
||||||
### 内联模式
|
### 内联模式
|
||||||
|
|
||||||
`Dropdown` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 `options` 属性。
|
`Dropdown` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 [`options`](#props-options) 属性。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/inline.vue" ]]
|
[[ demo src="/demo/dropdown/inline.vue" ]]
|
||||||
|
|
||||||
### 含搜索的下拉框菜单
|
### 含搜索的下拉框菜单
|
||||||
|
|
||||||
使用 `searchable` 属性使组件支持搜索并高亮显示符合条件的选项。
|
使用 [`searchable`](#props-searchable) 属性使组件支持搜索并高亮显示符合条件的选项。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/searchable.vue" ]]
|
[[ demo src="/demo/dropdown/searchable.vue" ]]
|
||||||
|
|
||||||
### 禁用状态的下拉框菜单
|
### 禁用状态的下拉框菜单
|
||||||
|
|
||||||
使用数据源中的 `disabled` 属性来禁用下拉项。
|
使用数据源中的 [`disabled`](#props-disabled) 属性来禁用下拉项。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/disable.vue" ]]
|
[[ demo src="/demo/dropdown/disable.vue" ]]
|
||||||
|
|
||||||
### 下拉触发时机与分离按钮
|
### 下拉触发时机与分离按钮
|
||||||
|
|
||||||
使用 `trigger` 属性指定展开下拉菜单的时机,使用 `split` 属性来使命令按钮与下拉按钮分离。
|
使用 [`trigger`](#props-trigger) 属性指定展开下拉菜单的时机,使用 [`split`](#props-split) 属性来使命令按钮与下拉按钮分离。
|
||||||
|
|
||||||
[[ demo src="/demo/dropdown/other.vue" ]]
|
[[ demo src="/demo/dropdown/other.vue" ]]
|
||||||
|
|
||||||
@ -48,15 +48,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `options` | `Array<Object>=` | `[]` | [^options] |
|
| ``options`` | `Array<Object>=` | `[]` | [^options] |
|
||||||
| `label` | `string` | - | 下拉按钮的描述文本。 |
|
| ``label`` | `string` | - | 下拉按钮的描述文本。 |
|
||||||
| `trigger` | `string=` | `'click'` | 触发下拉框展开的时机,可选值为 `'click'`/`'hover'`。 |
|
| ``trigger`` | `string=` | `'click'` | 触发下拉框展开的时机,可选值为 `'click'` / `'hover'`。 |
|
||||||
| `split` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
|
| ``split`` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -81,7 +81,7 @@
|
|||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 选项的文字说明。 |
|
| `label` | `string` | 选项的文字说明。 |
|
||||||
| `value` | `*` | 选项对应的值。 |
|
| `value` | `*` | 选项对应的值。 |
|
||||||
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 `options` 属性数组项。 |
|
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
|
||||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -98,14 +98,14 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 选项列表的内容。在没有指定 `options` 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
|
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
|
||||||
| `before` | 选项列表前的内容。无默认内容。 |
|
| ``before`` | 选项列表前的内容。无默认内容。 |
|
||||||
| `after` | 选项列表后的内容。无默认内容。 |
|
| ``after`` | 选项列表后的内容。无默认内容。 |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
| `group-label` | [^slot-group-label] |
|
| ``group-label`` | [^slot-group-label] |
|
||||||
| `option-label` | [^slot-option-label] |
|
| ``option-label`` | [^slot-option-label] |
|
||||||
| `option` | [^slot-option] |
|
| ``option`` | [^slot-option] |
|
||||||
| `trigger` | [^slot-trigger] |
|
| ``trigger`` | [^slot-trigger] |
|
||||||
|
|
||||||
^^^slot-label
|
^^^slot-label
|
||||||
下拉按钮文本区域。
|
下拉按钮文本区域。
|
||||||
@ -174,7 +174,7 @@
|
|||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*`/`disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
|
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*` / `disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
|
||||||
| `handlers` | `Object` | [^handlers-desc] |
|
| `handlers` | `Object` | [^handlers-desc] |
|
||||||
| `expanded` | `boolean` | 下拉菜单是否展开。 |
|
| `expanded` | `boolean` | 下拉菜单是否展开。 |
|
||||||
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
|
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
|
||||||
@ -193,12 +193,12 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `click` | 点击选项后触发,回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 `split` 属性为 `true` 时,直接点击指令按钮部分也会触发,但不会携带 `value` 参数。 |
|
| ``click`` | 点击选项后触发,回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 [`split`](#props-split) 属性为 `true` 时,直接点击指令按钮部分也会触发,但不会携带 `value` 参数。 |
|
||||||
| `toggle` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
|
| ``toggle`` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 展开浮层。 |
|
| ``expand`` | 展开浮层。 |
|
||||||
| `collapse` | 收起浮层。 |
|
| ``collapse`` | 收起浮层。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`/`xl`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`。
|
||||||
|
|
||||||
[[ demo src="/demo/embedded/size.vue" ]]
|
[[ demo src="/demo/embedded/size.vue" ]]
|
||||||
|
|
||||||
@ -14,15 +14,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `title` | `string=` | - | 折叠式面板标题文本。如果指定了 `title` 插槽,则优先使用 `title` 插槽。 |
|
| ``title`` | `string=` | - | 折叠式面板标题文本。如果指定了 [`title`](#slots-title) 插槽,则优先使用 [`title`](#slots-title) 插槽。 |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
||||||
| `footless` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
|
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `priority` | `number=` | - | 折叠式面板浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
|
| ``priority`` | `number=` | - | 折叠式面板浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
|
| ``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`` | `string | Object=` | - | 折叠式面板浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -47,9 +47,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | [^slot-foot] |
|
| ``foot`` | [^slot-foot] |
|
||||||
|
|
||||||
^^^slot-foot
|
^^^slot-foot
|
||||||
底部区域,默认会展示“确定”、“取消”按钮。
|
底部区域,默认会展示“确定”、“取消”按钮。
|
||||||
@ -66,7 +66,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `ok` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
|
||||||
| `cancel` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭折叠式面板时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭折叠式面板时,或者通过调用作用域函数 `close('cancel')` 时触发。 |
|
||||||
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
| <var><value></var> | 通过调用作用域函数 `close(value)` 时触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
@ -14,14 +14,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
||||||
| `label` | `string` | - | 表单项描述。 |
|
| ``label`` | `string` | - | 表单项描述。 |
|
||||||
| `tip` | `string` | - | 表单项提示。 |
|
| ``tip`` | `string` | - | 表单项提示。 |
|
||||||
| `name` | `string` | - | 表单项名称,可用于指定数据字段名或展示错误消息的定位。 |
|
| ``name`` | `string` | - | 表单项名称,可用于指定数据字段名或展示错误消息的定位。 |
|
||||||
| `field` | `string` | - | [^field] |
|
| ``field`` | `string` | - | [^field] |
|
||||||
| `rules` | `string | Array<Object>` | - | [^rules] |
|
| ``rules`` | `string | Array<Object>` | - | [^rules] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -86,8 +86,8 @@ let minLengthRule = {
|
|||||||
+++内置规则
|
+++内置规则
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `required` | `boolean` | 值不能为空值(`null`/`undefined`/`''`/`[]`)。 |
|
| `required` | `boolean` | 值不能为空值(`null` / `undefined` / `''` / `[]`)。 |
|
||||||
| `numeric` | `boolean` | 值必须可描述十进制数值。(`6`/`66.6`/`6e6`/`'6'`/`.6`) |
|
| `numeric` | `boolean` | 值必须可描述十进制数值。(`6` / `66.6` / `6e6` / `'6'` / `.6`) |
|
||||||
| `pattern` | `RegExp | string` | 正则匹配。 |
|
| `pattern` | `RegExp | string` | 正则匹配。 |
|
||||||
| `maxLength` | `number` | 值的 `length` 属性不能大于限定值。 |
|
| `maxLength` | `number` | 值的 `length` 属性不能大于限定值。 |
|
||||||
| `minLength` | `number` | 值的 `length` 属性不能小于限定值。 |
|
| `minLength` | `number` | 值的 `length` 属性不能小于限定值。 |
|
||||||
@ -105,12 +105,12 @@ let minLengthRule = {
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^field
|
^^^field
|
||||||
非必须,默认取 `name` 属性值。在特殊情况下,用于指定表单 `data` 属性对应字段的路径。
|
非必须,默认取 [`name`](#props-name) 属性值。在特殊情况下,用于指定表单 [`data`](./form#props-data) 属性对应字段的路径。
|
||||||
|
|
||||||
+++格式示例
|
+++格式示例
|
||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `username` | 对应表单 `data` 属性引用值的 `username` 属性,等价于 `data.username`。 |
|
| `username` | 对应表单 [`data`](./form#props-data) 属性引用值的 `username` 属性,等价于 `data.username`。 |
|
||||||
| `users[0]` | 等价于 `data.users[0]`。 |
|
| `users[0]` | 等价于 `data.users[0]`。 |
|
||||||
| `user.username` | 等价于 `data.user.username`。 |
|
| `user.username` | 等价于 `data.user.username`。 |
|
||||||
+++
|
+++
|
||||||
@ -120,12 +120,12 @@ let minLengthRule = {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 用于内联输入组件。无默认内容。 |
|
| ``default`` | 用于内联输入组件。无默认内容。 |
|
||||||
| `label` | 填充表单项描述的内容。默认为 `label` 属性的文本值。 |
|
| ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
|
||||||
| `tip` | 填充表单项提示的内容。默认为 `tip` 属性的文本值。 |
|
| ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `alert` | 警示图标。 |
|
| ``alert`` | 警示图标。 |
|
||||||
|
@ -14,17 +14,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
||||||
| `label` | `string` | - | 表单项集合描述。 |
|
| ``label`` | `string` | - | 表单项集合描述。 |
|
||||||
| `tip` | `string` | - | 表单项集合提示。 |
|
| ``tip`` | `string` | - | 表单项集合提示。 |
|
||||||
| `name` | `string` | - | 表单项集合名称,用于展示错误消息的定位。 |
|
| ``name`` | `string` | - | 表单项集合名称,用于展示错误消息的定位。 |
|
||||||
| `required` | `boolean` | - | 是否显示必要性星号提示。 |
|
| ``required`` | `boolean` | - | 是否显示必要性星号提示。 |
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 用于内联 `Field` 组件。无默认内容。 |
|
| ``default`` | 用于内联 `Field` 组件。无默认内容。 |
|
||||||
| `label` | 填充表单项集合描述的内容。默认为 `label` 属性的文本值。 |
|
| ``label`` | 填充表单项集合描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
|
||||||
| `tip` | 填充表单项集合提示的内容。默认为 `tip` 属性的文本值。 |
|
| ``tip`` | 填充表单项集合提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
|
||||||
|
@ -10,11 +10,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `datasource` | `Array<Object>` | `[]` | 数据源,项目类型为 `{label: string, ...}`。 |
|
| ``datasource`` | `Array<Object>` | `[]` | 数据源,项目类型为 `{label: string, ...}`。 |
|
||||||
| `searchable` | `boolean=` | `true` | 是否允许搜索。 |
|
| ``searchable`` | `boolean=` | `true` | 是否允许搜索。 |
|
||||||
| `filter` | `function=` | 见描述 | [^filter] |
|
| ``filter`` | `function=` | 见描述 | [^filter] |
|
||||||
| `search-on-input` | `boolean=` | `true` | 是否在输入的时候触发搜索。 |
|
| ``search-on-input`` | `boolean=` | `true` | 是否在输入的时候触发搜索。 |
|
||||||
| `placeholder` | `string=` | - | 搜索框的占位符。 |
|
| ``placeholder`` | `string=` | - | 搜索框的占位符。 |
|
||||||
|
|
||||||
^^^filter
|
^^^filter
|
||||||
搜索过滤函数,签名为 `function(keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
|
搜索过滤函数,签名为 `function(keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
|
||||||
@ -25,7 +25,7 @@
|
|||||||
| `keyword` | `string` | 搜索关键词。 |
|
| `keyword` | `string` | 搜索关键词。 |
|
||||||
| `item` | `Object` | 当前遍历到的数据节点。 |
|
| `item` | `Object` | 当前遍历到的数据节点。 |
|
||||||
| `index` | `number` | 当前数据节点在兄弟节点中的索引。 |
|
| `index` | `number` | 当前数据节点在兄弟节点中的索引。 |
|
||||||
| `datasource` | `Array<{label: string, ...}>` | 与 `datasource` 属性一致。 |
|
| `datasource` | `Array<{label: string, ...}>` | 与 [`datasource`](#props-datasource) 属性一致。 |
|
||||||
+++
|
+++
|
||||||
|
|
||||||
+++默认值
|
+++默认值
|
||||||
@ -43,9 +43,9 @@ function (keyword, { label }) {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `head` | 标题区域。默认显示 `title` 属性值。 |
|
| ``head`` | 标题区域。默认显示 [`title`](#props-title) 属性值。 |
|
||||||
| `no-data` | `datasource` 中没数据时显示的内容。 |
|
| ``no-data`` | `datasource` 中没数据时显示的内容。 |
|
||||||
| `default` | [^default] |
|
| ``default`` | [^default] |
|
||||||
|
|
||||||
^^^default
|
^^^default
|
||||||
主内容区域。
|
主内容区域。
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 基础样式
|
### 基础样式
|
||||||
|
|
||||||
使用 `actions` 插槽来提供表单操作按钮。
|
使用 [`actions`](#slots-actions) 插槽来提供表单操作按钮。
|
||||||
|
|
||||||
[[ demo src="/demo/form/normal.vue" ]]
|
[[ demo src="/demo/form/normal.vue" ]]
|
||||||
|
|
||||||
@ -34,12 +34,12 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
|
||||||
| `data` | `Object` | - | [^data] |
|
| ``data`` | `Object` | - | [^data] |
|
||||||
| `validators` | `Array<Object>=` | - | [^validators] |
|
| ``validators`` | `Array<Object>=` | - | [^validators] |
|
||||||
| `before-validate` | `function=` | - | 表单进入提交流程后,进行校验之前的 hook,传入参数为 `(data)`,`data` 为表单 `data` 属性值的副本。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
|
| ``before-validate`` | `function=` | - | 表单进入提交流程后,进行校验之前的 hook,传入参数为 `(data)`,`data` 为表单 [`data`](#props-data) 属性值的副本。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
|
||||||
| `after-validate` | `function=` | - | 表单校验成功后,触发 `submit` 事件之前的 hook,传入参数为 `(data)`,与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
|
| ``after-validate`` | `function=` | - | 表单校验成功后,触发 [`submit`](#events-submit) 事件之前的 hook,传入参数为 `(data)`,与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`,返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续,其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
|
||||||
|
|
||||||
^^^data
|
^^^data
|
||||||
表单绑定的数据,和表单中的输入组件通过 `v-model` 绑定,也是表单校验时的数据源。
|
表单绑定的数据,和表单中的输入组件通过 `v-model` 绑定,也是表单校验时的数据源。
|
||||||
@ -56,7 +56,7 @@
|
|||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
|
| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
|
||||||
| `validate` | `function` | 自定义校验函数,传入参数为 `(data[fields[0]], data[fields[1]], ...)`,`data` 为表单 `data` 属性值的引用。返回 `undefined`/`true` 代表校验成功,返回 `{[field]: message, ...}` 表示校验失败信息,详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
|
| `validate` | `function` | 自定义校验函数,传入参数为 `(data[fields[0]], data[fields[1]], ...)`,`data` 为表单 [`data`](#props-data) 属性值的引用。返回 `undefined` / `true` 代表校验成功,返回 `{[field]: message, ...}` 表示校验失败信息,详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
|
||||||
| `triggers` | `string | Array<string>` | 事件名称集合。 |
|
| `triggers` | `string | Array<string>` | 事件名称集合。 |
|
||||||
+++
|
+++
|
||||||
|
|
||||||
@ -75,15 +75,15 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。 |
|
| ``default`` | 可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。 |
|
||||||
| `actions` | 表单操作内容,如“提交”、“取消”按钮等。无默认内容。 |
|
| ``actions`` | 表单操作内容,如“提交”、“取消”按钮等。无默认内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `submit` | [^event-submit] |
|
| ``submit`` | [^event-submit] |
|
||||||
| `invalid` | [^event-invalid] |
|
| ``invalid`` | [^event-invalid] |
|
||||||
|
|
||||||
^^^event-submit
|
^^^event-submit
|
||||||
在原生 `submit` 事件之后触发,回调参数为 `(data, event)`。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)。
|
在原生 `submit` 事件之后触发,回调参数为 `(data, event)`。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)。
|
||||||
@ -91,7 +91,7 @@
|
|||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `data` | `Object` | 表单 `data` 属性值的引用。 |
|
| `data` | `Object` | 表单 [`data`](#props-data) 属性值的引用。 |
|
||||||
| `event` | `Event` | 原生事件对象。 |
|
| `event` | `Event` | 原生事件对象。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -105,7 +105,7 @@
|
|||||||
<img class="preview hero" src="/images/development/form/flow.png">
|
<img class="preview hero" src="/images/development/form/flow.png">
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
`beforeValidate` 和 `afterValidate` 以及 `sumbit` 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性,`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
|
`beforeValidate` 和 `afterValidate` 以及 [`submit`](#events-submit) 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性,`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### 表单校验逻辑
|
### 表单校验逻辑
|
||||||
@ -157,7 +157,7 @@ validators: [
|
|||||||
|
|
||||||
#### `Field` 的 `rule` 和 `validators` 的优先级
|
#### `Field` 的 `rule` 和 `validators` 的优先级
|
||||||
|
|
||||||
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验,`validators` 的校验结果优先级大于 `Field` 的 `rule`,不同操作触发的校验,展现最后一个结果。`Field` 的 `rule` 内部的优先级,参考[表单项 › 属性](./field#属性)。
|
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验,`validators` 的校验结果优先级大于 `Field` 的 `rule`,不同操作触发的校验,展现最后一个结果。`Field` 的 `rule` 内部的优先级,请参考其 [`rules`](./field#props-rules) 属性。
|
||||||
|
|
||||||
#### 交互过程的校验
|
#### 交互过程的校验
|
||||||
|
|
||||||
@ -167,4 +167,4 @@ validators: [
|
|||||||
|
|
||||||
<img class="preview hero" src="/images/development/form/submit.png">
|
<img class="preview hero" src="/images/development/form/submit.png">
|
||||||
|
|
||||||
提交时,其中一个过程的校验失败不会导致整个校验终止,校验信息将在两个过程执行完毕后进行整合,并传递到 [`invalid`](#事件) 事件中去。
|
提交时,其中一个过程的校验失败不会导致整个校验终止,校验信息将在两个过程执行完毕后进行整合,并传递到 [`invalid`](#events-invalid) 事件中去。
|
||||||
|
@ -14,13 +14,13 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `span` | `number` | - | 栅格栏横跨的列数,不传则默认占满整行。 |
|
| ``span`` | `number` | - | 栅格栏横跨的列数,不传则默认占满整行。 |
|
||||||
| `offset` | `number=` | `0` | 偏移列数,将影响后续栅格栏的位置。 |
|
| ``offset`` | `number=` | `0` | 偏移列数,将影响后续栅格栏的位置。 |
|
||||||
| `pull` | `number=` | `0` | 栅格栏向左偏移列数,不影响其它栅格栏的位置。不能与 `push` 同时使用。 |
|
| ``pull`` | `number=` | `0` | 栅格栏向左偏移列数,不影响其它栅格栏的位置。不能与 `push` 同时使用。 |
|
||||||
| `push` | `number=` | `0` | 栅格栏向右偏移列数,不影响其它栅格栏的位置。不能与 `pull` 同时使用。 |
|
| ``push`` | `number=` | `0` | 栅格栏向右偏移列数,不影响其它栅格栏的位置。不能与 `pull` 同时使用。 |
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 栅格栏内容。 |
|
| ``default`` | 栅格栏内容。 |
|
||||||
|
@ -20,24 +20,24 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `columns` | `number=` | `gridcontainer.columns` | 栅格列数。 |
|
| ``columns`` | `number=` | `gridcontainer.columns` | 栅格列数。 |
|
||||||
| `margin` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
|
| ``margin`` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
|
||||||
| `gutter` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
|
| ``gutter`` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
|
||||||
| `width` | `number=` | - | 当需要创建定宽布局时,用来传入容器宽度 `px` 数值。 |
|
| ``width`` | `number=` | - | 当需要创建定宽布局时,用来传入容器宽度 `px` 数值。 |
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 布局内容,直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
|
| ``default`` | 布局内容,直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `gridcontainer.columns` | `number` | `12` | 栅格列数。 |
|
| ``gridcontainer.columns`` | `number` | `12` | 栅格列数。 |
|
||||||
| `gridcontainer.gutter` | `number` | `30` | 栅格列间距 `px` 数值。 |
|
| ``gridcontainer.gutter`` | `number` | `30` | 栅格列间距 `px` 数值。 |
|
||||||
| `gridcontainer.margin` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
|
| ``gridcontainer.margin`` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
|
||||||
|
|
||||||
#### `veui-theme-dls` 中的默认配置
|
#### `veui-theme-dls` 中的默认配置
|
||||||
|
|
||||||
|
@ -14,4 +14,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 栅格行内容,直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |
|
| ``default`` | 栅格行内容,直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# Icon <small>图标</small>
|
# Icon <small>图标</small>
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 的方式注册并通过字符串类型的 `name` 属性指定图标;也支持直接传入组件定义进行渲染。
|
VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 的方式注册并通过字符串类型的 [`name`](#props-name) 属性指定图标;也支持直接传入组件定义进行渲染。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
@ -14,20 +14,20 @@ VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `name` | `string` | - | 图标名称或其组件定义。 |
|
| ``name`` | `string | Object` | - | 图标名称或其组件定义。 |
|
||||||
| `label` | `string` | - | 图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。 |
|
| ``label`` | `string` | - | 图标的文字说明,对辅助设备可见。当不设置时,图标对辅助设备隐藏。 |
|
||||||
| `scale` | `number` | - | 图标尺寸倍数。不设置时相当于 `1`。 |
|
| ``scale`` | `number` | - | 图标尺寸倍数。不设置时相当于 `1`。 |
|
||||||
| `spin` | `boolean` | `false` | 是否保持旋转状态。 |
|
| ``spin`` | `boolean` | `false` | 是否保持旋转状态。 |
|
||||||
| `pulse` | `boolean` | `false` | 是否保持步进旋转状态。 |
|
| ``pulse`` | `boolean` | `false` | 是否保持步进旋转状态。 |
|
||||||
| `inverse` | `boolean` | `false` | 是否翻转颜色(用白色绘制,用于深色背景)。 |
|
| ``inverse`` | `boolean` | `false` | 是否翻转颜色(用白色绘制,用于深色背景)。 |
|
||||||
| `flip` | `string` | - | 是否翻转,可选值为 `'horizontal'`/`'vertical'`,分别表示水平翻转与垂直翻转。 |
|
| ``flip`` | `string` | - | 是否翻转,可选值为 `'horizontal'` / `'vertical'`,分别表示水平翻转与垂直翻转。 |
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
当 `name` 属性使用组件定义时,仅支持 `spin` 属性。
|
当 [`name`](#props-name) 属性使用组件定义时,仅支持 [`spin`](#props-spin) 属性。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 用来实现图标堆叠,当内部有 `Icon` 子组件时会层叠在一起居中显示,且外部 `Icon` 组件不需要设置 `name` 属性。 |
|
| ``default`` | 用来实现图标堆叠,当内部有 `Icon` 子组件时会层叠在一起居中显示,且外部 `Icon` 组件不需要设置 [`name`](#props-name) 属性。 |
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 任意组合
|
### 任意组合
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/input-group/default.vue" ]]
|
[[ demo src="/demo/input-group/default.vue" ]]
|
||||||
|
|
||||||
@ -18,4 +18,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区,用来内联输入组件。 |
|
| ``default`` | 内容区,用来内联输入组件。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/input/size.vue" ]]
|
[[ demo src="/demo/input/size.vue" ]]
|
||||||
|
|
||||||
@ -26,17 +26,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `value` | `string` | '' | [^value] |
|
| ``value`` | `string` | '' | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 输入框是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 输入框是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 输入框是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 输入框是否为只读状态。 |
|
||||||
| `type` | `string=` | `'text'` | [^type] |
|
| ``type`` | `string=` | `'text'` | [^type] |
|
||||||
| `placeholder` | `string=` | - | 输入占位符。 |
|
| ``placeholder`` | `string=` | - | 输入占位符。 |
|
||||||
| `clearable` | `boolean=` | `false` | 是否显示清除按钮。 |
|
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
|
||||||
| `composition` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
|
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
|
||||||
| `select-on-focus` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
|
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
|
||||||
| `get-length` | `function(string): number=` | 自定义的字符长度计算函数。 |
|
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
|
||||||
| `trim` | `boolean | string=` | `false` | [^trim] |
|
| ``trim`` | `boolean | string=` | `false` | [^trim] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -87,9 +87,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `before` | 输入框内前置内容。 |
|
| ``before`` | 输入框内前置内容。 |
|
||||||
| `after` | 输入框内后置内容。 |
|
| ``after`` | 输入框内后置内容。 |
|
||||||
| `placeholder` | 未输入时的占位内容。 |
|
| ``placeholder`` | 未输入时的占位内容。 |
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
注意,插槽宽度会挤压输入框宽度。
|
注意,插槽宽度会挤压输入框宽度。
|
||||||
@ -99,8 +99,8 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
|
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
|
||||||
@ -118,7 +118,7 @@
|
|||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
有效输入时触发,受 `composition` 属性影响。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。
|
有效输入时触发,受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
此外,`Input` 支持如下的原生事件:
|
此外,`Input` 支持如下的原生事件:
|
||||||
@ -131,4 +131,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `remove` | 清除按钮。 |
|
| ``remove`` | 清除按钮。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 激活输入组件
|
### 激活输入组件
|
||||||
|
|
||||||
可以使用 `for` 属性指定被激活组件的 `ref`。点击标签区域可以触发
|
可以使用 [`for`](#props-for) 属性指定被激活组件的 `ref`。点击标签区域可以触发
|
||||||
|
|
||||||
[[ demo src="/demo/label/default.vue" ]]
|
[[ demo src="/demo/label/default.vue" ]]
|
||||||
|
|
||||||
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `for` | `string=` | - | [^for] |
|
| ``for`` | `string=` | - | [^for] |
|
||||||
|
|
||||||
^^^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)。
|
允许通过 [`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)。
|
||||||
@ -33,4 +33,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |
|
| ``default`` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |
|
||||||
|
@ -10,18 +10,18 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
|
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
|
||||||
| `index` | `number=` | `0` | [^index] |
|
| ``index`` | `number=` | `0` | [^index] |
|
||||||
| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
|
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
|
||||||
| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
|
||||||
| `escapable` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
|
| ``escapable`` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
|
||||||
| `priority` | `number=` | - | 浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
|
| ``priority`` | `number=` | - | 浮层层叠权重,参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
|
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 浮层根元素类名,参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `indicator` | `string=` | `'number'` | [^indicator] |
|
| ``indicator`` | `string=` | `'number'` | [^indicator] |
|
||||||
| `options` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true } }` | 额外配置。 |
|
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true } }` | 额外配置。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -75,15 +75,15 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
| `desc` | [^slot-desc] |
|
| ``desc`` | [^slot-desc] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
可用来定制每个灯箱项的媒体展示区域。
|
可用来定制每个灯箱项的媒体展示区域。
|
||||||
|
|
||||||
默认内容:每项图片或视频。
|
默认内容:每项图片或视频。
|
||||||
|
|
||||||
作用域参数为 `datasource` 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^slot-desc
|
^^^slot-desc
|
||||||
@ -91,19 +91,19 @@
|
|||||||
|
|
||||||
默认内容:每项描述文字。
|
默认内容:每项描述文字。
|
||||||
|
|
||||||
作用域参数为 `datasource` 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容(可以有自定义字段)加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `cancel` | 灯箱关闭后触发。 |
|
| ``cancel`` | 灯箱关闭后触发。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `close` | 关闭。 |
|
| ``close`` | 关闭。 |
|
||||||
| `prev` | 上一页。 |
|
| ``prev`` | 上一页。 |
|
||||||
| `next` | 下一页。 |
|
| ``next`` | 下一页。 |
|
||||||
|
@ -10,13 +10,13 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `to` | `string | Object` | - | 链接路径。当配合 Vue Router 使用时,会透传到 [`<router-link>`](https://router.vuejs.org/api/#router-link) 的[同名属性](https://router.vuejs.org/api/#to);否则只支持 `string` 类型,输出到 `<a>` 元素的 `href` 属性中。 |
|
| ``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)。 |
|
| ``rel`` | `string` | - | HTML 原生的链接类型,可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types)。 |
|
||||||
| `target` | `string` | - | [^target] |
|
| ``target`` | `string` | - | [^target] |
|
||||||
| `native` | `boolean` | `false` | 是否强制使用原生的 `<a>` 元素。 |
|
| ``native`` | `boolean` | `false` | 是否强制使用原生的 `<a>` 元素。 |
|
||||||
| `fallback` | `string` | `'span'` | 在 `to` 属性为空时使用的原生元素类型。 |
|
| ``fallback`` | `string` | `'span'` | 在 [`to`](#props-to) 属性为空时使用的原生元素类型。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -42,10 +42,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 链接内容。 |
|
| ``default`` | 链接内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `click` | 在 `to` 属性为空或指定了 `native` 为 `true` 的情况下,点击时触发。回调参数为 `(event)`,`event` 类型为原生 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
|
| ``click`` | 在 [`to`](#props-to) 属性为空或指定了 `native` 为 `true` 的情况下,点击时触发。回调参数为 `(event)`,`event` 类型为原生 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
|
||||||
|
@ -4,25 +4,25 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的风格 `ui` 属性值:`normal`/`strong`/`reverse`。
|
可选的风格 [`ui`](#props-ui) 属性值:`normal` / `strong` / `reverse`。
|
||||||
|
|
||||||
[[demo src="/demo/loading/style.vue"]]
|
[[demo src="/demo/loading/style.vue"]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m` / `l`。
|
||||||
|
|
||||||
[[demo src="/demo/loading/size.vue"]]
|
[[demo src="/demo/loading/size.vue"]]
|
||||||
|
|
||||||
### 排列方式
|
### 排列方式
|
||||||
|
|
||||||
可选的排列方式 `ui` 属性值:`vertical`。
|
可选的排列方式 [`ui`](#props-ui) 属性值:`vertical`。
|
||||||
|
|
||||||
[[demo src="/demo/loading/layout.vue"]]
|
[[demo src="/demo/loading/layout.vue"]]
|
||||||
|
|
||||||
### 自定义加载图标
|
### 自定义加载图标
|
||||||
|
|
||||||
通过 `spinner` 插槽设置自定义加载图标。
|
通过 [`spinner`](#slots-spinner) 插槽设置自定义加载图标。
|
||||||
|
|
||||||
[[demo src="/demo/loading/slot.vue"]]
|
[[demo src="/demo/loading/slot.vue"]]
|
||||||
|
|
||||||
@ -30,8 +30,8 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `loading` | `boolean` | `false` | 是否处于加载状态。 |
|
| ``loading`` | `boolean` | `false` | 是否处于加载状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。为空格分隔的一组枚举值的组合。
|
预设样式。为空格分隔的一组枚举值的组合。
|
||||||
@ -52,5 +52,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `spinner` | 加载图标。 |
|
| ``spinner`` | 加载图标。 |
|
||||||
| `default` | 加载中提示文字。 |
|
| ``default`` | 加载中提示文字。 |
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
### 可折叠
|
### 可折叠
|
||||||
|
|
||||||
使用 `collapsible` 属性控制菜单是否可以折叠。
|
使用 [`collapsible`](#props-collapsible) 属性控制菜单是否可以折叠。
|
||||||
|
|
||||||
[[ demo src="/demo/menu/collaspible.vue" ]]
|
[[ demo src="/demo/menu/collaspible.vue" ]]
|
||||||
|
|
||||||
@ -24,13 +24,13 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>=` | `[]` | [^items] |
|
| ``items`` | `Array<Object>=` | `[]` | [^items] |
|
||||||
| `active` | `string` | - | [^active] |
|
| ``active`` | `string` | - | [^active] |
|
||||||
| `matches` | `function(Object, string): boolean` | - | [^matches] |
|
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
|
||||||
| `collapsible` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
|
| ``collapsible`` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
|
||||||
| `collapsed` | `boolean` | `false` | [^collapsed] |
|
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
|
||||||
| `expanded` | `Array<string>=` | `[]` | [^expanded] |
|
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
|
||||||
|
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
@ -45,7 +45,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^active
|
^^^active
|
||||||
当前激活节点,若该节点定义了 `name` 则就是该 `name` 值,否则该值是由 `to` 生成的路由路径([route.path](https://router.vuejs.org/api/#route-object-properties))。
|
当前激活节点,若该节点定义了 `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))。
|
||||||
|
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -56,7 +56,7 @@
|
|||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 节点的文字描述。 |
|
| `label` | `string` | 节点的文字描述。 |
|
||||||
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
|
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
|
||||||
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
|
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
|
||||||
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
||||||
| `icon` | `string|{render: function}` | 首层节点使用的图标。 |
|
| `icon` | `string|{render: function}` | 首层节点使用的图标。 |
|
||||||
@ -89,23 +89,23 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `before` | 前置插槽。 |
|
| ``before`` | 前置插槽。 |
|
||||||
| `item` | [^item] |
|
| ``item`` | [^item] |
|
||||||
| `icon` | [^icon] |
|
| ``icon`` | [^icon] |
|
||||||
| `item-label` | [^item-label] |
|
| ``item-label`` | [^item-label] |
|
||||||
| `after` | 后置插槽。 |
|
| ``after`` | 后置插槽。 |
|
||||||
|
|
||||||
|
|
||||||
^^^item
|
^^^item
|
||||||
每个节点的渲染插槽。
|
每个节点的渲染插槽。
|
||||||
|
|
||||||
默认内容:渲染了 `icon` 插槽和 `item-label` 插槽。
|
默认内容:渲染了 [`icon`](#slots-icon) 插槽和 [`item-label`](#slots-item-label) 插槽。
|
||||||
|
|
||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 图标名称。 |
|
| `label` | `string` | 图标名称。 |
|
||||||
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
|
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
|
||||||
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
|
| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 |
|
||||||
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
||||||
| `icon` | `string` | 首层节点使用的图标。 |
|
| `icon` | `string` | 首层节点使用的图标。 |
|
||||||
@ -126,22 +126,22 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^item-label
|
^^^item-label
|
||||||
节点的 `label` 插槽。
|
节点的文字标签插槽。
|
||||||
|
|
||||||
默认内容:渲染节点对应的 `Link`。
|
默认内容:渲染节点对应的 `Link`。
|
||||||
|
|
||||||
作用域参数参考 `item` 插槽。
|
作用域参数参考 [`item`](#slots-item) 插槽。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `activate` | 用户点击有 `to` 的节点触发,参数是激活节点的整个 `item` 数据。 |
|
| ``activate`` | 用户点击有 `to` 的节点触发,参数是激活节点的整个 `item` 数据。 |
|
||||||
| `click` | 用户点击节点时触发,参数是激活节点整个 `item` 数据。 |
|
| ``click`` | 用户点击节点时触发,参数是激活节点整个 `item` 数据。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 展开。 |
|
| ``expand`` | 展开。 |
|
||||||
| `collapse` | 折叠。 |
|
| ``collapse`` | 折叠。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/number-input/size.vue" ]]
|
[[ demo src="/demo/number-input/size.vue" ]]
|
||||||
|
|
||||||
@ -26,15 +26,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `value` | `number` | - | [^value] |
|
| ``value`` | `number` | - | [^value] |
|
||||||
| `readonly` | `boolean=` | `false` | 数字输入框是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 数字输入框是否为只读状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 数字输入框是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 数字输入框是否为禁用状态。 |
|
||||||
| `placeholder` | `string` | - | 输入占位符。 |
|
| ``placeholder`` | `string` | - | 输入占位符。 |
|
||||||
| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
|
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
|
||||||
| `max` | `number` | - | 允许的最大值。 |
|
| ``max`` | `number` | - | 允许的最大值。 |
|
||||||
| `min` | `number` | - | 允许的最小值。 |
|
| ``min`` | `number` | - | 允许的最小值。 |
|
||||||
| `decimal-place` | `number` | 0 | 数值的小数精度位数,默认精确到整数位,`-1` 表示不处理精度。 |
|
| ``decimal-place`` | `number` | 0 | 数值的小数精度位数,默认精确到整数位,`-1` 表示不处理精度。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -60,8 +60,8 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `before` | 数字输入框前置内容。 |
|
| ``before`` | 数字输入框前置内容。 |
|
||||||
| `after` | 数字输入框后置内容。位于增减按钮之后。 |
|
| ``after`` | 数字输入框后置内容。位于增减按钮之后。 |
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
注意,插槽宽度会挤压输入框宽度。
|
注意,插槽宽度会挤压输入框宽度。
|
||||||
@ -71,8 +71,8 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
原生 `change` 事件,回调参数为 `(value, event)`。
|
原生 `change` 事件,回调参数为 `(value, event)`。
|
||||||
@ -103,5 +103,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `increase` | 增加按钮。 |
|
| ``increase`` | 增加按钮。 |
|
||||||
| `decrease` | 减少按钮。 |
|
| ``decrease`` | 减少按钮。 |
|
||||||
|
@ -14,11 +14,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `label` | `string` | - | 选项组的标题。 |
|
| ``label`` | `string` | - | 选项组的标题。 |
|
||||||
| `options` | `Array<Object>` | `[]` | [^options] |
|
| ``options`` | `Array<Object>` | `[]` | [^options] |
|
||||||
| `position` | `string` | `inline` | [^position] |
|
| ``position`` | `string` | `inline` | [^position] |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^options
|
^^^options
|
||||||
选项列表,项目的类型为 `{label, value, disabled, ...}`。
|
选项列表,项目的类型为 `{label, value, disabled, ...}`。
|
||||||
@ -47,16 +47,16 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 选项列表的内容。在没有指定 `options` 属性时,可以用来直接内联 `Option` 或其它 `OptionGroup` 组件。 |
|
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或其它 `OptionGroup` 组件。 |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
| `group-label` | [^slot-group-label] |
|
| ``group-label`` | [^slot-group-label] |
|
||||||
| `option-label` | [^slot-option-label] |
|
| ``option-label`` | [^slot-option-label] |
|
||||||
| `option` | [^slot-option] |
|
| ``option`` | [^slot-option] |
|
||||||
|
|
||||||
^^^slot-label
|
^^^slot-label
|
||||||
选项组标题文本区域。
|
选项组标题文本区域。
|
||||||
|
|
||||||
默认内容:`label` 属性对应的文本。
|
默认内容:[`label`](#props-label) 属性对应的文本。
|
||||||
|
|
||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
@ -119,4 +119,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expandable` | 可展开的项目。 |
|
| ``expandable`` | 可展开的项目。 |
|
||||||
|
@ -14,17 +14,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `label` | `string` | - | 选项的文本。 |
|
| ``label`` | `string` | - | 选项的文本。 |
|
||||||
| `value` | `*` | - | 选项对应的值。 |
|
| ``value`` | `*` | - | 选项对应的值。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `hidden` | `boolean=` | `false` | 是否为隐藏状态。 |
|
| ``hidden`` | `boolean=` | `false` | 是否为隐藏状态。 |
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 选项的整个区域。默认显示文本及勾选图标等。 |
|
| ``default`` | 选项的整个区域。默认显示文本及勾选图标等。 |
|
||||||
| `label` | 选项的文本区域。默认显示 `label` 属性内容。 |
|
| ``label`` | 选项的文本区域。默认显示 [`label`](#props-label) 属性内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
@ -34,4 +34,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `checked` | 已选状态。 |
|
| ``checked`` | 已选状态。 |
|
||||||
|
@ -34,17 +34,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
|
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供,可自定义。 |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `target` | `string | Vue | Element` | - | [^target] |
|
| ``target`` | `string | Vue | Element` | - | [^target] |
|
||||||
| `priority` | `number` | - | [^priority] |
|
| ``priority`` | `number` | - | [^priority] |
|
||||||
| `autofocus` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
|
| ``autofocus`` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
|
||||||
| `modal` | `boolean` | `false` | 是否是模态浮层。模态浮层会抢占焦点且限制键盘导航处于浮层内部(关闭后焦点会回归)。 |
|
| ``modal`` | `boolean` | `false` | 是否是模态浮层。模态浮层会抢占焦点且限制键盘导航处于浮层内部(关闭后焦点会回归)。 |
|
||||||
| `inline` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
|
| ``inline`` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
|
||||||
| `local` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置,而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
|
| ``local`` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置,而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | [^overlay-class] |
|
| ``overlay-class`` | `string | Array | Object=` | - | [^overlay-class] |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | [^overlay-style] |
|
| ``overlay-style`` | `string | Array | Object=` | - | [^overlay-style] |
|
||||||
| `options` | `Object` | - | 透传给底层 Popper.js 实现的 `modifiers` 配置项,具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |
|
| ``options`` | `Object` | - | 透传给底层 Popper.js 实现的 `modifiers` 配置项,具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -55,7 +55,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^target
|
^^^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` 属性指定。
|
允许通过 [`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) 属性指定。
|
||||||
|
|
||||||
+++类型详情
|
+++类型详情
|
||||||
| 类型 | 描述 |
|
| 类型 | 描述 |
|
||||||
@ -89,18 +89,18 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 浮层内容。 |
|
| ``default`` | 浮层内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `locate` | 浮层定位发生变化时触发。 |
|
| ``locate`` | 浮层定位发生变化时触发。 |
|
||||||
| `afteropen` | 浮层打开后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afteropen`` | 浮层打开后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `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)。 |
|
| ``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)。 |
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 跳转到指定页
|
### 跳转到指定页
|
||||||
|
|
||||||
使用 `goto` 属性开启跳转到指定页的功能。
|
使用 [`goto`](#props-goto) 属性开启跳转到指定页的功能。
|
||||||
|
|
||||||
[[ demo src="/demo/pagination/goto.vue" ]]
|
[[ demo src="/demo/pagination/goto.vue" ]]
|
||||||
|
|
||||||
@ -18,14 +18,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `page` | `number` | `1` | 当前页码(从 `1` 开始)。 |
|
| ``page`` | `number` | `1` | 当前页码(从 `1` 开始)。 |
|
||||||
| `total` | `number` | - | 总页数。 |
|
| ``total`` | `number` | - | 总页数。 |
|
||||||
| `to` | `string | Object` | `''` | [^to] |
|
| ``to`` | `string | Object` | `''` | [^to] |
|
||||||
| `native` | `boolean` | `false` | 原生链接跳转。 |
|
| ``native`` | `boolean` | `false` | 原生链接跳转。 |
|
||||||
| `page-size` | `number` | `pagination.pageSize` | [^page-size] |
|
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
|
||||||
| `page-sizes` | `Array` | `pagination.pageSizes` | 每页个数候选项。 |
|
| ``page-sizes`` | `Array` | `pagination.pageSizes` | 每页个数候选项。 |
|
||||||
| `goto` | `boolean` | `false` | 是否显示直接跳转到页码。 |
|
| ``goto`` | `boolean` | `false` | 是否显示直接跳转到页码。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -40,7 +40,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^to
|
^^^to
|
||||||
目标链接模板。类型见 [`Link`](./link#属性) 组件的同名属性。其中,类型为 `string` 路径时其中的 `:page` 关键词会被替换为实际页码。类型为 `Object` 时,会将起转换为 `string` 后替换掉 `:page` 部分。
|
目标链接模板。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。其中,类型为 `string` 路径时其中的 `:page` 关键词会被替换为实际页码。类型为 `Object` 时,会将起转换为 `string` 后替换掉 `:page` 部分。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^page-size
|
^^^page-size
|
||||||
@ -55,13 +55,13 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `pagesizechange` | `page-size` 改变时触发,回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 |
|
| ``pagesizechange`` | `page-size` 改变时触发,回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 |
|
||||||
| `redirect` | 链接跳转时触发,回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象,在 `native` 为 `true` 时,调用 `event.preventDefault` 可阻止跳转。 |
|
| ``redirect`` | 链接跳转时触发,回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象,在 `native` 为 `true` 时,调用 `event.preventDefault` 可阻止跳转。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `pagination.pageSize` | `number` | `30` | 每页个数。 |
|
| ``pagination.pageSize`` | `number` | `30` | 每页个数。 |
|
||||||
| `pagination.pageSizes` | `Array<number>` | `[30, 50, 100]` | 每页个数候选项。 |
|
| ``pagination.pageSizes`` | `Array<number>` | `[30, 50, 100]` | 每页个数候选项。 |
|
||||||
|
|
||||||
|
@ -4,19 +4,19 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/popover/ui.vue" ]]
|
[[ demo src="/demo/popover/ui.vue" ]]
|
||||||
|
|
||||||
### 定位
|
### 定位
|
||||||
|
|
||||||
使用 `position` 属性来指定气泡显示的位置。
|
使用 [`position`](#props-position) 属性来指定气泡显示的位置。
|
||||||
|
|
||||||
[[ demo src="/demo/popover/position.vue" ]]
|
[[ demo src="/demo/popover/position.vue" ]]
|
||||||
|
|
||||||
### 触发时机
|
### 触发时机
|
||||||
|
|
||||||
使用 `trigger` 属性来指定显示/隐藏气泡的时机。
|
使用 [`trigger`](#props-trigger) 属性来指定显示/隐藏气泡的时机。
|
||||||
|
|
||||||
[[ demo src="/demo/popover/trigger.vue" ]]
|
[[ demo src="/demo/popover/trigger.vue" ]]
|
||||||
|
|
||||||
@ -26,14 +26,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
| ``target`` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 [`target`](./overlay#props-target) 属性。 |
|
||||||
| `position` | `string` | `'top'` | [^position] |
|
| ``position`` | `string` | `'top'` | [^position] |
|
||||||
| `trigger` | `string` | `'hover'` | [^trigger] |
|
| ``trigger`` | `string` | `'hover'` | [^trigger] |
|
||||||
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
|
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -68,4 +68,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 气泡提示内容。 |
|
| ``default`` | 气泡提示内容。 |
|
||||||
|
@ -10,16 +10,16 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `type` | `string` | `'bar'` | 进度条类型。可选值为 `bar`/`circular`,分别是柱状和环形。 |
|
| ``type`` | `string` | `'bar'` | 进度条类型。可选值为 `bar` / `circular`,分别是柱状和环形。 |
|
||||||
| `desc` | `boolean` | `false` | 是否显示文字提示。 |
|
| ``desc`` | `boolean` | `false` | 是否显示文字提示。 |
|
||||||
| `value` | `number` | `0` | 进度值。 |
|
| ``value`` | `number` | `0` | 进度值。 |
|
||||||
| `min` | `number` | `0` | 最小值。 |
|
| ``min`` | `number` | `0` | 最小值。 |
|
||||||
| `max` | `number` | `1` | 最大值。 |
|
| ``max`` | `number` | `1` | 最大值。 |
|
||||||
| `decimal-place` | `number` | `0` | 保留的小数位数。 |
|
| ``decimal-place`` | `number` | `0` | 保留的小数位数。 |
|
||||||
| `status` | `string` | - | [^status] |
|
| ``status`` | `string` | - | [^status] |
|
||||||
| `autosucceed` | `boolean | number` | - | 是否在进度值到达最大时自动进入 `success` 状态。`true` 表示直接进入成功状态,如果是 `number` 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。 |
|
| ``autosucceed`` | `boolean | number` | - | 是否在进度值到达最大时自动进入 `success` 状态。`true` 表示直接进入成功状态,如果是 `number` 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。 |
|
||||||
| `indeterminate` | `boolean` | `false` | 是否不确定进度,目前仅支持在 `type` 为 `bar` 时生效。 |
|
| ``indeterminate`` | `boolean` | `false` | 是否不确定进度,目前仅支持在 `type` 为 `bar` 时生效。 |
|
||||||
|
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
@ -38,14 +38,14 @@
|
|||||||
`.sync`
|
`.sync`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
进度状态。可选值为 `success`/`alert`,分别表示成功及危险警告状态。
|
进度状态。可选值为 `success` / `alert`,分别表示成功及危险警告状态。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | [^slot-default] |
|
| ``default`` | [^slot-default] |
|
||||||
|
|
||||||
^^^slot-default
|
^^^slot-default
|
||||||
可用来定制文字提示区域的内容。
|
可用来定制文字提示区域的内容。
|
||||||
@ -56,7 +56,7 @@
|
|||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `percent` | `number` | 进度完成百分比。 |
|
| `percent` | `number` | 进度完成百分比。 |
|
||||||
| `value` | `number` | 进度值,同 `value` 属性。 |
|
| `value` | `number` | 进度值,同 [`value`](#props-value) 属性。 |
|
||||||
| `status` | `string` | 进度状态,同 `status` 属性。 |
|
| `status` | `string` | 进度状态,同 [`status`](#props-status) 属性。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
@ -12,17 +12,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `title` | `string` | - | 标题。 |
|
| ``title`` | `string` | - | 标题。 |
|
||||||
| `content` | `string` | `'请输入'` | 输入框上方的说明内容。 |
|
| ``content`` | `string` | `'请输入'` | 输入框上方的说明内容。 |
|
||||||
| `value` | `string` | `''` | [^value] |
|
| ``value`` | `string` | `''` | [^value] |
|
||||||
| `loading` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
|
||||||
| `ok-label` | `string=` | - | “确定”按钮的文字内容。 |
|
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||||
| `cancel-label` | `string=` | - | “取消”按钮的文字内容。 |
|
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
|
||||||
| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行,参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props) 属性。 |
|
| ``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#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -44,18 +44,18 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
| `title` | 标题区。若同时指定了 `title` 属性和 `title` 插槽,以后者为准。 |
|
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽,以后者为准。 |
|
||||||
| `foot` | 底部区域,默认会展示“确定”、“取消”按钮。 |
|
| ``foot`` | 底部区域,默认会展示“确定”、“取消”按钮。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
| `ok` | 点击“确定”按钮时触发。 |
|
| ``ok`` | 点击“确定”按钮时触发。 |
|
||||||
| `cancel` | 点击“取消”按钮时触发。 |
|
| ``cancel`` | 点击“取消”按钮时触发。 |
|
||||||
| `afterclose` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/radio-button-group/default.vue" ]]
|
[[ demo src="/demo/radio-button-group/default.vue" ]]
|
||||||
|
|
||||||
@ -14,11 +14,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>` | `[]` | [^items] |
|
| ``items`` | `Array<Object>` | `[]` | [^items] |
|
||||||
| `value` | `*` | - | [^value] |
|
| ``value`` | `*` | - | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -54,7 +54,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
按钮内文本区域。
|
按钮内文本区域。
|
||||||
@ -77,7 +77,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/radio-group/default.vue" ]]
|
[[ demo src="/demo/radio-group/default.vue" ]]
|
||||||
|
|
||||||
@ -14,11 +14,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `items` | `Array<Object>` | `[]` | [^items] |
|
| ``items`` | `Array<Object>` | `[]` | [^items] |
|
||||||
| `value` | `*` | - | [^value] |
|
| ``value`` | `*` | - | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -54,7 +54,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^slot-item] |
|
| ``item`` | [^slot-item] |
|
||||||
|
|
||||||
^^^slot-item
|
^^^slot-item
|
||||||
选项描述文本区域。
|
选项描述文本区域。
|
||||||
@ -77,7 +77,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/radio/size.vue" ]]
|
[[ demo src="/demo/radio/size.vue" ]]
|
||||||
|
|
||||||
### 值设定
|
### 值设定
|
||||||
|
|
||||||
可以通过设置 `value` 来修改选中状态下 `model` 属性(`v-model`)的值。
|
可以通过设置 [`value`](props-value) 属性来修改选中状态下 `v-model` 的值。
|
||||||
|
|
||||||
[[ demo src="/demo/radio/model.vue" ]]
|
[[ demo src="/demo/radio/model.vue" ]]
|
||||||
|
|
||||||
@ -20,11 +20,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `checked` | `boolean` | `false` | [^checked] |
|
| ``checked`` | `boolean` | `false` | [^checked] |
|
||||||
| `value` | `*` | `true` | 选中状态对应的值。 |
|
| ``value`` | `*` | `true` | 选中状态对应的值。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -49,21 +49,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 单选框的描述文本,点击时会进行选中。无默认内容。 |
|
| ``default`` | 单选框的描述文本,点击时会进行选中。无默认内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
|
| ``change`` | 用户切换选中状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 `change` 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
选中状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
此外,`Radio` 支持如下的原生事件:
|
此外,`Radio` 支持如下的原生事件:
|
||||||
|
@ -10,11 +10,11 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
|
||||||
| `selected` | `Array<string>` | - | [^selected] |
|
| ``selected`` | `Array<string>` | - | [^selected] |
|
||||||
| `include-indeterminate` | `boolean` | `false` | 是否将半选状态的节点加入已选项。`datasource` 节点中的非叶子节点若有部分子孙节点被选中,则为半选状态。 |
|
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。`datasource` 节点中的非叶子节点若有部分子孙节点被选中,则为半选状态。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^datasource
|
^^^datasource
|
||||||
数据源,项目类型为 `{label, value, disabled, children, ...}`。
|
数据源,项目类型为 `{label, value, disabled, children, ...}`。
|
||||||
@ -41,7 +41,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
|
|
||||||
^^^slot-label
|
^^^slot-label
|
||||||
每个节点文本描述的内容。
|
每个节点文本描述的内容。
|
||||||
@ -70,12 +70,12 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选中状态变化后触发,回调参数为 `(value: Array)`。`value` 类型与 `selected` 属性相同。
|
选中状态变化后触发,回调参数为 `(value: Array)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
|
||||||
^^^
|
^^^
|
||||||
|
@ -10,14 +10,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `selected` | `Object` | - | [^selected] |
|
| ``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` 表达式。 |
|
| ``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` 表示周日)及对应的小时数。 |
|
| ``disabled-date`` | `function(number, number): boolean` | `() => false` | 特定小时是否禁用。参数类型为 `(day: number, hour: number)`,分别表示一周的第几天(`0` 表示周日)及对应的小时数。 |
|
||||||
| `shortcuts` | `Array` | `schedule.shortcuts` | [^shortcuts] |
|
| ``shortcuts`` | `Array` | `schedule.shortcuts` | [^shortcuts] |
|
||||||
| `shortcuts-display` | `string` | `'inline'` | 快捷选择项的显示方式,支持 `inline`/`popup`,分别对应内联按钮组与下拉选择。 |
|
| ``shortcuts-display`` | `string` | `'inline'` | 快捷选择项的显示方式,支持 `inline` / `popup`,分别对应内联按钮组与下拉选择。 |
|
||||||
| `statuses` | `Array<{label: string, value: string}>` | `schedule.statuses` | 图例数据源。会为图例项目添加 `class` 值 <code>`veui-schedule-legend-${value}`</code>,`label` 则会显示为图例文本。 |
|
| ``statuses`` | `Array<{label: string, value: string}>` | `schedule.statuses` | 图例数据源。会为图例项目添加 `class` 值 <code>`veui-schedule-legend-${value}`</code>,`label` 则会显示为图例文本。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^selected
|
^^^selected
|
||||||
:::badges
|
:::badges
|
||||||
@ -48,21 +48,21 @@
|
|||||||
^^^shortcuts
|
^^^shortcuts
|
||||||
快捷选择选项列表。类型为 `{label: string, selected: boolean | Array}`。
|
快捷选择选项列表。类型为 `{label: string, selected: boolean | Array}`。
|
||||||
|
|
||||||
`label` 为显示的提示文字。`selected` 表示预选择的时段,类型为数组时,格式与 `selected` 属性相同;值为 `true` 时等同于 `[[0, 23]]`。
|
`label` 为显示的提示文字。`selected` 表示预选择的时段,类型为数组时,格式与 [`selected`](#props-selected) 属性相同;值为 `true` 时等同于 `[[0, 23]]`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `header` | 顶部区域。 |
|
| ``header`` | 顶部区域。 |
|
||||||
| `header-content` | 顶部区域的内容,不包括外层容器。 |
|
| ``header-content`` | 顶部区域的内容,不包括外层容器。 |
|
||||||
| `shortcuts` | 顶部快捷选项区域。 |
|
| ``shortcuts`` | 顶部快捷选项区域。 |
|
||||||
| `legend` | 顶部图例区域。 |
|
| ``legend`` | 顶部图例区域。 |
|
||||||
| `legend-label` | [^slot-legend-label] |
|
| ``legend-label`` | [^slot-legend-label] |
|
||||||
| `hour` | [^slot-hour] |
|
| ``hour`` | [^slot-hour] |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
| `tooltip` | [^slot-tooltip] |
|
| ``tooltip`` | [^slot-tooltip] |
|
||||||
|
|
||||||
^^^slot-legend-label
|
^^^slot-legend-label
|
||||||
每个图例的文本区域。
|
每个图例的文本区域。
|
||||||
@ -122,21 +122,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
选中状态变化后触发,回调参数为 `(value: Object)`。`value` 类型与 `selected` 属性相同。
|
选中状态变化后触发,回调参数为 `(value: Object)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `schedule.statuses` | Array<{name, label}> | 见描述。 | [^config-statuses] |
|
| ``schedule.statuses`` | Array<{name, label}> | 见描述。 | [^config-statuses] |
|
||||||
|
|
||||||
^^^config-statuses
|
^^^config-statuses
|
||||||
默认图例状态数组。数组项类型为 `{name: string, label: string}`,默认值为:
|
默认图例状态数组。数组项类型为 `{name: string, label: string}`,默认值为:
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的 `ui` 属性值:`strong`。
|
可选的 [`ui`](#props-ui) 属性值:`strong`。
|
||||||
|
|
||||||
[[ demo src="/demo/search-box/style.vue" ]]
|
[[ demo src="/demo/search-box/style.vue" ]]
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/search-box/size.vue" ]]
|
[[ demo src="/demo/search-box/size.vue" ]]
|
||||||
|
|
||||||
@ -28,19 +28,19 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `placeholder` | `string` | - | 搜索框占位符。 |
|
| ``placeholder`` | `string` | - | 搜索框占位符。 |
|
||||||
| `value` | `string` | - | [^value] |
|
| ``value`` | `string` | - | [^value] |
|
||||||
| `autofocus` | `boolean` | `false` | 是否自动聚焦。 |
|
| ``autofocus`` | `boolean` | `false` | 是否自动聚焦。 |
|
||||||
| `clearable` | `boolean` | `false` | 是否显示清除按钮。 |
|
| ``clearable`` | `boolean` | `false` | 是否显示清除按钮。 |
|
||||||
| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
|
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
|
||||||
| `composition` | `boolean` | `false` | 是否感知输入法状态。 |
|
| ``composition`` | `boolean` | `false` | 是否感知输入法状态。 |
|
||||||
| `suggestions` | `Array<string>|Array<Object>` | - | [^suggestions] |
|
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
|
||||||
| `replace-on-select` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
|
| ``replace-on-select`` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
|
||||||
| `suggest-trigger` | `Array<string>|string` | `input` | [^suggest-trigger] |
|
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
按钮预设样式。
|
按钮预设样式。
|
||||||
@ -82,7 +82,7 @@
|
|||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `focus` | 输入框聚焦时。 |
|
| `focus` | 输入框聚焦时。 |
|
||||||
| `input` | 输入框触发 `input` 事件时。 |
|
| `input` | 输入框触发 [`input`](#events-input) 事件时。 |
|
||||||
| `submit` | 点击搜索按钮时。 |
|
| `submit` | 点击搜索按钮时。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -99,10 +99,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `suggestions` | [^slot-suggestions] |
|
| ``suggestions`` | [^slot-suggestions] |
|
||||||
| `suggestions-before` | 插入推荐列表前的内容。 |
|
| ``suggestions-before`` | 插入推荐列表前的内容。 |
|
||||||
| `suggestions-after` | 插入推荐列表后的内容。 |
|
| ``suggestions-after`` | 插入推荐列表后的内容。 |
|
||||||
| `suggestion` | [^slot-suggestion] |
|
| ``suggestion`` | [^slot-suggestion] |
|
||||||
|
|
||||||
^^^slot-suggestions
|
^^^slot-suggestions
|
||||||
推荐列表内容。
|
推荐列表内容。
|
||||||
@ -110,7 +110,7 @@
|
|||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `suggestions` | `Array<{value: string, label: string}>` | 从 `suggestions` 属性归一化类型后的推荐列表。 |
|
| `suggestions` | `Array<{value: string, label: string}>` | 从 [`suggestions`](#props-suggestions) 属性归一化类型后的推荐列表。 |
|
||||||
| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
|
| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
|
||||||
|
|
||||||
^^^slot-suggestion
|
^^^slot-suggestion
|
||||||
@ -132,11 +132,11 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
| `suggest` | [^event-suggest] |
|
| ``suggest`` | [^event-suggest] |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
| `search` | [^event-search] |
|
| ``search`` | [^event-search] |
|
||||||
| `toggle` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
|
| ``toggle`` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
输入框中文本发生变化时触发该事件,回调参数为 `(value: string)`。
|
输入框中文本发生变化时触发该事件,回调参数为 `(value: string)`。
|
||||||
@ -183,4 +183,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `search` | 搜索。 |
|
| ``search`` | 搜索。 |
|
||||||
|
@ -8,25 +8,25 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/select/size.vue" ]]
|
[[ demo src="/demo/select/size.vue" ]]
|
||||||
|
|
||||||
### 内联模式
|
### 内联模式
|
||||||
|
|
||||||
`Select` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 `options` 属性。
|
`Select` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 [`options`](#props-options) 属性。
|
||||||
|
|
||||||
[[ demo src="/demo/select/inline.vue" ]]
|
[[ demo src="/demo/select/inline.vue" ]]
|
||||||
|
|
||||||
### 搜索选项
|
### 搜索选项
|
||||||
|
|
||||||
使用 `searchable` 属性来开启选项搜索。
|
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
|
||||||
|
|
||||||
[[ demo src="/demo/select/searchable.vue" ]]
|
[[ demo src="/demo/select/searchable.vue" ]]
|
||||||
|
|
||||||
### 多选
|
### 多选
|
||||||
|
|
||||||
使用 `multiple` 属性来开启多选模式。
|
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
|
||||||
|
|
||||||
[[ demo src="/demo/select/multiple.vue" ]]
|
[[ demo src="/demo/select/multiple.vue" ]]
|
||||||
|
|
||||||
@ -36,20 +36,20 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `options` | `Array<Object>` | - | [^options] |
|
| ``options`` | `Array<Object>` | - | [^options] |
|
||||||
| `value` | `Array<*>|*` | - | [^value] |
|
| ``value`` | `Array<*>|*` | - | [^value] |
|
||||||
| `multiple` | `boolean` | `false` | 是否允许多选。 |
|
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
|
||||||
| `max` | `number` | - | 多选时允许选择的项目上限。 |
|
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
|
||||||
| `placeholder` | `string` | `select.placeholder` | 未选择时的占位文本。 |
|
| ``placeholder`` | `string` | `select.placeholder` | 未选择时的占位文本。 |
|
||||||
| `clearable` | `boolean` | `false` | 是否可以清除已选内容。 |
|
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
|
||||||
| `searchable` | `boolean` | `false` | 是否允许搜索选项。 |
|
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
|
||||||
| `filter` | `function` | - | 选项过滤函数,签名为 `function(option: Object): boolean`。`option` 类型与 `options` 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
|
| ``filter`` | `function` | - | 选项过滤函数,签名为 `function(option: Object): boolean`。`option` 类型与 [`options`](#props-options) 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -72,7 +72,7 @@
|
|||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 选项的文字说明。 |
|
| `label` | `string` | 选项的文字说明。 |
|
||||||
| `value` | `*` | 选项对应的值。 |
|
| `value` | `*` | 选项对应的值。 |
|
||||||
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 `options` 属性数组项。 |
|
| `options` | `Array<Object>=` | 选项的子选项数组,数组项类型同 [`options`](#props-options) 属性数组项。 |
|
||||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -97,15 +97,15 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 选项列表的内容。在没有指定 `options` 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
|
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时,可以用来直接内联 `Option` 或 `OptionGroup`。 |
|
||||||
| `before` | [^slot-before] |
|
| ``before`` | [^slot-before] |
|
||||||
| `after` | 选项列表后的内容。无默认内容。作用域参数同 `before` 插槽。 |
|
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`before`](#slots-before) 插槽。 |
|
||||||
| `label` | [^slot-label] |
|
| ``label`` | [^slot-label] |
|
||||||
| `group-label` | [^slot-group-label] |
|
| ``group-label`` | [^slot-group-label] |
|
||||||
| `option-label` | [^slot-option-label] |
|
| ``option-label`` | [^slot-option-label] |
|
||||||
| `option` | [^slot-option] |
|
| ``option`` | [^slot-option] |
|
||||||
| `trigger` | [^slot-trigger] |
|
| ``trigger`` | [^slot-trigger] |
|
||||||
| `selected` | [^slot-selected] |
|
| ``selected`` | [^slot-selected] |
|
||||||
|
|
||||||
^^^slot-before
|
^^^slot-before
|
||||||
选项列表前的内容。无默认内容。
|
选项列表前的内容。无默认内容。
|
||||||
@ -194,7 +194,7 @@
|
|||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*`/`disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
|
| `attrs` | `Object` | 需要输出到触发元素上的属性,包括 `aria-*` / `disabled` 等,可以使用 `v-bind="attrs"` 统一进行输出。 |
|
||||||
| `handlers` | `Object` | [^handlers-desc] |
|
| `handlers` | `Object` | [^handlers-desc] |
|
||||||
| `value` | `*` | 已选项值。 |
|
| `value` | `*` | 已选项值。 |
|
||||||
| `select` | `function(value: *): void` | 用于切换已选项。 |
|
| `select` | `function(value: *): void` | 用于切换已选项。 |
|
||||||
@ -236,9 +236,9 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | 输入搜索关键词时触发。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。 |
|
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。 |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
| `toggle` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
|
| ``toggle`` | 下拉菜单展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
:::badges
|
:::badges
|
||||||
@ -252,7 +252,7 @@
|
|||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `select.placeholder` | `string` | `@@select.placeholder` | 未选择时的占位内容。 |
|
| ``select.placeholder`` | `string` | `@@select.placeholder` | 未选择时的占位内容。 |
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
`@@` 开头的值表示引用多语言配置中的相应字段。
|
`@@` 开头的值表示引用多语言配置中的相应字段。
|
||||||
@ -262,5 +262,5 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 展开浮层。 |
|
| ``expand`` | 展开浮层。 |
|
||||||
| `collapse` | 收起浮层。 |
|
| ``collapse`` | 收起浮层。 |
|
||||||
|
@ -4,37 +4,37 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/size.vue" ]]
|
[[ demo src="/demo/slider/size.vue" ]]
|
||||||
|
|
||||||
### 只读/禁用
|
### 只读/禁用
|
||||||
|
|
||||||
设置 `readonly` 属性来使设置滑块只读,设置 `disabled` 属性来使设置滑块禁用。
|
设置 [`readonly`](#props-readonly) 属性来使设置滑块只读,设置 [`disabled`](#props-disabled) 属性来使设置滑块禁用。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/editable.vue" ]]
|
[[ demo src="/demo/slider/editable.vue" ]]
|
||||||
|
|
||||||
### 步进
|
### 步进
|
||||||
|
|
||||||
使用 `step` 属性来指定步进值,使点击调节按钮或按下 <kbd>←</kbd>、<kbd>→</kbd> 键时根据指定步进值来调整输入值。
|
使用 [`step`](#props-step) 属性来指定步进值,使点击调节按钮或按下 <kbd>←</kbd>、<kbd>→</kbd> 键时根据指定步进值来调整输入值。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/steps.vue" ]]
|
[[ demo src="/demo/slider/steps.vue" ]]
|
||||||
|
|
||||||
### 范围
|
### 范围
|
||||||
|
|
||||||
使用 `max`/`min` 属性来指定拖动范围两端的值。
|
使用 [`max`](#props-max) / [`min`](#props-min) 属性来指定拖动范围两端的值。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/range.vue" ]]
|
[[ demo src="/demo/slider/range.vue" ]]
|
||||||
|
|
||||||
### 次级条
|
### 次级条
|
||||||
|
|
||||||
使用 `secondary-progress` 属性来指定一个次级进度条。
|
使用 [`secondary-progress`](#props-secondary-progress) 属性来指定一个次级进度条。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/buffer.vue" ]]
|
[[ demo src="/demo/slider/buffer.vue" ]]
|
||||||
|
|
||||||
### 定制内容
|
### 定制内容
|
||||||
|
|
||||||
使用 `thumb`/`tip` 插槽来自定义滑块按钮、悬浮提示等内容。
|
使用 [`thumb`](#slots-thumb) / [`tip`](#slots-tip) 插槽来自定义滑块按钮、悬浮提示等内容。
|
||||||
|
|
||||||
[[ demo src="/demo/slider/variant.vue" ]]
|
[[ demo src="/demo/slider/variant.vue" ]]
|
||||||
|
|
||||||
@ -44,15 +44,15 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `value` | `*|Array<*>` | - | [^value] |
|
| ``value`` | `*|Array<*>` | - | [^value] |
|
||||||
| `secondary-progress` | `number | Array<number>` | `0` | 次要条。 |
|
| ``secondary-progress`` | `number | Array<number>` | `0` | 次要条。 |
|
||||||
| `min` | `number` | `0` | `value` 经过 `parse` 函数处理后允许的最小值。 |
|
| ``min`` | `number` | `0` | `value` 经过 `parse` 函数处理后允许的最小值。 |
|
||||||
| `max` | `number` | `1` | `value` 经过 `parse` 函数处理后允许的最大值。 |
|
| ``max`` | `number` | `1` | `value` 经过 `parse` 函数处理后允许的最大值。 |
|
||||||
| `step` | `number` | `0` | `value` 经过 `parse` 函数处理后的步进值。 |
|
| ``step`` | `number` | `0` | `value` 经过 `parse` 函数处理后的步进值。 |
|
||||||
| `mark` | `boolean` | `false` | 是否显示步进标记。 |
|
| ``mark`` | `boolean` | `false` | 是否显示步进标记。 |
|
||||||
| `parse` | `function` | `val => val` | 传入值处理函数。 |
|
| ``parse`` | `function` | `val => val` | 传入值处理函数。 |
|
||||||
| `format` | `function` | `val => val` | 输出值处理函数。 |
|
| ``format`` | `function` | `val => val` | 输出值处理函数。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -80,10 +80,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `track` | 滑轨。默认内容:横线。 |
|
| ``track`` | 滑轨。默认内容:横线。 |
|
||||||
| `tip-label` | 浮动提示文本。默认内容:当前 `value` 值。 |
|
| ``tip-label`` | 浮动提示文本。默认内容:当前 `value` 值。 |
|
||||||
| `thumb` | [^slot-thumb] |
|
| ``thumb`` | [^slot-thumb] |
|
||||||
| `tip` | [^slot-tip] |
|
| ``tip`` | [^slot-tip] |
|
||||||
|
|
||||||
^^^slot-thumb
|
^^^slot-thumb
|
||||||
滑块。
|
滑块。
|
||||||
@ -118,7 +118,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
|
@ -8,4 +8,4 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |
|
| ``default`` | 默认插槽。无默认内容。用于填充行内内容,**不允许**放入块级内容。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸及方向
|
### 尺寸及方向
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`/`vertical`/`label-vertical`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m` / `vertical` / `label-vertical`。
|
||||||
|
|
||||||
[[ demo src="/demo/steps/default.vue" ]]
|
[[ demo src="/demo/steps/default.vue" ]]
|
||||||
|
|
||||||
@ -20,9 +20,9 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `steps` | `Array` | - | [^steps] |
|
| ``steps`` | `Array` | - | [^steps] |
|
||||||
| `current` | `number` | - | 当前步骤的索引值。 |
|
| ``current`` | `number` | - | 当前步骤的索引值。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -45,7 +45,7 @@
|
|||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 步骤标题。 |
|
| `label` | `string` | 步骤标题。 |
|
||||||
| `desc` | `string` | 步骤描述。 |
|
| `desc` | `string` | 步骤描述。 |
|
||||||
| `to` | `string | Object` | 步骤链接。类型见 [`Link`](./link#属性) 组件的同名属性。 |
|
| `to` | `string | Object` | 步骤链接。类型见 [`Link`](./link) 组件的 [`to`](./link#propss-to) 属性。 |
|
||||||
| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
|
| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -54,10 +54,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | [^slot-default] |
|
| ``default`` | [^slot-default] |
|
||||||
| `index` | 序号部分内容,默认显示从 `1` 开始的序号,已完成的步骤显示完成图标,出错的步骤显示出错图标。位于 `default` 内部,作用域参数同 `default`。 |
|
| ``index`` | 序号部分内容,默认显示从 `1` 开始的序号,已完成的步骤显示完成图标,出错的步骤显示出错图标。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
|
||||||
| `label` | 步骤标题部分内容,默认显示 `steps` 中项目的 `label` 字段。位于 `default` 内部,作用域参数同 `default`。 |
|
| ``label`` | 步骤标题部分内容,默认显示 `steps` 中项目的 `label` 字段。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
|
||||||
| `desc` | 步骤描述部分内容,默认显示 `steps` 中项目的 `desc` 字段。位于 `default` 内部,作用域参数同 `default`。 |
|
| ``desc`` | 步骤描述部分内容,默认显示 `steps` 中项目的 `desc` 字段。位于 [`default`](#slots-default) 插槽内部,作用域参数同 [`default`](#slots-default) 插槽。 |
|
||||||
|
|
||||||
^^^slot-default
|
^^^slot-default
|
||||||
整个步骤项内容。
|
整个步骤项内容。
|
||||||
@ -67,10 +67,10 @@
|
|||||||
+++作用域参数
|
+++作用域参数
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `label` | `string` | 步骤标题。同 `steps` 属性中项目的 `label` 字段。 |
|
| `label` | `string` | 步骤标题。同 [`steps`](#props-steps) 属性中项目的 `label` 字段。 |
|
||||||
| `desc` | `string` | 步骤描述。同 `steps` 属性中项目的 `desc` 字段。 |
|
| `desc` | `string` | 步骤描述。同 [`steps`](#props-steps) 属性中项目的 `desc` 字段。 |
|
||||||
| `to` | `string | Object` | 步骤链接。同 `steps` 属性中项目的 `to` 字段。 |
|
| `to` | `string | Object` | 步骤链接。同 [`steps`](#props-steps) 属性中项目的 `to` 字段。 |
|
||||||
| `status` | `string` | 步骤状态。同 `steps` 属性中项目的 `status` 字段。 |
|
| `status` | `string` | 步骤状态。同 [`steps`](#props-steps) 属性中项目的 `status` 字段。 |
|
||||||
| `index` | `number` | 步骤索引值。 |
|
| `index` | `number` | 步骤索引值。 |
|
||||||
|
|
||||||
另外,`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
|
另外,`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
|
||||||
@ -81,11 +81,11 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `click` | 任意步骤被点击后触发,回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值,`event` 为相应的原生事件对象。 |
|
| ``click`` | 任意步骤被点击后触发,回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值,`event` 为相应的原生事件对象。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `success` | 已成功完成的步骤。 |
|
| ``success`` | 已成功完成的步骤。 |
|
||||||
| `error` | 出错的步骤。 |
|
| ``error`` | 出错的步骤。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`xs`/`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`xs` / `s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/switch/size.vue" ]]
|
[[ demo src="/demo/switch/size.vue" ]]
|
||||||
|
|
||||||
@ -20,12 +20,12 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `checked` | `boolean` | `false` | [^checked] |
|
| ``checked`` | `boolean` | `false` | [^checked] |
|
||||||
| `true-value` | `*` | `true` | 打开状态对应的值。 |
|
| ``true-value`` | `*` | `true` | 打开状态对应的值。 |
|
||||||
| `false-value` | `*` | `false` | 关闭状态对应的值。 |
|
| ``false-value`` | `*` | `false` | 关闭状态对应的值。 |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -51,21 +51,21 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 开关的描述文本,点击时会切换选择状态。无默认内容。 |
|
| ``default`` | 开关的描述文本,点击时会切换选择状态。无默认内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | 用户切换打开状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否打开。 |
|
| ``change`` | 用户切换打开状态时触发,回调参数为 `(checked: boolean)`。`checked` 表示当前是否打开。 |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
打开状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `model` 属性的值。与 `change` 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
打开状态变化后触发,回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同,`input` 事件在数据操作导致状态变化时也会触发。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
此外,`Switch` 支持如下的原生事件:
|
此外,`Switch` 支持如下的原生事件:
|
||||||
|
@ -14,25 +14,25 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `label` | `string` | - | 选项卡文本。 |
|
| ``label`` | `string` | - | 选项卡文本。 |
|
||||||
| `name` | `string` | - | 选项卡名称。 |
|
| ``name`` | `string` | - | 选项卡名称。 |
|
||||||
| `disabled` | `boolean=` | `false` | 选项卡是否禁用。 |
|
| ``disabled`` | `boolean=` | `false` | 选项卡是否禁用。 |
|
||||||
| `to` | `string | Object` | - | [^to] |
|
| ``to`` | `string | Object` | - | [^to] |
|
||||||
| `matches` | `function(Route, Route): boolean` | - | [^matches] |
|
| ``matches`` | `function(Route, Route): boolean` | - | [^matches] |
|
||||||
| `native` | `boolean` | `false` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
| ``native`` | `boolean` | `false` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
||||||
| `removable` | `boolean` | | 是否可删除。 |
|
| ``removable`` | `boolean` | | 是否可删除。 |
|
||||||
| `status` | `string` | - | [^status] |
|
| ``status`` | `string` | - | [^status] |
|
||||||
|
|
||||||
^^^to
|
^^^to
|
||||||
选项卡路由信息。类型见 [`Link`](./link#属性) 组件的同名属性。如果 `to` 存在,则 `name` 属性将被忽略。
|
选项卡路由信息。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。如果 `to` 存在,则 [`name`](#props-name) 属性将被忽略。
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
如果使用了 Vue Router,当前被激活的状态将与 `$route` 对象自动匹配,无需在 [`Tabs`](./tabs) 组件中手动控制 `index` 或 `active`。
|
如果使用了 Vue Router,当前被激活的状态将与 `$route` 对象自动匹配,无需在 [`Tabs`](./tabs) 组件中手动控制 [`index`](./tabs#props-index) 或 [`active`](./tabs#props-active)。
|
||||||
:::
|
:::
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^matches
|
^^^matches
|
||||||
在使用了 Vue Router 且提供了 `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` 逻辑。
|
在使用了 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
|
^^^status
|
||||||
@ -52,6 +52,6 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 默认插槽。 |
|
| ``default`` | 默认插槽。 |
|
||||||
| `item` | 标签选项卡内容,包括对应的按钮/链接。 |
|
| ``item`` | 标签选项卡内容,包括对应的按钮/链接。 |
|
||||||
| `label` | 标签选项卡文本。 |
|
| ``label`` | 标签选项卡文本。 |
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 内容密度
|
### 内容密度
|
||||||
|
|
||||||
可选的 `ui` 尺寸属性值:`compact`/`loose`。
|
可选的 [`ui`](#props-ui) 尺寸属性值:`compact` / `loose`。
|
||||||
|
|
||||||
[[ demo src="/demo/table/basic.vue" ]]
|
[[ demo src="/demo/table/basic.vue" ]]
|
||||||
|
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
### 筛选
|
### 筛选
|
||||||
|
|
||||||
使用 `filter` 插槽来开启自定义筛选功能。
|
使用 `Column` 组件的 [`filter`](./column#slots-filter) 插槽来开启自定义筛选功能。
|
||||||
|
|
||||||
[[ demo src="/demo/table/filter.vue" ]]
|
[[ demo src="/demo/table/filter.vue" ]]
|
||||||
|
|
||||||
@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
### 固定列
|
### 固定列
|
||||||
|
|
||||||
使用 `Table` 的 `scroll` 属性及 `Column` 组件的 `fixed` 属性来控制固定列的位置。
|
使用 `Table` 的 [`scroll`](#props-scroll) 属性及 `Column` 组件的 [`fixed`](./column#props-fixed) 属性来控制固定列的位置。
|
||||||
|
|
||||||
[[ demo src="/demo/table/fixed.vue" ]]
|
[[ demo src="/demo/table/fixed.vue" ]]
|
||||||
|
|
||||||
@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
### 表头描述
|
### 表头描述
|
||||||
|
|
||||||
使用 `desc` 属性或 `desc` 插槽来为表头增加描述信息。
|
使用 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
|
||||||
|
|
||||||
[[ demo src="/demo/table/desc.vue" ]]
|
[[ demo src="/demo/table/desc.vue" ]]
|
||||||
|
|
||||||
@ -54,19 +54,19 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `data` | `Array<Object>` | - | 表格数据。 |
|
| ``data`` | `Array<Object>` | - | 表格数据。 |
|
||||||
| `key-field` | `string` | - | 用于指定充当表格数据的键的列标志符。值对应 `data` 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 [`key` 属性](https://cn.vuejs.org/v2/guide/list.html#key)输出。当 `selectable` 属性为 `true` 时,也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项,此时值必须来自内部某个 `Column` 组件的 `field` 属性。 |
|
| ``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` | 是否支持表格行的选择。 |
|
| ``selectable`` | `boolean` | `false` | 是否支持表格行的选择。 |
|
||||||
| `select-mode` | `string` | `'multiple'` | 选择模式,支持的值为 `single`/`multiple`,分别对应于单选/多选模式。 |
|
| ``select-mode`` | `string` | `'multiple'` | 选择模式,支持的值为 `single` / `multiple`,分别对应于单选/多选模式。 |
|
||||||
| `selected` | `Array<*>|*` | `[]` | [^selected] |
|
| ``selected`` | `Array<*>|*` | `[]` | [^selected] |
|
||||||
| `expandable` | `boolean` | `false` | 是否允许展开行。 |
|
| ``expandable`` | `boolean` | `false` | 是否允许展开行。 |
|
||||||
| `expanded` | `Array<*>` | `[]` | [^expanded] |
|
| ``expanded`` | `Array<*>` | `[]` | [^expanded] |
|
||||||
| `order` | `string | boolean` | `false` | 排序顺序。为 `false` 时表示无序,为字符串值 `'asc'`/`'desc'` 时分别为升序/降序。 |
|
| ``order`` | `string | boolean` | `false` | 排序顺序。为 `false` 时表示无序,为字符串值 `'asc'` / `'desc'` 时分别为升序/降序。 |
|
||||||
| `order-by` | `string` | - | 用于指定当前基于哪一列进行了排序,值必须来自内部某个 `Column` 组件的 `field` 属性。 |
|
| ``order-by`` | `string` | - | 用于指定当前基于哪一列进行了排序,值必须来自内部某个 `Column` 组件的 [`field`](./column#props-field) 属性。 |
|
||||||
| `scroll` | `number` | - | 指定滚动区域的最大高度,当超出此高度时,表格将进入固定表头和底部只允许数据区域滚动的模式。 |
|
| ``scroll`` | `number` | - | 指定滚动区域的最大高度,当超出此高度时,表格将进入固定表头和底部只允许数据区域滚动的模式。 |
|
||||||
| `loading` | `boolean` | `false` | 指定表格是否处于加载状态。 |
|
| ``loading`` | `boolean` | `false` | 指定表格是否处于加载状态。 |
|
||||||
| `allowed-orders` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
|
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -86,7 +86,7 @@
|
|||||||
`.sync`
|
`.sync`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
已选行。当 `select-mode` 为 `'multiple'` 时为已选行 `key-field` 对应字段值的数组;为 `'single'` 时为已选行 `key-field` 对应字段值。
|
已选行。当 [`select-mode`](#props-select-mode) 属性为 `'multiple'` 时为已选行 [`key-field`](#props-key-field) 对应字段值的数组;为 `'single'` 时为已选行 [`key-field`](#props-key-field) 对应字段值。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^expanded
|
^^^expanded
|
||||||
@ -94,7 +94,7 @@
|
|||||||
`.sync`
|
`.sync`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
已展开行。为已展开行 `key-field` 对应字段值的数组。
|
已展开行。为已展开行 [`key-field`](#props-key-field) 对应字段值的数组。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^allowed-orders
|
^^^allowed-orders
|
||||||
@ -114,23 +114,23 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 用于定义表格列,只能包含 `Column` 组件。 |
|
| ``default`` | 用于定义表格列,只能包含 `Column` 组件。 |
|
||||||
| `no-data` | 用于定义无数据时要展现的内容。 |
|
| ``no-data`` | 用于定义无数据时要展现的内容。 |
|
||||||
| `foot` | 表格脚部内容,整个区域将打通成为一个容器,不再保留分列。 |
|
| ``foot`` | 表格脚部内容,整个区域将打通成为一个容器,不再保留分列。 |
|
||||||
| `sub-row` | [^slot-sub-row] |
|
| ``sub-row`` | [^slot-sub-row] |
|
||||||
|
|
||||||
^^^slot-sub-row
|
^^^slot-sub-row
|
||||||
展开行后子行的内容。使用此插槽时,内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 `Column` 的插槽 `sub-row` 内容。
|
展开行后子行的内容。使用此插槽时,内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 `Column` 的 [`sub-row`](./column#slots-sub-row) 插槽内容。
|
||||||
|
|
||||||
作用域参数为 `data` 内当前行数据中的所有字段,以及当前行对应索引值 `index`。
|
作用域参数为 [`data`](#props-data) 内当前行数据中的所有字段,以及当前行对应索引值 `index`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | [^event-select] |
|
| ``select`` | [^event-select] |
|
||||||
| `sort` | [^event-sort] |
|
| ``sort`` | [^event-sort] |
|
||||||
|
|
||||||
^^^event-select
|
^^^event-select
|
||||||
切换已选项时触发。回调参数为 `(selected, item, selectedItems)`。
|
切换已选项时触发。回调参数为 `(selected, item, selectedItems)`。
|
||||||
@ -139,8 +139,8 @@
|
|||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `selected` | `boolean` | `true` 表示已选择,`false` 则表示取消选择。 |
|
| `selected` | `boolean` | `true` 表示已选择,`false` 则表示取消选择。 |
|
||||||
| `item` | `Object` | 选择状态发生变化的 `data` 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时,将返回第一条相关的 `data` 数据项。 |
|
| `item` | `Object` | 选择状态发生变化的 [`data`](#props-data) 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时,将返回第一条相关的 `data` 数据项。 |
|
||||||
| `selectedItems` | `Object<string, Object | Array>` | 当前所有已选项的信息,键为 `key-field` 对应字段,值为对应的 `data` 数据项。当存在纵向合并单元格且以相应行作为键进行选择时,值为所有相关行数据项组成的数组。 |
|
| `selectedItems` | `Object<string, Object | Array>` | 当前所有已选项的信息,键为 [`key-field`](#props-key-field) 对应字段,值为对应的 `data` 数据项。当存在纵向合并单元格且以相应行作为键进行选择时,值为所有相关行数据项组成的数组。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -150,7 +150,7 @@
|
|||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `field` | `string` | 基于哪一列进行排序。值来自对应 `Column` 组件的 `field` 属性。 |
|
| `field` | `string` | 基于哪一列进行排序。值来自对应 `Column` 组件的 [`field`](./column#props-field) 属性。 |
|
||||||
| `order` | `string | boolean` | 同 [`order` 属性](#属性)。 |
|
| `order` | `string | boolean` | 同 [`order`](#props-order) 属性。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
@ -1,32 +1,32 @@
|
|||||||
# Tabs <small>标签页</small>
|
# Tabs <small>标签页</small>
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
`Tabs` 组件需要配合 [`Tab`](/components/tab) 组件使用。
|
`Tabs` 组件需要配合 [`Tab`](./tab) 组件使用。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 尺寸属性值:`s`/`m`/`l`。
|
可选的 [`ui`](#props-ui) 尺寸属性值:`s` / `m` / `l`。
|
||||||
|
|
||||||
[[ demo src="/demo/tabs/size.vue" ]]
|
[[ demo src="/demo/tabs/size.vue" ]]
|
||||||
|
|
||||||
### 样式
|
### 样式
|
||||||
|
|
||||||
设置 `ui` 为 `simple`/`strong` 来分别启用简单样式、加强样式。
|
设置 `ui` 为 `simple` / `strong` 来分别启用简单样式、加强样式。
|
||||||
|
|
||||||
[[ demo src="/demo/tabs/style.vue" ]]
|
[[ demo src="/demo/tabs/style.vue" ]]
|
||||||
|
|
||||||
### 路由模式
|
### 路由模式
|
||||||
|
|
||||||
设置[`Tab`](/components/tab) 组件 `to` 属性来使用路由模式。
|
设置 [`Tab`](./tab) 组件 [`to`](./tab#props-to) 属性来使用路由模式。
|
||||||
|
|
||||||
[[ demo src="/demo/tabs/route.vue" ]]
|
[[ demo src="/demo/tabs/route.vue" ]]
|
||||||
|
|
||||||
### 禁用状态
|
### 禁用状态
|
||||||
|
|
||||||
设置[`Tab`](/components/tab) 组件 `disabled` 属性来使选项卡处于禁用状态。
|
设置 [`Tab`](./tab) 组件 [`disabled`](./tab#props-disabled) 属性来使选项卡处于禁用状态。
|
||||||
|
|
||||||
[[ demo src="/demo/tabs/disabled.vue" ]]
|
[[ demo src="/demo/tabs/disabled.vue" ]]
|
||||||
|
|
||||||
@ -36,14 +36,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `active` | `string` | - | [^active] |
|
| ``active`` | `string` | - | [^active] |
|
||||||
| `matches` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
|
| ``matches`` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
|
||||||
| `addable` | `boolean` | `false` | 是否可以增加标签。 |
|
| ``addable`` | `boolean` | `false` | 是否可以增加标签。 |
|
||||||
| `max` | `number` | - | 可增加标签的上限值。 |
|
| ``max`` | `number` | - | 可增加标签的上限值。 |
|
||||||
| `tip` | `string` | - | 提示文本。 |
|
| ``tip`` | `string` | - | 提示文本。 |
|
||||||
| `add-label` | `string=` | - | “添加”按钮的文字内容。 |
|
| ``add-label`` | `string=` | - | “添加”按钮的文字内容。 |
|
||||||
| `eager` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容(并隐藏)。 |
|
| ``eager`` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容(并隐藏)。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -64,14 +64,14 @@
|
|||||||
`.sync`
|
`.sync`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
表示当前哪个标签页处于激活状态。具体映射的值受[标签](/components/tab)的属性影响,优先级 `to` > `name`。
|
表示当前哪个标签页处于激活状态。具体映射的值受[标签](./tab)的属性影响,优先级 `to` > `name`。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^matches
|
^^^matches
|
||||||
用于给内部的 [`Tab`](/components/tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)。
|
用于给内部的 [`Tab`](./tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性。
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
当内部的 `Tab` 组件设置了 `matches` 属性,将会覆盖在 `Tabs` 组件上的 `matches` 属性。
|
当内部的 `Tab` 组件设置了 [`matches`](./tab#props-matches) 属性,将会覆盖在 `Tabs` 组件上的 [`matches`](#props-matches) 属性。
|
||||||
:::
|
:::
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -79,11 +79,11 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 允许直接内联 `Tab` 组件。无默认内容。 |
|
| ``default`` | 允许直接内联 `Tab` 组件。无默认内容。 |
|
||||||
| `panel` | 选项卡下方面板区域。 |
|
| ``panel`` | 选项卡下方面板区域。 |
|
||||||
| `extra` | 位于标签页右侧的扩展区域。 |
|
| ``extra`` | 位于标签页右侧的扩展区域。 |
|
||||||
| `tab-item` | [^tab-item] |
|
| ``tab-item`` | [^tab-item] |
|
||||||
| `tab-label` | 标签选项卡文本区域,默认内容为选项卡文本。作用域参数同 `tab-item` 插槽,`attrs`/`activate` 除外。 |
|
| ``tab-label`` | 标签选项卡文本区域,默认内容为选项卡文本。作用域参数同 [`tab-item`](#slots-tab-item) 插槽,`attrs` / `activate` 除外。 |
|
||||||
|
|
||||||
^^^tab-item
|
^^^tab-item
|
||||||
标签选项卡区域,默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
|
标签选项卡区域,默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
|
||||||
@ -100,7 +100,7 @@
|
|||||||
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
|
||||||
| `removable` | `boolean` | 是否可删除。 |
|
| `removable` | `boolean` | 是否可删除。 |
|
||||||
| `status` | `string` | 选项卡状态。 |
|
| `status` | `string` | 选项卡状态。 |
|
||||||
| `attrs` | `Object<string, string>` | 其它需要输出到选项卡元素上的 HTML 属性,例如 `role`/`aria-selected`/`aria-controls` 等。 |
|
| `attrs` | `Object<string, string>` | 其它需要输出到选项卡元素上的 HTML 属性,例如 `role` / `aria-selected` / `aria-controls` 等。 |
|
||||||
| `activate` | `function(): void` | 激活当前选项卡的方法。 |
|
| `activate` | `function(): void` | 激活当前选项卡的方法。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
@ -109,18 +109,18 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | 切换时触发。回调参数为 `(tab: Object)`,`tab` 与 `tab-label` 插槽中的作用域参数一致。 |
|
| ``change`` | 切换时触发。回调参数为 `(tab: Object)`,`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
|
||||||
| `add` | 点击添加按钮触发的事件,无回调参数。 |
|
| ``add`` | 点击添加按钮触发的事件,无回调参数。 |
|
||||||
| `remove` | 删除标签时触发的事件。回调参数为 `(tab: Object)`,`tab` 与 `tab-label` 插槽中的作用域参数一致。 |
|
| ``remove`` | 删除标签时触发的事件。回调参数为 `(tab: Object)`,`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `tabs.matches` | `function` | 见描述。 | [^config-matches] |
|
| ``tabs.matches`` | `function` | 见描述。 | [^config-matches] |
|
||||||
|
|
||||||
^^^config-matches
|
^^^config-matches
|
||||||
函数签名与 [`Tab`](/components/tab) 组件的 [`to` 属性](/components/tab#属性)相同。默认值为:
|
函数签名与 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性相同。默认值为:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
function (current, to) {
|
function (current, to) {
|
||||||
@ -133,11 +133,11 @@ function (current, to) {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `add` | 添加按钮。 |
|
| ``add`` | 添加按钮。 |
|
||||||
| `remove` | 清除按钮。 |
|
| ``remove`` | 清除按钮。 |
|
||||||
| `prev` | 往左翻页按钮。 |
|
| ``prev`` | 往左翻页按钮。 |
|
||||||
| `next` | 往右翻页按钮。 |
|
| ``next`` | 往右翻页按钮。 |
|
||||||
| `success` | 成功状态。 |
|
| ``success`` | 成功状态。 |
|
||||||
| `warning` | 警示状态。 |
|
| ``warning`` | 警示状态。 |
|
||||||
| `info` | 普通信息状态。 |
|
| ``info`` | 普通信息状态。 |
|
||||||
| `error` | 错误状态。 |
|
| ``error`` | 错误状态。 |
|
||||||
|
@ -4,19 +4,19 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/tag/size.vue" ]]
|
[[ demo src="/demo/tag/size.vue" ]]
|
||||||
|
|
||||||
### 可选择
|
### 可选择
|
||||||
|
|
||||||
使用 `selectable` 属性使标签可以切换选中状态。
|
使用 [`selectable`](#props-selectable) 属性使标签可以切换选中状态。
|
||||||
|
|
||||||
[[ demo src="/demo/tag/selectable.vue" ]]
|
[[ demo src="/demo/tag/selectable.vue" ]]
|
||||||
|
|
||||||
### 可移除
|
### 可移除
|
||||||
|
|
||||||
使用 `removable` 属性使标签可以被移除。
|
使用 [`removable`](#props-removable) 属性使标签可以被移除。
|
||||||
|
|
||||||
[[ demo src="/demo/tag/removable.vue" ]]
|
[[ demo src="/demo/tag/removable.vue" ]]
|
||||||
|
|
||||||
@ -26,16 +26,16 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `type` | `string=` | `'default'` | [^type] |
|
| ``type`` | `string=` | `'default'` | [^type] |
|
||||||
| `selectable` | `boolean=` | `false` | 是否允许选择。 |
|
| ``selectable`` | `boolean=` | `false` | 是否允许选择。 |
|
||||||
| `selected` | `boolean=` | `false` | [^selected] |
|
| ``selected`` | `boolean=` | `false` | [^selected] |
|
||||||
| `removable` | `boolean=` | `false` | 是否允许删除。 |
|
| ``removable`` | `boolean=` | `false` | 是否允许删除。 |
|
||||||
| `removed` | `boolean=` | `false` | [^removed] |
|
| ``removed`` | `boolean=` | `false` | [^removed] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否禁用。 |
|
| ``disabled`` | `boolean=` | `false` | 是否禁用。 |
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
`selectable` 和 `removable` 属性不允许同时为 `true`。
|
[`selectable`](#props-selectable) 和 [`removable`](#props-removable) 属性不允许同时为 `true`。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
@ -85,16 +85,16 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。 |
|
| ``default`` | 内容区。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `remove` | 点击删除按钮时触发。 |
|
| ``remove`` | 点击删除按钮时触发。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `remove` | 删除。 |
|
| ``remove`` | 删除。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的 `ui` 属性值:`s`/`m`。
|
可选的 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/textarea/size.vue" ]]
|
[[ demo src="/demo/textarea/size.vue" ]]
|
||||||
|
|
||||||
@ -26,17 +26,17 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `value` | `string` | '' | [^value] |
|
| ``value`` | `string` | '' | [^value] |
|
||||||
| `disabled` | `boolean=` | `false` | 文本域是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 文本域是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 文本域是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 文本域是否为只读状态。 |
|
||||||
| `line-number` | `boolean` | `false` | 是否显示行号。 |
|
| ``line-number`` | `boolean` | `false` | 是否显示行号。 |
|
||||||
| `rows` | `number | string` | - | 默认情况下文本域可视行数。 |
|
| ``rows`` | `number | string` | - | 默认情况下文本域可视行数。 |
|
||||||
| `placeholder` | `string` | - | 输入占位符。 |
|
| ``placeholder`` | `string` | - | 输入占位符。 |
|
||||||
| `composition` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
|
| ``composition`` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
|
||||||
| `select-on-focus` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
|
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
|
||||||
| `autoresize` | `boolean` | `false` | 高度是否会被内容撑开。 |
|
| ``autoresize`` | `boolean` | `false` | 高度是否会被内容撑开。 |
|
||||||
| `get-length` | `function(string): number=` | 自定义的字符长度计算函数。 |
|
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -61,8 +61,8 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
|
输入框内容变化时触发,即原生 `change` 事件触发时。回调参数为 `(value, event)`。
|
||||||
@ -80,7 +80,7 @@
|
|||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
有效输入时触发,受 `composition` 属性影响。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。
|
有效输入时触发,受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)`,`value` 为输入框的 `value` 值。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
此外,`Textarea` 支持如下的原生事件:
|
此外,`Textarea` 支持如下的原生事件:
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 三种模式
|
### 三种模式
|
||||||
|
|
||||||
支持三种模式,分别是 `hour`、`minute` 和 `second`,可以通过 `mode` 属性来控制。
|
支持三种模式,分别是 `hour`、`minute` 和 `second`,可以通过 [`mode`](#props-mode) 属性来控制。
|
||||||
|
|
||||||
[[ demo src="/demo/time-picker/mode.vue" ]]
|
[[ demo src="/demo/time-picker/mode.vue" ]]
|
||||||
|
|
||||||
@ -26,20 +26,20 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `mode` | `string` | `'second'` | 指定选择的粒度,分别精确到时(`hour`)、分(`minute`)、秒(`second`)。 |
|
| ``mode`` | `string` | `'second'` | 指定选择的粒度,分别精确到时(`hour`)、分(`minute`)、秒(`second`)。 |
|
||||||
| `value` | `string` | | [^prop-value] |
|
| ``value`` | `string` | | [^prop-value] |
|
||||||
| `placeholder` | `string` | `timepicker.placeholder` | 未选择时的占位文本。 |
|
| ``placeholder`` | `string` | `timepicker.placeholder` | 未选择时的占位文本。 |
|
||||||
| `hours` | `Array<number>` | - | 小时选项,默认 0-23。 |
|
| ``hours`` | `Array<number>` | - | 小时选项,默认 0-23。 |
|
||||||
| `minutes` | `Array<number>` | - | 分钟选项,默认 0-59。 |
|
| ``minutes`` | `Array<number>` | - | 分钟选项,默认 0-59。 |
|
||||||
| `seconds` | `Array<number>` | - | 秒钟选项,默认 0-59。 |
|
| ``seconds`` | `Array<number>` | - | 秒钟选项,默认 0-59。 |
|
||||||
| `min` | `string` | - | 最小值限制。 |
|
| ``min`` | `string` | - | 最小值限制。 |
|
||||||
| `max` | `string` | - | 最大值限制。 |
|
| ``max`` | `string` | - | 最大值限制。 |
|
||||||
| `autofocus` | `boolean` | `false` | 是否自动获得焦点。 |
|
| ``autofocus`` | `boolean` | `false` | 是否自动获得焦点。 |
|
||||||
| `clearable` | `boolean` | `false` | 已选值是否可以清除。 |
|
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
|
||||||
| `expanded` | `boolean=` | `false` | [^expanded] |
|
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||||
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||||
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。为空格分隔的一组枚举值的组合。
|
预设样式。为空格分隔的一组枚举值的组合。
|
||||||
@ -72,7 +72,7 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `option` | [^slot-option] |
|
| ``option`` | [^slot-option] |
|
||||||
|
|
||||||
^^^slot-option
|
^^^slot-option
|
||||||
|
|
||||||
@ -84,7 +84,7 @@
|
|||||||
| `label` | `string` | 用来显示的文字描述。 |
|
| `label` | `string` | 用来显示的文字描述。 |
|
||||||
| `value` | `string` | 实际对应的值。 |
|
| `value` | `string` | 实际对应的值。 |
|
||||||
| `disabled` | `boolean=` | 是否禁用。 |
|
| `disabled` | `boolean=` | 是否禁用。 |
|
||||||
| `part` | `string` | 该选项是哪个部分,分别是 `hour`/`minute`/`second`。 |
|
| `part` | `string` | 该选项是哪个部分,分别是 `hour` / `minute` / `second`。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -92,10 +92,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `input` | [^event-input] |
|
| ``input`` | [^event-input] |
|
||||||
| `change` | 若当前选中的值发生变化,在时间选择下拉面板关闭时会触发该事件,参数是当前选中值。 |
|
| ``change`` | 若当前选中的值发生变化,在时间选择下拉面板关闭时会触发该事件,参数是当前选中值。 |
|
||||||
| `toggle` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
|
| ``toggle`` | 下拉浮层展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
|
||||||
| `clear` | 清除当前选中的值。 |
|
| ``clear`` | 清除当前选中的值。 |
|
||||||
|
|
||||||
^^^event-input
|
^^^event-input
|
||||||
:::badges
|
:::badges
|
||||||
@ -109,7 +109,7 @@
|
|||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `timepicker.placeholder` | `string` | `@@timepickerpicker.placeholder` | 未选择时的占位文本。 |
|
| ``timepicker.placeholder`` | `string` | `@@timepickerpicker.placeholder` | 未选择时的占位文本。 |
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
`@@` 开头的值表示引用多语言配置中的相应字段。
|
`@@` 开头的值表示引用多语言配置中的相应字段。
|
||||||
@ -119,6 +119,6 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `clock` | 时钟。 |
|
| ``clock`` | 时钟。 |
|
||||||
| `clear` | 清除内容。 |
|
| ``clear`` | 清除内容。 |
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 类型
|
### 类型
|
||||||
|
|
||||||
`Toast` 有四种类型,分别是 `info`、`success`、`warning` 和 `error`,可以通过 `type` 属性指定不同的类型。
|
`Toast` 有四种类型,分别是 `info`、`success`、`warning` 和 `error`,可以通过 [`type`](#props-type) 属性指定不同的类型。
|
||||||
|
|
||||||
[[ demo src="/demo/toast/default.vue" ]]
|
[[ demo src="/demo/toast/default.vue" ]]
|
||||||
|
|
||||||
@ -20,10 +20,10 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `type` | `string` | `'success'` | [^type] |
|
| ``type`` | `string` | `'success'` | [^type] |
|
||||||
| `message` | `string` | - | 消息内容。 |
|
| ``message`` | `string` | - | 消息内容。 |
|
||||||
| `duration` | `number` | `toast.duration` | 消息展示时间毫秒数,超过此事件则消息提示自动关闭。 |
|
| ``duration`` | `number` | `toast.duration` | 消息展示时间毫秒数,超过此事件则消息提示自动关闭。 |
|
||||||
|
|
||||||
^^^open
|
^^^open
|
||||||
:::badges
|
:::badges
|
||||||
@ -50,25 +50,25 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 内容区。默认显示 `message` 属性的内容。 |
|
| ``default`` | 内容区。默认显示 [`message`](#props-message) 属性的内容。 |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `close` | 消息自动关闭后触发。 |
|
| ``close`` | 消息自动关闭后触发。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `toast.duration` | `number` | `3000` | 消息默认展示时间毫秒数。 |
|
| ``toast.duration`` | `number` | `3000` | 消息默认展示时间毫秒数。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `info` | 普通信息。 |
|
| ``info`` | 普通信息。 |
|
||||||
| `success` | 成功状态。 |
|
| ``success`` | 成功状态。 |
|
||||||
| `warning` | 警告状态。 |
|
| ``warning`` | 警告状态。 |
|
||||||
| `error` | 错误状态。 |
|
| ``error`` | 错误状态。 |
|
||||||
|
@ -4,19 +4,19 @@
|
|||||||
|
|
||||||
### 风格
|
### 风格
|
||||||
|
|
||||||
可选的风格 `ui` 属性值:`alt`。
|
可选的风格 [`ui`](#props-ui) 属性值:`alt`。
|
||||||
|
|
||||||
[[ demo src="/demo/tooltip/style.vue" ]]
|
[[ demo src="/demo/tooltip/style.vue" ]]
|
||||||
|
|
||||||
### 定位
|
### 定位
|
||||||
|
|
||||||
使用 `position` 属性来指定浮层显示的位置。
|
使用 [`position`](#props-position) 属性来指定浮层显示的位置。
|
||||||
|
|
||||||
[[ demo src="/demo/tooltip/position.vue" ]]
|
[[ demo src="/demo/tooltip/position.vue" ]]
|
||||||
|
|
||||||
### 触发时机
|
### 触发时机
|
||||||
|
|
||||||
使用 `trigger` 属性来指定显示/隐藏浮层的时机。
|
使用 [`trigger`](#props-trigger) 属性来指定显示/隐藏浮层的时机。
|
||||||
|
|
||||||
[[ demo src="/demo/tooltip/trigger.vue" ]]
|
[[ demo src="/demo/tooltip/trigger.vue" ]]
|
||||||
|
|
||||||
@ -26,16 +26,16 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `open` | `boolean` | `false` | [^open] |
|
| ``open`` | `boolean` | `false` | [^open] |
|
||||||
| `target` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 `target` 属性。 |
|
| ``target`` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 [`target`](./overlay#props-target) 属性。 |
|
||||||
| `position` | `string` | `'top'` | [^position] |
|
| ``position`` | `string` | `'top'` | [^position] |
|
||||||
| `aim-center` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
|
| ``aim-center`` | `boolean` | `false` | 指定浮层提示箭头是否始终指向目标元素中心。 |
|
||||||
| `trigger` | `string` | `'hover'` | [^trigger] |
|
| ``trigger`` | `string` | `'hover'` | [^trigger] |
|
||||||
| `interactive` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
| ``interactive`` | `boolean` | `true` | 浮层内容是否允许交互。如果为 `false` 则在 `target` 外满足 `trigger` 指定的条件浮层即自动关闭。 |
|
||||||
| `hide-delay` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入浮层进行交互前已经自动关闭。 |
|
||||||
| `overlay-class` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
|
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||||
| `overlay-style` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
|
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -71,10 +71,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `default` | 浮层提示内容。 |
|
| ``default`` | 浮层提示内容。 |
|
||||||
|
|
||||||
### 全局配置
|
### 全局配置
|
||||||
|
|
||||||
| 配置项 | 类型 | 默认值 | 描述 |
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `tooltip.hideDelay` | `number` | `300` | 见 [`hide-delay` 属性](#属性)。 |
|
| ``tooltip.hideDelay`` | `number` | `300` | 见 [`hide-delay`](#props-hide-delay) 属性。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`s`/`m`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`s` / `m`。
|
||||||
|
|
||||||
[[ demo src="/demo/transfer/size.vue" ]]
|
[[ demo src="/demo/transfer/size.vue" ]]
|
||||||
|
|
||||||
@ -26,18 +26,18 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
|
||||||
| `searchable` | `boolean=` | `true` | 是否允许搜索。 |
|
| ``searchable`` | `boolean=` | `true` | 是否允许搜索。 |
|
||||||
| `filter` | `function=` | 见描述 | [^filter] |
|
| ``filter`` | `function=` | 见描述 | [^filter] |
|
||||||
| `selected` | `Array=` | `[]` | [^selected] |
|
| ``selected`` | `Array=` | `[]` | [^selected] |
|
||||||
| `candidate-placeholder` | `string=` | - | 待选区内搜索框的占位文本。 |
|
| ``candidate-placeholder`` | `string=` | - | 待选区内搜索框的占位文本。 |
|
||||||
| `selected-placeholder` | `string=` | - | 已选区内搜索框的占位文本。 |
|
| ``selected-placeholder`` | `string=` | - | 已选区内搜索框的占位文本。 |
|
||||||
| `candidate-label` | `string=` | - | “待选项”标题的文字内容。 |
|
| ``candidate-label`` | `string=` | - | “待选项”标题的文字内容。 |
|
||||||
| `selected-label` | `string=` | - | “已选项”标题的文字内容。 |
|
| ``selected-label`` | `string=` | - | “已选项”标题的文字内容。 |
|
||||||
| `selected-show-mode` | `string=` | `'tree'` | [^selected-show-mode] |
|
| ``selected-show-mode`` | `string=` | `'tree'` | [^selected-show-mode] |
|
||||||
| `keys` | `string | function` | `'value'` | [^keys] |
|
| ``keys`` | `string | function` | `'value'` | [^keys] |
|
||||||
| `merge-checked` | `string=` | `keep-all` | [^merge-checked] |
|
| ``merge-checked`` | `string=` | `keep-all` | [^merge-checked] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -73,7 +73,7 @@
|
|||||||
| `keyword` | `string` | 搜索关键词。 |
|
| `keyword` | `string` | 搜索关键词。 |
|
||||||
| `item` | `Object` | 当前遍历到的数据项。 |
|
| `item` | `Object` | 当前遍历到的数据项。 |
|
||||||
| `index` | `number` | 当前数据项在兄弟项目中的索引。 |
|
| `index` | `number` | 当前数据项在兄弟项目中的索引。 |
|
||||||
| `datasource` | `Array<Object>` | 与 `datasource` 属性一致。 |
|
| `datasource` | `Array<Object>` | 与 [`datasource`](#props-datasource) 属性一致。 |
|
||||||
+++
|
+++
|
||||||
|
|
||||||
+++默认值
|
+++默认值
|
||||||
@ -92,7 +92,7 @@ function (keyword, { label }) {
|
|||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
当前选中的值,是 `datasource` 中选中项的 `value` 集合(受 `keys` 属性影响)。
|
当前选中的值,是 `datasource` 中选中项的 `value` 集合(受 [`keys`](#props-keys) 属性影响)。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^selected-show-mode
|
^^^selected-show-mode
|
||||||
@ -129,17 +129,17 @@ function (keyword, { label }) {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `candidate` | 整个待选区。 |
|
| ``candidate`` | 整个待选区。 |
|
||||||
| `candidate-head` | [^candidate-head] |
|
| ``candidate-head`` | [^candidate-head] |
|
||||||
| `selected-head` | [^selected-head] |
|
| ``selected-head`` | [^selected-head] |
|
||||||
| `candidate-title` | 待选区内顶部标题文本区域。作用域参数与 `candidate-head` 一致。 |
|
| ``candidate-title`` | 待选区内顶部标题文本区域。作用域参数与 `candidate-head` 一致。 |
|
||||||
| `selected-title` | 已选区内顶部标题文本区域。作用域参数与 `selected-head` 一致。 |
|
| ``selected-title`` | 已选区内顶部标题文本区域。作用域参数与 `selected-head` 一致。 |
|
||||||
| `candidate-no-data` | 数据源没数据时显示的内容。 |
|
| ``candidate-no-data`` | 数据源没数据时显示的内容。 |
|
||||||
| `selected-no-data` | 没有已选项时显示的内容。 |
|
| ``selected-no-data`` | 没有已选项时显示的内容。 |
|
||||||
| `candidate-item` | [^candidate-item] |
|
| ``candidate-item`` | [^candidate-item] |
|
||||||
| `selected-item` | [^selected-item] |
|
| ``selected-item`` | [^selected-item] |
|
||||||
| `candidate-item-label` | 待选区内每一项的文本区域。作用域参数与 `candidate-item` 一致。 |
|
| ``candidate-item-label`` | 待选区内每一项的文本区域。作用域参数与 `candidate-item` 一致。 |
|
||||||
| `selected-item-label` | 已选区内每一项的文本区域。当 `selected-show-mode` 为 `'tree'` 时作用域参数与 `selected-item` 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容,此时作用域参数与 `candidate-item` 一致。 |
|
| ``selected-item-label`` | 已选区内每一项的文本区域。当 `selected-show-mode` 为 `'tree'` 时作用域参数与 `selected-item` 一致。否则该插槽对应每个已选叶子项目的整条路径上的每个节点内容,此时作用域参数与 `candidate-item` 一致。 |
|
||||||
|
|
||||||
^^^candidate-head
|
^^^candidate-head
|
||||||
待选区内顶部标题区域。
|
待选区内顶部标题区域。
|
||||||
@ -193,15 +193,15 @@ function (keyword, { label }) {
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `select` | 切换选择时触发。回调参数为 `(selected: Array<string>)`。`selected` 为已选项 `value` 字段集合。 |
|
| ``select`` | 切换选择时触发。回调参数为 `(selected: Array<string>)`。`selected` 为已选项 `value` 字段集合。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `checked` | 已选状态。 |
|
| ``checked`` | 已选状态。 |
|
||||||
| `select` | 待选择。 |
|
| ``select`` | 待选择。 |
|
||||||
| `remove` | 移除。 |
|
| ``remove`` | 移除。 |
|
||||||
| `expand` | 收起状态,点击后展开。 |
|
| ``expand`` | 收起状态,点击后展开。 |
|
||||||
| `collapse` | 展开状态,点击后收起。 |
|
| ``collapse`` | 展开状态,点击后收起。 |
|
||||||
| `separator` | 当 `selected-show-mode` 为 `'flat'` 时层级间的分隔符。 |
|
| ``separator`` | 当 `selected-show-mode` 为 `'flat'` 时层级间的分隔符。 |
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
### 尺寸
|
### 尺寸
|
||||||
|
|
||||||
可选的尺寸 `ui` 属性值:`m`/`s`。
|
可选的尺寸 [`ui`](#props-ui) 属性值:`m` / `s`。
|
||||||
|
|
||||||
[[ demo src="/demo/tree/size.vue" ]]
|
[[ demo src="/demo/tree/size.vue" ]]
|
||||||
|
|
||||||
@ -22,14 +22,14 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `datasource` | `Array<Object>` | `[]` | [^datasource] |
|
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
|
||||||
| `expanded` | `Array` | `[]` | [^expanded] |
|
| ``expanded`` | `Array` | `[]` | [^expanded] |
|
||||||
| `checkable` | `boolean` | `false` | 子节点是否可勾选。 |
|
| ``checkable`` | `boolean` | `false` | 子节点是否可勾选。 |
|
||||||
| `checked` | `Array` | `[]` | [^checked] |
|
| ``checked`` | `Array` | `[]` | [^checked] |
|
||||||
| `selectable` | `boolean` | `false` | 点击整个节点区域时是否选中该节点。 |
|
| ``selectable`` | `boolean` | `false` | 点击整个节点区域时是否选中该节点。 |
|
||||||
| `selected` | `string` | - | [^selected] |
|
| ``selected`` | `string` | - | [^selected] |
|
||||||
| `merge-checked` | `string` | `keep-all` | [^merge-checked] |
|
| ``merge-checked`` | `string` | `keep-all` | [^merge-checked] |
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
预设样式。
|
预设样式。
|
||||||
@ -96,10 +96,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `item` | [^item] |
|
| ``item`` | [^item] |
|
||||||
| `item-label` | 每个节点的文本区域。作用域参数与 `item` 插槽一致。 |
|
| ``item-label`` | 每个节点的文本区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
|
||||||
| `item-before` | 每个节点的文本之前的区域。作用域参数与 `item` 插槽一致。 |
|
| ``item-before`` | 每个节点的文本之前的区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
|
||||||
| `item-after` | 每个节点的文本之后的区域。作用域参数与 `item` 插槽一致。 |
|
| ``item-after`` | 每个节点的文本之后的区域。作用域参数与 [`item`](#slots-item) 插槽一致。 |
|
||||||
|
|
||||||
^^^item
|
^^^item
|
||||||
每个节点的整个内容区域。
|
每个节点的整个内容区域。
|
||||||
@ -122,10 +122,10 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `click` | [^click] |
|
| ``click`` | [^click] |
|
||||||
| `expand` | [^expand] |
|
| ``expand`` | [^expand] |
|
||||||
| `collapse` | [^collapse] |
|
| ``collapse`` | [^collapse] |
|
||||||
| `check` | [^check] |
|
| ``check`` | [^check] |
|
||||||
|
|
||||||
^^^click
|
^^^click
|
||||||
点击节点触发,回调参数为 `(item, parents, index, depth)`。
|
点击节点触发,回调参数为 `(item, parents, index, depth)`。
|
||||||
@ -153,7 +153,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^collapse
|
^^^collapse
|
||||||
点击收起图标或者整个节点时触发,由 `item-click` 属性决定,回调参数为 `(item, index, depth)`。
|
点击收起图标或者整个节点时触发,由 [`item-click`](#props-item-click) 属性决定,回调参数为 `(item, index, depth)`。
|
||||||
|
|
||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
@ -169,12 +169,12 @@
|
|||||||
`v-model`
|
`v-model`
|
||||||
:::
|
:::
|
||||||
|
|
||||||
勾选状态变化后触发,回调参数为 `(value: Array)`。`value` 为当前勾选中的叶节点的 `value` 字段组成的数组(受 `keys` 属性影响)。
|
勾选状态变化后触发,回调参数为 `(value: Array)`。`value` 为当前勾选中的叶节点的 `value` 字段组成的数组(受 [`keys`](#props-keys) 属性影响)。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `expand` | 收起状态,点击后展开。 |
|
| ``expand`` | 收起状态,点击后展开。 |
|
||||||
| `collapse` | 展开状态,点击后收起。 |
|
| ``collapse`` | 展开状态,点击后收起。 |
|
||||||
|
@ -38,34 +38,34 @@
|
|||||||
|
|
||||||
| 属性 | 类型 | 默认值 | 描述 |
|
| 属性 | 类型 | 默认值 | 描述 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| `ui` | `string=` | - | [^ui] |
|
| ``ui`` | `string=` | - | [^ui] |
|
||||||
| `type` | `string` | `'file'` | [^type] |
|
| ``type`` | `string` | `'file'` | [^type] |
|
||||||
| `value` | `Object | Array<Object>` | - | [^value] |
|
| ``value`` | `Object | Array<Object>` | - | [^value] |
|
||||||
| `key-field` | `string` | `'key'` | 用于指定文件对象的唯一 key,作为数据变化时正确处理文件列表顺序的依据。 |
|
| ``key-field`` | `string` | `'key'` | 用于指定文件对象的唯一 key,作为数据变化时正确处理文件列表顺序的依据。 |
|
||||||
| `name` | `string` | `'file'` | 原生 `<input>` 元素的 `name`。 |
|
| ``name`` | `string` | `'file'` | 原生 `<input>` 元素的 `name`。 |
|
||||||
| `action` | `string` | - | 上传地址。 |
|
| ``action`` | `string` | - | 上传地址。 |
|
||||||
| `headers` | `Object` | `uploader.headers` | 需要加入 [HTTP 请求头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 的内容。可进行全局统一配置。 |
|
| ``headers`` | `Object` | `uploader.headers` | 需要加入 [HTTP 请求头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 的内容。可进行[全局统一配置](#configs-uploader-headers)。 |
|
||||||
| `with-credentials` | `boolean` | `true` | 同 `XMLHttpRequest` 的 `with-credentials` 属性。 |
|
| ``with-credentials`` | `boolean` | `true` | 同 `XMLHttpRequest` 的 [`withCredentials`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) 属性。 |
|
||||||
| `request-mode` | `string` | `uploader.requestMode` | [^request-mode] |
|
| ``request-mode`` | `string` | `uploader.requestMode` | [^request-mode] |
|
||||||
| `iframe-mode` | `string` | `uploader.iframeMode` | [^iframe-mode] |
|
| ``iframe-mode`` | `string` | `uploader.iframeMode` | [^iframe-mode] |
|
||||||
| `callback-namespace` | `string` | `uploader.callbackNamespace` | 在 `request-mode` 的值为 `'iframe'` 并且 `iframe-mode` 的值为 `'callback'` 的模式下,指定回调函数的命名空间,放在 `window` 对象下。可进行全局统一配置。 |
|
| ``callback-namespace`` | `string` | `uploader.callbackNamespace` | 在 `request-mode` 的值为 `'iframe'` 并且 `iframe-mode` 的值为 `'callback'` 的模式下,指定回调函数的命名空间,放在 `window` 对象下。可进行[全局统一配置](#configs-uploader-callbackNamespace)。 |
|
||||||
| `data-type`| `string` | `'json'` | [^data-type] |
|
| ``data-type``| `string` | `'json'` | [^data-type] |
|
||||||
| `convert-response` | `uploader.convertResponse` | - | [^convert-response] |
|
| ``convert-response`` | `uploader.convertResponse` | - | [^convert-response] |
|
||||||
| `accept` | `string` | - | 与原生 `<input>` 元素 的 `accept` 相同,在浏览器的文件类型筛选后再加一层校验。对于类似 `application/msword` 这样的 MIME type 与扩展名对不上的情形跳过校验。 |
|
| ``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-count`` | `number` | - | 最大文件数量。 |
|
||||||
| `max-size` | `number | string` | - | 单个文件的最大大小,如果是 `number`,单位是 `byte`;如果是 `string`,支持在数字后面添加单位,单位可以是 `b`/`kb`/`mb`/`gb`/`tb`。 |
|
| ``max-size`` | `number | string` | - | 单个文件的最大大小,如果是 `number`,单位是 `byte`;如果是 `string`,支持在数字后面添加单位,单位可以是 `b` / `kb` / `mb` / `gb` / `tb`。 |
|
||||||
| `validator` | `function(Object): Object | Promise<Object>` | - | [^validator] |
|
| ``validator`` | `function(Object): Object | Promise<Object>` | - | [^validator] |
|
||||||
| `payload` | `Object` | - | 附带在上传请求中的额外参数。 |
|
| ``payload`` | `Object` | - | 附带在上传请求中的额外参数。 |
|
||||||
| `autoupload` | `boolean` | `true` | 指定是否在选完文件后立刻上传。 |
|
| ``autoupload`` | `boolean` | `true` | 指定是否在选完文件后立刻上传。 |
|
||||||
| `order` | `string` | `'asc'` | [^order] |
|
| ``order`` | `string` | `'asc'` | [^order] |
|
||||||
| `picker-position` | `string` | `'after'` | [^picker-position] |
|
| ``picker-position`` | `string` | `'after'` | [^picker-position] |
|
||||||
| `upload` | `function(Object, Object): function` | - | [^upload] |
|
| ``upload`` | `function(Object, Object): function` | - | [^upload] |
|
||||||
| `controls` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
|
| ``controls`` | `function(Object, Array<Object>): Array<Object>` | - | [^controls] |
|
||||||
| `multiple` | `boolean` | `false` | 上传多个文件,当 `max-count` 是 `1`,`multiple` 是 `true`,那么 `value` 也是数组。 |
|
| ``multiple`` | `boolean` | `false` | 上传多个文件,当 `max-count` 是 `1`,`multiple` 是 `true`,那么 `value` 也是数组。 |
|
||||||
| `entries` | `function(Array<Object>): Array<Object>` | - | [^entries] |
|
| ``entries`` | `function(Array<Object>): Array<Object>` | - | [^entries] |
|
||||||
| `after-pick` | `function(Array<Object>): void` | - | 选择文件之后的回调。 |
|
| ``after-pick`` | `function(Array<Object>): void` | - | 选择文件之后的回调。 |
|
||||||
| `sortable` | `boolean` | `false` | 文件列表是否可以排序。 |
|
| ``sortable`` | `boolean` | `false` | 文件列表是否可以排序。 |
|
||||||
| `preview-options` | `object` | `{wrap: true, indicator: 'number'}` | 传递给 [`Lightbox`](./lightbox) 的预览选项|
|
| ``preview-options`` | `object` | `{wrap: true, indicator: 'number'}` | 传递给 [`Lightbox`](./lightbox) 的预览选项。 |
|
||||||
|
|
||||||
|
|
||||||
^^^ui
|
^^^ui
|
||||||
@ -99,7 +99,7 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^request-mode
|
^^^request-mode
|
||||||
指定异步上传方式。可进行全局统一配置。
|
指定异步上传方式。可进行[全局统一配置](#configs-uploader-request-mode)。
|
||||||
|
|
||||||
+++枚举值
|
+++枚举值
|
||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
@ -111,13 +111,13 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^iframe-mode
|
^^^iframe-mode
|
||||||
指定在 `request-mode` 的值为 `iframe` 的模式下,上传成功后的回调方式。可进行全局统一配置。
|
指定在 [`request-mode`](#props-request-mode) 的值为 `iframe` 的模式下,上传成功后的回调方式。可进行[全局统一配置](#configs-uploader-request-mode)。
|
||||||
|
|
||||||
+++枚举值
|
+++枚举值
|
||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `postmessage` | 通过 `PostMessage` 回调。 |
|
| `postmessage` | 通过 `PostMessage` 回调。 |
|
||||||
| `callback` | 通过调用 `window` 的 `callback-namespace` 里的回调函数回调。 |
|
| `callback` | 通过调用 `window` 的 [`callback-namespace`](#props-callback-namespace) 里的回调函数回调。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -143,7 +143,7 @@
|
|||||||
| `src` | `string=` | 文件的地址。`success` 为 `true` 时必须。 |
|
| `src` | `string=` | 文件的地址。`success` 为 `true` 时必须。 |
|
||||||
| `message` | `string=` | 上传失败时的出错信息。`success` 为 `false` 时必须。 |
|
| `message` | `string=` | 上传失败时的出错信息。`success` 为 `false` 时必须。 |
|
||||||
|
|
||||||
还可以给返回结果加上其它自定义的属性,这些自定义属性会被包含在 `value` 以及 `change`、`success`、`failure`、`remove`、`progress` 事件的回调参数 `file` 中 。可进行全局统一配置。
|
还可以给返回结果加上其它自定义的属性,这些自定义属性会被包含在 [`value`](#props-value) 以及 [`change`](#events-change)、[`success`](#events-success)、[`failure`](#events-failure)、[`remove`](#events-remove)、[`progress`](#events-progress) 事件的回调参数 `file` 中 。可进行[全局统一配置](#configs-uploader-convert-response)。
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -188,7 +188,7 @@
|
|||||||
+++字段详情
|
+++字段详情
|
||||||
| 字段 | 类型 | 描述 |
|
| 字段 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `onload` | `function` | 上传完成的回调函数,参数内容与 `convert-response` prop 返回值相同。 |
|
| `onload` | `function` | 上传完成的回调函数,参数内容与 [`convert-response`](#props-convert-response) 属性返回值相同。 |
|
||||||
| `onprogress` | `function` | 上传进度发生变化的回调函数,参数为 `{ loaded: number, total: number }`,`loaded` 为已上传部分字节数,`total` 为文件总字节数。 |
|
| `onprogress` | `function` | 上传进度发生变化的回调函数,参数为 `{ loaded: number, total: number }`,`loaded` 为已上传部分字节数,`total` 为文件总字节数。 |
|
||||||
| `oncancel` | `function` | 自定义上传主动取消时对组件进行的回调,无参数。 |
|
| `oncancel` | `function` | 自定义上传主动取消时对组件进行的回调,无参数。 |
|
||||||
| `onerror` | `function` | 上传出错的回调函数,参数为 `{ message: string }`,`message` 为错误提示信息。 |
|
| `onerror` | `function` | 上传出错的回调函数,参数为 `{ message: string }`,`message` 为错误提示信息。 |
|
||||||
@ -209,21 +209,21 @@
|
|||||||
^^^
|
^^^
|
||||||
|
|
||||||
^^^entries
|
^^^entries
|
||||||
控制每个上传文件的操作项,如删除,预览等,会传递默认的操作项数组作为参数,返回实际生效的操作项数组。操作项对象参考 `controls` 属性的字段详情。
|
控制每个上传文件的操作项,如删除,预览等,会传递默认的操作项数组作为参数,返回实际生效的操作项数组。操作项对象参考 [`controls`](#props-controls) 属性的字段详情。
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
### 插槽
|
### 插槽
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `button-label` | [^button-label] |
|
| ``button-label`` | [^button-label] |
|
||||||
| `upload` | 图片上传模式下,上传按钮的区域。 |
|
| ``upload`` | 图片上传模式下,上传按钮的区域。 |
|
||||||
| `desc` | 对文件数量、格式、大小等的提示内容。 |
|
| ``desc`` | 对文件数量、格式、大小等的提示内容。 |
|
||||||
| `file` | [^file] |
|
| ``file`` | [^file] |
|
||||||
| `file-before` | 单个文件内容之前的区域。作用域参数与 `file` 插槽相同。 |
|
| ``file-before`` | 单个文件内容之前的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
|
||||||
| `file-after` | 单个文件内容之后的区域。作用域参数与 `file` 插槽相同。 |
|
| ``file-after`` | 单个文件内容之后的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
|
||||||
| `uploading` | 图片上传模式下,上传中的单个图片的区域。作用域参数与 `file` 插槽相同。 |
|
| ``uploading`` | 图片上传模式下,上传中的单个图片的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
|
||||||
| `failure` | 图片上传模式下,上传失败的单个图片的区域。作用域参数与 `file` 插槽相同。 |
|
| ``failure`` | 图片上传模式下,上传失败的单个图片的区域。作用域参数与 [`file`](#slots-file) 插槽相同。 |
|
||||||
|
|
||||||
^^^button-label
|
^^^button-label
|
||||||
上传按钮里的内容。
|
上传按钮里的内容。
|
||||||
@ -248,13 +248,13 @@
|
|||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `change` | [^event-change] |
|
| ``change`` | [^event-change] |
|
||||||
| `remove` | [^event-remove] |
|
| ``remove`` | [^event-remove] |
|
||||||
| `success` | 上传成功时触发,回调参数与 `remove` 事件的回调参数相同。 |
|
| ``success`` | 上传成功时触发,回调参数与 [`remove`](#events-remove) 事件的回调参数相同。 |
|
||||||
| `failure` | 上传失败时触发,回调参数与 `remove` 事件的回调参数相同。 |
|
| ``failure`` | 上传失败时触发,回调参数与 [`remove`](#events-remove) 事件的回调参数相同。 |
|
||||||
| `invalid` | [^event-invalid] |
|
| ``invalid`` | [^event-invalid] |
|
||||||
| `statuschange` | [^event-statuschange] |
|
| ``statuschange`` | [^event-statuschange] |
|
||||||
| `progress` | [^event-progress] |
|
| ``progress`` | [^event-progress] |
|
||||||
|
|
||||||
^^^event-change
|
^^^event-change
|
||||||
只在上传成功、删除文件时触发,回调参数为 `(value)`。
|
只在上传成功、删除文件时触发,回调参数为 `(value)`。
|
||||||
@ -283,7 +283,7 @@
|
|||||||
| `src` | `string` | 文件地址。 |
|
| `src` | `string` | 文件地址。 |
|
||||||
| `status` | `string` | 上传状态。`'success'` 表示上传成功;`'uploading'` 表示正在上传;`'failure'` 表示上传失败。 |
|
| `status` | `string` | 上传状态。`'success'` 表示上传成功;`'uploading'` 表示正在上传;`'failure'` 表示上传失败。 |
|
||||||
|
|
||||||
同时也包含在 `convert-response` 中添加的自定义属性。
|
同时也包含在 [`convert-response`](#props-convert-response) 中添加的自定义属性。
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -293,7 +293,7 @@
|
|||||||
+++参数字段详情
|
+++参数字段详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `file` | `Object` | 没有通过校验的文件信息,与 `remove` 事件的回调参数中的 `file` 相同。如果校验失败的原因是选择的文件数量超过最大数量 `max-count` 限制,则这个字段为空。 |
|
| `file` | `Object` | 没有通过校验的文件信息,与 [`remove`](#events-remove) 事件的回调参数中的 `file` 相同。如果校验失败的原因是选择的文件数量超过最大数量 `max-count` 限制,则这个字段为空。 |
|
||||||
| `errors` | `Array<Object>` | 包含该文件所有校验错误信息的数组,数组的每一项是包含校验失败信息的对象。 |
|
| `errors` | `Array<Object>` | 包含该文件所有校验错误信息的数组,数组的每一项是包含校验失败信息的对象。 |
|
||||||
+++
|
+++
|
||||||
|
|
||||||
@ -311,7 +311,7 @@
|
|||||||
| `TYPE_INVALID` | 文件类型校验失败。 | `string` | 文件名称。 |
|
| `TYPE_INVALID` | 文件类型校验失败。 | `string` | 文件名称。 |
|
||||||
| `SIZE_INVALID` | 文件大小校验失败。 | `number` | 文件大小字节数。 |
|
| `SIZE_INVALID` | 文件大小校验失败。 | `number` | 文件大小字节数。 |
|
||||||
| `TOO_MANY_FILES` | 选择的文件数超过 `max-count` 限制。 | `number` | 已选择的文件数。 |
|
| `TOO_MANY_FILES` | 选择的文件数超过 `max-count` 限制。 | `number` | 已选择的文件数。 |
|
||||||
| `CUSTOM_INVALID` | `validator` 自定义校验失败。 | `Object` | 文件对象,字段同 `remove` 事件回调参数。 |
|
| `CUSTOM_INVALID` | `validator` 自定义校验失败。 | `Object` | 文件对象,字段同 [`remove`](#events-remove) 事件回调参数。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -334,7 +334,7 @@
|
|||||||
+++参数详情
|
+++参数详情
|
||||||
| 名称 | 类型 | 描述 |
|
| 名称 | 类型 | 描述 |
|
||||||
| -- | -- | -- |
|
| -- | -- | -- |
|
||||||
| `file` | `Object` | 与 `remove` 事件的回调参数中的 `file` 相同。 |
|
| `file` | `Object` | 与 [`remove`](#events-remove) 事件的回调参数中的 `file` 相同。 |
|
||||||
| `index` | `number` | 正在上传的文件的序号。 |
|
| `index` | `number` | 正在上传的文件的序号。 |
|
||||||
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/progress) | 上传进度原生事件。 |
|
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/progress) | 上传进度原生事件。 |
|
||||||
+++
|
+++
|
||||||
@ -344,23 +344,23 @@
|
|||||||
|
|
||||||
| 名称 | 类型 | 默认值 | 描述 |
|
| 名称 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `uploader.requestMode` | `string` | `'xhr'` | 参见 [`request-mode`](#props) 属性。 |
|
| ``uploader.requestMode`` | `string` | `'xhr'` | 参见 [`request-mode`](#props-request-mode) 属性。 |
|
||||||
| `uploader.iframeMode` | `string` | `'postmessage'` | 参见 [`iframe-mode`](#props) 属性。 |
|
| ``uploader.iframeMode`` | `string` | `'postmessage'` | 参见 [`iframe-mode`](#props-iframe-mode) 属性。 |
|
||||||
| `uploader.callbackNamespace` | `string` | `'veuiUploadResult'` | 参见 [`callback-namespace`](#props) 属性。 |
|
| ``uploader.callbackNamespace`` | `string` | `'veuiUploadResult'` | 参见 [`callback-namespace`](#props-callback-namespace) 属性。 |
|
||||||
| `uploader.headers` | `Object` | - | 参见 [`headers`](#props) 属性。 |
|
| ``uploader.headers`` | `Object` | - | 参见 [`headers`](#props-headers) 属性。 |
|
||||||
| `uploader.convertResponse` | `function(Object): Object` | - | 参见 [`convert-response`](#props) 属性。 |
|
| ``uploader.convertResponse`` | `function(Object): Object` | - | 参见 [`convert-response`](#props-convert-response) 属性。 |
|
||||||
| `uploader.pickerPosition` | `string` | `'after'` | 参见 [`picker-position`](#props) 属性。 |
|
| ``uploader.pickerPosition`` | `string` | `'after'` | 参见 [`picker-position`](#props-picker-position) 属性。 |
|
||||||
|
|
||||||
### 图标
|
### 图标
|
||||||
|
|
||||||
| 名称 | 描述 |
|
| 名称 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `upload` | 上传文件。 |
|
| ``upload`` | 上传文件。 |
|
||||||
| `add-image` | 上传图片。 |
|
| ``add-image`` | 上传图片。 |
|
||||||
| `clear` | 删除。 |
|
| ``clear`` | 删除。 |
|
||||||
| `success` | 上传成功。 |
|
| ``success`` | 上传成功。 |
|
||||||
| `failure` | 上传失败。 |
|
| ``failure`` | 上传失败。 |
|
||||||
| `loading` | 上传中。 |
|
| ``loading`` | 上传中。 |
|
||||||
| `file` | 已上传文件。 |
|
| ``file`` | 已上传文件。 |
|
||||||
| `alert` | 校验失败警告。 |
|
| ``alert`` | 校验失败警告。 |
|
||||||
| `preview` | 预览图片。 |
|
| ``preview`` | 预览图片。 |
|
||||||
|
@ -38,9 +38,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以指定 `closable` 属性为 `true` 来允许提示被用户主动关闭,还可以通过指定 `close-label` 属性来将关闭按钮以文字形式展现。
|
可以指定 [`closable`](#props-closable) 属性为 `true` 来允许提示被用户主动关闭,还可以通过指定 [`close-label`](#props-close-label) 属性来将关闭按钮以文字形式展现。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Set the `closable` prop to `true` to allow the alert message to be closed by users. You can also use the `close-label` prop to make the close button shown as specified text.
|
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>
|
</docs>
|
||||||
|
@ -33,9 +33,9 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可将消息内容写在默认插槽中,也可以通过 `message` 属性进行指定。
|
可将消息内容写在默认插槽中,也可以通过 [`message`](#props-message) 属性进行指定。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Messages can either be specified in the default slot, or via the `message` prop.
|
Messages can either be specified in the default slot, or via the [`message`](#props-message) prop.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -53,9 +53,9 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以使用 `max` 属性,指定可现实数字的最大值,超过则显示为“<var>max</var>+”。
|
可以使用 [`max`](#props-max) 属性,指定可现实数字的最大值,超过则显示为“<var>max</var>+”。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Use the `max` prop to specify the max value can be displayed. Displays “<var>max</var>+” when value is larger than `max`.
|
Use the [`max`](#props-max) prop to specify the max value can be displayed. Displays “<var>max</var>+” when value is larger than `max`.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -50,9 +50,9 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以使用 `type` 属性,指定徽标在不同功能状态下的样式。
|
可以使用 [`type`](#props-type) 属性,指定徽标在不同功能状态下的样式。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Use the `type` prop to apply different contextual styles.
|
Use the [`type`](#props-type) prop to apply different contextual styles.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -68,9 +68,9 @@ section {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
`ButtonGroup` 的 `disabled` 属性仅在使用 `items` 指定内容时生效,如果使用内联的 `Button` 组件,则需要为每个按钮分别指定 `disabled` 属性。
|
`ButtonGroup` 的 [`disabled`](#props-disabled) 属性仅在使用 `items` 指定内容时生效,如果使用内联的 `Button` 组件,则需要为每个按钮分别指定 [`disabled`](./button#props-disabled) 属性。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`.
|
The [`disabled`](#props-disabled) prop of `ButtonGroup` only takes effect when the content is specified using `items`, and if inline `Button` components are used, you need to specify the [`disabled`](./button#props-disabled) prop for each button.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -46,9 +46,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
还可以使用 `interval` 属性来指定自动播放的切换间隔时长,使用 `wrap` 属性来允许循环播放,以及使用 `pause-on-hover` 属性来时光标悬浮在指示器对应项时暂停自动播放。
|
还可以使用 [`interval`](#props-interval) 属性来指定自动播放的切换间隔时长,使用 [`wrap`](#props-wrap) 属性来允许循环播放,以及使用 [`pause-on-hover`](#props-pause-on-hover) 属性来时光标悬浮在指示器对应项时暂停自动播放。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
You can also use the `autoplay` prop to enable autoplay, use the `wrap` prop to enable looping and use the `pause-on-hover` prop to pause playing when cursor hover step indicators.
|
You can also use the [`autoplay`](#props-autoplay) prop to enable autoplay, use the [`wrap`](#props-wrap) prop to enable looping and use the [`pause-on-hover`](#props-pause-on-hover) prop to pause playing when cursor hover step indicators.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -57,9 +57,9 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以使用 `indeterminate` 属性来设置半选状态。
|
可以使用 [`indeterminate`](#props-indeterminate) 属性来设置半选状态。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Use the `indeterminate` prop to put the checkbox in indeterminate state.
|
Use the [`indeterminate`](#props-indeterminate) prop to put the checkbox in indeterminate state.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -112,9 +112,9 @@ article > .veui-button {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
当你希望统一处理用户可能触发对话框关闭的操作,请使用 `before-close` 属性传入统一的处理函数,此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作,都会统一进入 `before-close` 的处理流程。如果逻辑相对简单,比如取消时没有额外逻辑,可以直接操作 `open` 属性来关闭对话框。
|
当你希望统一处理用户可能触发对话框关闭的操作,请使用 [`before-close`](#props-before-close) 属性传入统一的处理函数,此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作,都会统一进入 `before-close` 的处理流程。如果逻辑相对简单,比如取消时没有额外逻辑,可以直接操作 [`open`](#props-open) 属性来关闭对话框。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog.
|
When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate [`open`](#props-open) prop directly to close the dialog.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -66,9 +66,9 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
`s`/`m` 用于指定内容的尺寸,会被继承到内部的组件上。而 `narrow`/`medium`/`wide`/`fullscreen`/`auto` 是对话框本身所占区域的大小,可以与 `s`/`m` 混合使用。
|
`s` / `m` 用于指定内容的尺寸,会被继承到内部的组件上。而 `narrow` / `medium` / `wide` / `fullscreen` / `auto` 是对话框本身所占区域的大小,可以与 `s` / `m` 混合使用。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
`s`/`m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow`/`medium`/`wide`/`fullscreen`/`auto` are used to specify the dimension of the dialog itself, thus can be used together with `s`/`m`.
|
`s` / `m` are used to specify size for internal content and will be inherited by components inside the dialog. While `narrow` / `medium` / `wide` / `fullscreen` / `auto` are used to specify the dimension of the dialog itself, thus can be used together with `s` / `m`.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -65,5 +65,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
将 `OptionGroup` 的 [`position`](#props-position) 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -71,5 +71,5 @@ article {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以在 `GridContainer` 上使用 `columns`/`margin`/`gutter` 调整布局参数。
|
可以在 `GridContainer` 上使用 `columns` / `margin` / `gutter` 调整布局参数。
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -147,5 +147,5 @@ section + section {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心,适合用于目标元素较小的场景。
|
使用 [`aim-center`](#props-aim-center) 属性来设置浮层提示箭头始终对准目标元素中心,适合用于目标元素较小的场景。
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -94,7 +94,7 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以使用 `clearable` 属性将 `Select` 组件设置为允许删除已选值的模式。将 `OptionGroup` 的 `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
可以使用 [`clearable`](#props-clearable) 属性将 `Select` 组件设置为允许删除已选值的模式。将 `OptionGroup` 的 [`position`](./option-group#props-position) 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
|
@ -71,9 +71,9 @@ section {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可使用 `max` 属性控制选中选项的最大数量。这种场景下也可以使用 `searchable` 属性控制是否允许搜索选项。
|
可使用 [`max`](#props-max) 属性控制选中选项的最大数量。这种场景下也可以使用 [`searchable`](#props-searchable) 属性控制是否允许搜索选项。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Use `max` to specify the max number of options that can be selected. The `searchable` prop can also be used here to make options searchable.
|
Use `max` to specify the max number of options that can be selected. The [`searchable`](#props-searchable) prop can also be used here to make options searchable.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -145,9 +145,9 @@ h4 {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
可以使用 `crowded` 这个 `ui` 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。
|
可以使用 `crowded` 这个 [`ui`](#props-ui) 属性值来在需要展示很多列的布局下默认隐藏筛选按钮。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
You can use the `ui` prop value `crowded` to hide filter button by default when there are too many columns to be displayed.
|
You can use the [`ui`](#props-ui) prop value `crowded` to hide filter button by default when there are too many columns to be displayed.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -137,9 +137,9 @@ h4 {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
在固定列模式下,必须为被固定的列指定 `width` 属性。
|
在固定列模式下,必须为被固定的列指定 [`width`](./column#props-width) 属性。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
The `width` prop must be specified for fixed columns.
|
The [`width`](./column#props-width) prop must be specified for fixed columns.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -147,5 +147,5 @@ section + section {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
使用 `aim-center` 属性来设置浮层提示箭头始终对准目标元素中心,适合用于目标元素较小的场景。
|
使用 [`aim-center`](#props-aim-center) 属性来设置浮层提示箭头始终对准目标元素中心,适合用于目标元素较小的场景。
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -188,9 +188,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<docs>
|
<docs>
|
||||||
自定义 `filter` 以根据 `label`/`value`/`id` 筛选。
|
自定义 `filter` 以根据 `label` / `value` / `id` 筛选。
|
||||||
</docs>
|
</docs>
|
||||||
|
|
||||||
<docs locale="en-US">
|
<docs locale="en-US">
|
||||||
Customize `filter` to filter by any of `label`/`value`/`id`.
|
Customize `filter` to filter by any of `label` / `value` / `id`.
|
||||||
</docs>
|
</docs>
|
||||||
|
@ -101,7 +101,7 @@
|
|||||||
|
|
||||||
### 修饰符
|
### 修饰符
|
||||||
|
|
||||||
对应 `Object` 绑定值中的 `type`/`axis`。例如:
|
对应 `Object` 绑定值中的 `type` / `axis`。例如:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 沿着垂直方向做位移变换 -->
|
<!-- 沿着垂直方向做位移变换 -->
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
### 绑定值
|
### 绑定值
|
||||||
|
|
||||||
类型:`function|Object`。
|
类型:`function | Object`。
|
||||||
|
|
||||||
使用 `function` 类型则绑定值表示触发长按或后续重复触发的回调函数。例如:
|
使用 `function` 类型则绑定值表示触发长按或后续重复触发的回调函数。例如:
|
||||||
|
|
||||||
@ -35,10 +35,10 @@
|
|||||||
|
|
||||||
| 参数 | 类型 | 默认值 | 描述 |
|
| 参数 | 类型 | 默认值 | 描述 |
|
||||||
| -- | -- | -- | -- |
|
| -- | -- | -- | -- |
|
||||||
| `timeout` | `number` | `longpress.timeout` | 触发长按等待的毫秒数。可进行[全局配置](#全局配置)。 |
|
| `timeout` | `number` | `longpress.timeout` | 触发长按等待的毫秒数。可进行[全局配置](#configs-longpress-timeout)。 |
|
||||||
| `handler` | `function` | `function() {}` | 触发长按及后续重复触发时的回调函数。 |
|
| `handler` | `function` | `function() {}` | 触发长按及后续重复触发时的回调函数。 |
|
||||||
| `repeat` | `boolean` | `false` | 保持长按时是否重复触发回调,类似按下键盘按键后连续自动输入的效果。 |
|
| `repeat` | `boolean` | `false` | 保持长按时是否重复触发回调,类似按下键盘按键后连续自动输入的效果。 |
|
||||||
| `repeatInterval` | `number` | `longpress.repeatInterval` | 重复触发回调间隔的毫秒数。可进行[全局配置](#全局配置)。 |
|
| `repeatInterval` | `number` | `longpress.repeatInterval` | 重复触发回调间隔的毫秒数。可进行[全局配置](#configs-longpress-repeatInterval)。 |
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
`Object` 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。
|
`Object` 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
### 绑定值
|
### 绑定值
|
||||||
|
|
||||||
类型:`function|Object`。
|
类型:`function | Object`。
|
||||||
|
|
||||||
使用 `function` 类型则绑定值表示按下方向键后触发的回调函数。例如:
|
使用 `function` 类型则绑定值表示按下方向键后触发的回调函数。例如:
|
||||||
|
|
||||||
@ -58,7 +58,7 @@
|
|||||||
|
|
||||||
### 修饰符
|
### 修饰符
|
||||||
|
|
||||||
对应 `Object` 类型绑定值中的 `axis`/`step`。例如:
|
对应 `Object` 类型绑定值中的 `axis` / `step`。例如:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div tabindex="-1" v-nudge.x.2="{ update: delta => this.val += delta }"></div>
|
<div tabindex="-1" v-nudge.x.2="{ update: delta => this.val += delta }"></div>
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user