docs: update docs
Change-Id: I76d0f72679cd75085f5ffd42f641daa198cafe11 docs: update docs for alert/autocomplete/carousel, etc. Change-Id: Ib7507f4979024f53c127e4b64b88560b93999db7 fix: update for autocomplete filter Change-Id: Ie54556715fa52838aeb6caaa19b4f9a9f14b490f docs: add docs for calendar/transfer/cascader Change-Id: I655b3cb3d25dd0649de9ae7e224e7063a40dd079 fix: add more demos for input/textarea Change-Id: Iada527ca82643a435a4775110b332155512d62a7 docs: add docs for uploader,select,table, etc. Change-Id: Ib034fd5cc9d9a420d4e002956ae925175783c5f3 docs: adjust formatting and punc. docs: adjust docs for uploader, etc. Change-Id: If06c8c1102eafce43f5802a333676fc9e62cd474 docs: add docs for nav Change-Id: If56a653ec53f19239606128fd30cae80f8e10025 docs: improve anchor demos Change-Id: I6ac1c08cc8905924d0062def1f8921fe1f302f15 docs: refine wording and format docs: update docs for check-button-group desc Change-Id: Ica7d6d0692250f0be6bd330b1ad4cc41938afd46
This commit is contained in:
Justineo
GU Yiling
parent
4a257c3680
commit
32632e796e
@ -14,6 +14,18 @@
|
||||
|
||||
[[ demo src="/demo/alert/multiple.vue" ]]
|
||||
|
||||
### 标题
|
||||
|
||||
设置 `title` 属性来指定消息标题。
|
||||
|
||||
[[ demo src="/demo/alert/title.vue" ]]
|
||||
|
||||
### 额外内容
|
||||
|
||||
通过 `extra` 插槽来指定消息之后的额外内容区域。
|
||||
|
||||
[[ demo src="/demo/alert/extra.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -2,9 +2,15 @@
|
||||
|
||||
## 示例
|
||||
|
||||
### 容器与吸附
|
||||
### 普通锚点
|
||||
|
||||
使用 [`container`](#props-container) 属性设置 `Anchor` 的容器，使用 [`sticky`](#props-sticky) 属性来控制是否在滚动出容器时进行吸附。
|
||||
使用 [`container`](#props-container) 属性设置发生滚动的容器，当 `Anchor` 组件不在容器中（也就不随容器滚动），此时可以不用设置 `sticky` 属性。
|
||||
|
||||
[[ demo src="/demo/anchor/normal.vue" ]]
|
||||
|
||||
### 吸附锚点
|
||||
|
||||
当 `Anchor` 组件在容器中（随容器滚动），此时可设置 `sticky` 属性来控制组件在滚动出容器时进行吸附。
|
||||
|
||||
[[ demo src="/demo/anchor/sticky.vue" ]]
|
||||
|
||||
|
||||
@ -2,8 +2,30 @@
|
||||
|
||||
## 示例
|
||||
|
||||
### 触发建议的时机
|
||||
|
||||
设置 `suggest-trigger` 来指定触发建议的时机。
|
||||
|
||||
[[ demo src="/demo/autocomplete/normal.vue" ]]
|
||||
|
||||
### 严格模式
|
||||
|
||||
设置 `strict` 属性来指定严格模式，若输入值没有完全匹配建议值，那么在失焦时会清空输入值。
|
||||
|
||||
[[ demo src="/demo/autocomplete/strict.vue" ]]
|
||||
|
||||
### 自定义搜索逻辑
|
||||
|
||||
设置 `match` 属性来自定义自定义高亮逻辑。
|
||||
|
||||
设置 `filter` 属性来自定义搜索命中逻辑。
|
||||
|
||||
:::tip
|
||||
`match` 用于高亮显示匹配文本的逻辑；而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点，且将包含非叶子节点。如希望搜索结果中都是叶子节点，可通过重写 `filter` 过滤掉非叶子节点。
|
||||
:::
|
||||
|
||||
[[ demo src="/demo/autocomplete/custom.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -12,7 +34,8 @@
|
||||
| -- | -- | -- | -- |
|
||||
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
|
||||
| ``value`` | `*` | - | [^prop-value] |
|
||||
| ``match`` | `function(string | Object, string): boolean=` | - | 自定义搜索逻辑。 |
|
||||
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
|
||||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
|
||||
| ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时，若输入值没有完全匹配建议值，那么会清空输入值。 |
|
||||
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
|
||||
| ``placeholder`` | `string=` | | 输入占位符。 |
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
|
||||
[[ demo src="/demo/badge/number.vue" ]]
|
||||
|
||||
### 右上角圆点徽标
|
||||
|
||||
不提供徽标内容时，徽标将以圆点样式显示在右上角。
|
||||
|
||||
[[ demo src="/demo/badge/corner-dot.vue" ]]
|
||||
|
||||
### 圆点徽标
|
||||
|
||||
不提供插槽内容时，徽标将以圆点样式显示。
|
||||
|
||||
@ -20,6 +20,30 @@
|
||||
|
||||
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
|
||||
|
||||
### 日历类型
|
||||
|
||||
设置 `type` 来指定日历的类型：年、月、日。
|
||||
|
||||
[[ demo src="/demo/calendar/type.vue" ]]
|
||||
|
||||
### 显示非本月日期
|
||||
|
||||
设置 `fill-month` 来控制是否显示非本月日期。
|
||||
|
||||
[[ demo src="/demo/calendar/fill-month.vue" ]]
|
||||
|
||||
### 禁用日期
|
||||
|
||||
设置 `disabled-date` 来自定义指定日期是否禁用。
|
||||
|
||||
[[ demo src="/demo/calendar/disabled-date.vue" ]]
|
||||
|
||||
### 自定义日期的样式
|
||||
|
||||
设置 `date-class` 来自定义指定日期的 `class`。
|
||||
|
||||
[[ demo src="/demo/calendar/date-class.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -42,6 +42,13 @@
|
||||
|
||||
[[ demo src="/demo/carousel/slides.vue" ]]
|
||||
|
||||
|
||||
### 轮播项纵横比
|
||||
|
||||
设置 `slide-aspect-ratio` 属性来指定每个轮播项的纵横比。
|
||||
|
||||
[[ demo src="/demo/carousel/ratio.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -27,6 +27,24 @@
|
||||
|
||||
[[ demo src="/demo/cascader/multiple.vue" ]]
|
||||
|
||||
### 选择模式
|
||||
|
||||
使用 `select-mode` 属性来控制在单选模式下哪些项目可以被选中。
|
||||
|
||||
[[ demo src="/demo/cascader/select-mode.vue" ]]
|
||||
|
||||
### 子项展开时机
|
||||
|
||||
使用 `column-trigger` 属性来控制下拉面板中下级的展开时机。
|
||||
|
||||
[[ demo src="/demo/cascader/column-trigger.vue" ]]
|
||||
|
||||
### 渲染选中值
|
||||
|
||||
使用 `value-display` 属性来控制选中值如何展示。
|
||||
|
||||
[[ demo src="/demo/cascader/value-display.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -52,6 +70,8 @@
|
||||
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
@ -8,12 +8,30 @@
|
||||
|
||||
[[ demo src="/demo/check-button-group/default.vue" ]]
|
||||
|
||||
### 简单样式
|
||||
|
||||
设置 `ui` 属性值：`simple` 来指定简单样式。
|
||||
|
||||
[[ demo src="/demo/check-button-group/simple.vue" ]]
|
||||
|
||||
### 单复选共存
|
||||
|
||||
可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。
|
||||
|
||||
[[ demo src="/demo/check-button-group/exclusive.vue" ]]
|
||||
|
||||
### 额外描述
|
||||
|
||||
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。
|
||||
|
||||
[[ demo src="/demo/check-button-group/desc.vue" ]]
|
||||
|
||||
### 最小宽度
|
||||
|
||||
通过设置 `ui` 属性值 `stable` 来开启项目的最小宽度。
|
||||
|
||||
[[ demo src="/demo/check-button-group/stable.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -38,7 +56,7 @@
|
||||
^^^
|
||||
|
||||
^^^items
|
||||
复选按钮组数据源，项目类型为 `{label, value, disabled, exclusive, ...}`。
|
||||
复选按钮组数据源，项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
@ -47,6 +65,7 @@
|
||||
| `value` | `*` | 选项对应的值。 |
|
||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||
| `exclusive` | `boolean=` | 选项是否为排它项。当选项为排它项时，选中该项将取消选中其它所有选项。 |
|
||||
| `desc` | `string` | 选项的额外描述信息。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -63,6 +82,7 @@
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``item`` | [^slot-item] |
|
||||
| ``desc`` | 按钮的额外描述信息，作用域参数同 `item` 插槽。 |
|
||||
|
||||
^^^slot-item
|
||||
按钮内文本区域。
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
|
||||
[[ demo src="/demo/checkbox-group/exclusive.vue" ]]
|
||||
|
||||
### 额外描述
|
||||
|
||||
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。
|
||||
|
||||
[[ demo src="/demo/checkbox-group/desc.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -38,7 +44,7 @@
|
||||
^^^
|
||||
|
||||
^^^items
|
||||
复选框组数据源，项目类型为 `{label, value, disabled, exclusive, ...}`。
|
||||
复选框组数据源，项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
@ -47,6 +53,7 @@
|
||||
| `value` | `*` | 选项对应的值。 |
|
||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||
| `exclusive` | `boolean=` | 选项是否为排它项。 |
|
||||
| `desc` | `string` | 选项的额外描述信息。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -63,6 +70,7 @@
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``item`` | [^slot-item] |
|
||||
| ``desc`` | 按钮的额外描述信息，作用域参数同 `item` 插槽。 |
|
||||
|
||||
^^^slot-item
|
||||
选项描述文本区域。
|
||||
|
||||
@ -20,6 +20,14 @@
|
||||
|
||||
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
|
||||
|
||||
### 禁用和只读
|
||||
|
||||
设置 `disabled` 属性可使组件处于禁用状态。
|
||||
|
||||
设置 `readonly` 属性可使组件处于只读状态。
|
||||
|
||||
[[ demo src="/demo/date-picker/disabled.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -57,6 +57,8 @@
|
||||
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
@ -20,6 +20,18 @@
|
||||
|
||||
[[ demo src="/demo/input/disabled.vue" ]]
|
||||
|
||||
### 感知输入法
|
||||
|
||||
设置 `composition` 来感知输入法输入过程中的值。
|
||||
|
||||
[[ demo src="/demo/input/composition.vue" ]]
|
||||
|
||||
### 过滤首尾空白字符
|
||||
|
||||
设置 `trim` 来自动过滤用户输入的首尾空白字符。
|
||||
|
||||
[[ demo src="/demo/input/trim.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
119
one/docs/components/nav.md
Normal file
119
one/docs/components/nav.md
Normal file
@ -0,0 +1,119 @@
|
||||
# Nav <small>导航菜单</small>
|
||||
|
||||
## 示例
|
||||
|
||||
### 尺寸
|
||||
|
||||
可选的尺寸 `ui` 属性值：`s`/`m`。
|
||||
|
||||
[[ demo src="/demo/nav/size.vue" ]]
|
||||
|
||||
### 大卡样式
|
||||
|
||||
设置首层数据项属性 `position` 为 `card` 可使该数据项下拉展示成大卡样式。
|
||||
|
||||
[[ demo src="/demo/nav/card.vue" ]]
|
||||
|
||||
### 自定义插槽
|
||||
|
||||
[[ demo src="/demo/nav/slot.vue" ]]
|
||||
|
||||
|
||||
### 自适应宽度
|
||||
|
||||
自动根据实际渲染宽度来决定是否将多余的导航项目折叠起来。
|
||||
|
||||
[[ demo src="/demo/nav/more.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| `ui` | `string=` | - | [^ui] |
|
||||
| `items` | `Array<Object>=` | `[]` | [^items] |
|
||||
| `active` | `string` | - | [^active] |
|
||||
| `matches` | `function(Object, string): boolean` | - | [^matches] |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `s` | 小尺寸样式。 |
|
||||
| `m` | 中尺寸样式。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^active
|
||||
当前激活节点，若该节点定义了 `name` 则就是该 `name` 值，否则该值是由 `to` 生成的路由路径（[route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7)）。
|
||||
^^^
|
||||
|
||||
^^^items
|
||||
数据源数组，每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `label` | `string` | 节点的文字描述。 |
|
||||
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
|
||||
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
|
||||
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
||||
| `position` | `string=` | 首层节点的下拉面板样式，设置成 `card` 则展示成大卡样式。 |
|
||||
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^matches
|
||||
当路由发生切换时，用来从 `items` 中找到激活的项目。
|
||||
|
||||
默认实现：项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
|
||||
^^^
|
||||
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `item` | [^item] |
|
||||
| `item-label` | [^item-label] |
|
||||
|
||||
|
||||
^^^item
|
||||
每个节点的渲染插槽。
|
||||
|
||||
默认内容：渲染了 `icon` 插槽和 `item-label` 插槽。
|
||||
|
||||
+++作用域参数
|
||||
| 名称 | 类型 | 描述 |
|
||||
| -- | -- | -- |
|
||||
| `label` | `string` | 图标名称。 |
|
||||
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
|
||||
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
|
||||
| `disabled` | `boolean=` | 节点是否被禁用。 |
|
||||
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^item-label
|
||||
节点的 `label` 插槽。
|
||||
|
||||
默认内容：渲染节点对应的 `Link`。
|
||||
|
||||
作用域参数参考 `item` 插槽。
|
||||
^^^
|
||||
|
||||
### 事件
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `activate` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
|
||||
| `click` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
|
||||
|
||||
### 图标
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| `expand` | 展开。 |
|
||||
| `more` | 更多。 |
|
||||
@ -20,6 +20,14 @@
|
||||
|
||||
[[ demo src="/demo/number-input/disabled.vue" ]]
|
||||
|
||||
### 精度位数和递增/递减
|
||||
|
||||
设置 `decimal-place` 来指定数值的小数精度位数。
|
||||
|
||||
设置 `step` 来指定每次递增/减的数值。
|
||||
|
||||
[[ demo src="/demo/number-input/decimal.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -35,6 +43,7 @@
|
||||
| ``max`` | `number` | - | 允许的最大值。 |
|
||||
| ``min`` | `number` | - | 允许的最小值。 |
|
||||
| ``decimal-place`` | `number` | 0 | 数值的小数精度位数，默认精确到整数位，`-1` 表示不处理精度。 |
|
||||
| ``step`` | `number` | 1 | 每次递增/递减的数值。 |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
@ -12,6 +12,15 @@
|
||||
|
||||
[[ demo src="/demo/pagination/goto.vue" ]]
|
||||
|
||||
|
||||
### 每页个数
|
||||
|
||||
使用 `page-size` 属性来指定当前每页的个数。
|
||||
|
||||
使用 `page-sizes` 属性来指定每页个数候选项。
|
||||
|
||||
[[ demo src="/demo/pagination/pages.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -8,6 +8,24 @@
|
||||
|
||||
[[ demo src="/demo/radio-button-group/default.vue" ]]
|
||||
|
||||
### 简单样式
|
||||
|
||||
设置 `ui` 属性值：`simple` 来指定简单样式。
|
||||
|
||||
[[ demo src="/demo/radio-button-group/simple.vue" ]]
|
||||
|
||||
### 额外描述
|
||||
|
||||
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。
|
||||
|
||||
[[ demo src="/demo/radio-button-group/desc.vue" ]]
|
||||
|
||||
### 最小宽度
|
||||
|
||||
设置 `ui` 属性值：`simple` 来指定简单样式。
|
||||
|
||||
[[ demo src="/demo/radio-button-group/stable.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -31,7 +49,7 @@
|
||||
^^^
|
||||
|
||||
^^^items
|
||||
单选按钮组数据源，项目类型为 `{label, value, disabled, ...}`。
|
||||
单选按钮组数据源，项目类型为 `{ label, value, disabled, desc, ... }`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
@ -39,6 +57,7 @@
|
||||
| `label` | `string` | 选项的文字说明。 |
|
||||
| `value` | `*` | 选项对应的值。 |
|
||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||
| `desc` | `string` | 选项的额外描述信息。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -55,6 +74,7 @@
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``item`` | [^slot-item] |
|
||||
| ``desc`` | 按钮的额外描述信息，作用域参数同 `item` 插槽。 |
|
||||
|
||||
^^^slot-item
|
||||
按钮内文本区域。
|
||||
@ -68,6 +88,7 @@
|
||||
| `value` | `string` | 选项值。 |
|
||||
| `index` | `number` | 选项在 `items` 中的序号。 |
|
||||
| `disabled` | `boolean=` | 选项是否禁用。 |
|
||||
| `desc` | `string` | 选项的额外描述信息。 |
|
||||
+++
|
||||
|
||||
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
|
||||
|
||||
@ -8,6 +8,12 @@
|
||||
|
||||
[[ demo src="/demo/radio-group/default.vue" ]]
|
||||
|
||||
### 额外描述
|
||||
|
||||
在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。
|
||||
|
||||
[[ demo src="/demo/radio-group/desc.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -31,7 +37,7 @@
|
||||
^^^
|
||||
|
||||
^^^items
|
||||
单选框组数据源，项目类型为 `{label, value, disabled, ...}`。
|
||||
单选框组数据源，项目类型为 `{ label, value, disabled, desc, ... }`。
|
||||
|
||||
+++字段详情
|
||||
| 名称 | 类型 | 描述 |
|
||||
@ -39,6 +45,7 @@
|
||||
| `label` | `string` | 选项的文字说明。 |
|
||||
| `value` | `*` | 选项对应的值。 |
|
||||
| `disabled` | `boolean=` | 选项是否为禁用。 |
|
||||
| `desc` | `string` | 选项的额外描述信息。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@ -55,6 +62,7 @@
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``item`` | [^slot-item] |
|
||||
| ``desc`` | 按钮的额外描述信息，作用域参数同 `item` 插槽。 |
|
||||
|
||||
^^^slot-item
|
||||
选项描述文本区域。
|
||||
|
||||
@ -41,6 +41,8 @@
|
||||
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
|
||||
^^^ui
|
||||
按钮预设样式。
|
||||
|
||||
@ -30,6 +30,15 @@
|
||||
|
||||
[[ demo src="/demo/select/multiple.vue" ]]
|
||||
|
||||
|
||||
### 自定义已选项展示
|
||||
|
||||
使用 `label` 插槽来自定义**下拉关闭时**已选项如何展示。
|
||||
|
||||
使用 `select` 插槽来自定义已选项如何展示，和下拉是否关闭无关。
|
||||
|
||||
[[ demo src="/demo/select/selected.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -50,6 +59,8 @@
|
||||
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
|
||||
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
|
||||
@ -48,6 +48,22 @@
|
||||
|
||||
[[ demo src="/demo/table/desc.vue" ]]
|
||||
|
||||
### 排序
|
||||
|
||||
使用 `order` 属性和 `order-by` 属性来指定表头上的排序状态。
|
||||
|
||||
监听 `sort` 事件来处理排序状态的变化。
|
||||
|
||||
设置 `allowed-orders` 属性来自定义允许的排序状态。
|
||||
|
||||
[[ demo src="/demo/table/order.vue" ]]
|
||||
|
||||
### 加载状态
|
||||
|
||||
使用 `loading` 属性来指定表格处于加载状态。
|
||||
|
||||
[[ demo src="/demo/table/loading.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -20,6 +20,12 @@
|
||||
|
||||
[[ demo src="/demo/textarea/disabled.vue" ]]
|
||||
|
||||
### 自动扩展
|
||||
|
||||
设置 `autoresize` 来使文本域处于自动扩展状态。
|
||||
|
||||
[[ demo src="/demo/textarea/autoresize.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -20,6 +20,12 @@
|
||||
|
||||
[[ demo src="/demo/transfer/flat.vue" ]]
|
||||
|
||||
### 选中值的合并模式
|
||||
|
||||
设置 `merge-checked` 来指定选中值的合并模式。
|
||||
|
||||
[[ demo src="/demo/transfer/merge-checked.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
@ -32,6 +32,25 @@
|
||||
|
||||
[[ demo src="/demo/uploader/custom.vue" ]]
|
||||
|
||||
### 拖拽排序
|
||||
|
||||
设置 `sortable` 属性来指定上传项目之间可以拖拽排序。
|
||||
|
||||
[[ demo src="/demo/uploader/sortable.vue" ]]
|
||||
|
||||
### 已上传项自定义操作
|
||||
|
||||
设置 `controls` 属性来指定悬浮到每个上传项时的操作选项。
|
||||
|
||||
[[ demo src="/demo/uploader/controls.vue" ]]
|
||||
|
||||
### 上传入口自定义操作
|
||||
|
||||
设置 `entries` 属性来指定悬浮到继续上传项目时的操作选项。
|
||||
|
||||
[[ demo src="/demo/uploader/entries.vue" ]]
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
33
one/docs/demo/alert/extra.vue
Normal file
33
one/docs/demo/alert/extra.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
ui="strong"
|
||||
message="恭喜你，你的请求已成功处理"
|
||||
closable
|
||||
>
|
||||
<template slot="title">恭喜你</template>
|
||||
<template slot="extra">
|
||||
<veui-button ui="text">查看详情</veui-button>
|
||||
</template>
|
||||
恭喜你，你的请求已成功处理
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert,
|
||||
'veui-button': Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
36
one/docs/demo/alert/title.vue
Normal file
36
one/docs/demo/alert/title.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-alert
|
||||
type="success"
|
||||
title="消息标题"
|
||||
>
|
||||
Your profile has been updated.
|
||||
</veui-alert>
|
||||
<veui-alert
|
||||
type="success"
|
||||
>
|
||||
Your profile has been updated.
|
||||
<template slot="title">消息标题</template>
|
||||
</veui-alert>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Alert } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-alert': Alert
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
.veui-alert {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
可将消息标题写在 `title` 插槽中，也可以通过 `title` 属性进行指定。
|
||||
</docs>
|
||||
109
one/docs/demo/anchor/normal.vue
Normal file
109
one/docs/demo/anchor/normal.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<article class="anchor-offset-demo">
|
||||
<div
|
||||
ref="container"
|
||||
class="anchor-wrapper"
|
||||
>
|
||||
<div
|
||||
v-for="i in coffees"
|
||||
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
|
||||
:key="i.value"
|
||||
class="block"
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
</div>
|
||||
<section class="anchor-two">
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-anchor': Anchor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
value: '/components/breadcrumb'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
value: '/components/button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.anchor-offset-demo {
|
||||
position: relative;
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
border: 1px dashed;
|
||||
|
||||
& > section {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
|
||||
& + .block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused2',
|
||||
value: '#infused1',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled2',
|
||||
value: '#boiled1',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
@ -59,11 +59,11 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso2'
|
||||
value: '#espresso1'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee2'
|
||||
value: '#milk-coffee1'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
border-top: 1px solid red;
|
||||
|
||||
&::after {
|
||||
content: "targetOffset: 20px";
|
||||
content: "targetOffset（切换于此）";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
left: 250px;
|
||||
|
||||
&::after {
|
||||
content: "stickyOffset: 30px";
|
||||
content: "stickyOffset（吸附于此）";
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
@ -136,5 +136,9 @@ export default {
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
虚线框标记容器，黑实线标记锚点项顶部。
|
||||
|
||||
当黑实线和 `tagetOffset` 线重合触发激活。
|
||||
|
||||
`Anchor` 吸附在 `stickyOffset` 线处。
|
||||
</docs>
|
||||
|
||||
@ -13,17 +13,7 @@
|
||||
>
|
||||
{{ i.label }}
|
||||
</div>
|
||||
|
||||
<section class="anchor-one">
|
||||
<h3>普通锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
:sticky="false"
|
||||
container="container"
|
||||
/>
|
||||
</section>
|
||||
<section class="anchor-two">
|
||||
<h3>吸附锚点</h3>
|
||||
<veui-anchor
|
||||
:items="coffees"
|
||||
container="container"
|
||||
@ -45,7 +35,7 @@ export default {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: '#infused',
|
||||
value: '#infused2',
|
||||
children: [
|
||||
{
|
||||
label: 'Breadcrumb',
|
||||
@ -55,7 +45,7 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: '#boiled',
|
||||
value: '#boiled2',
|
||||
children: [
|
||||
{
|
||||
label: 'Button',
|
||||
@ -65,11 +55,11 @@ export default {
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: '#espresso'
|
||||
value: '#espresso2'
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: '#milk-coffee'
|
||||
value: '#milk-coffee2'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -81,22 +71,6 @@ export default {
|
||||
.anchor-demo {
|
||||
position: relative;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 180px;
|
||||
border-top: 1px solid red;;
|
||||
|
||||
&::after {
|
||||
content: "0";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -112,7 +86,7 @@ export default {
|
||||
|
||||
.block {
|
||||
white-space: nowrap;
|
||||
border-top: 1px solid #ccc;
|
||||
border-top: 1px solid #000;
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
flex: none;
|
||||
@ -130,7 +104,7 @@ export default {
|
||||
|
||||
.anchor-two {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
left: 250px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
@ -138,5 +112,5 @@ export default {
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
虚线框标记容器。
|
||||
虚线框标记容器，实线标记锚点项顶部，当二者重合触发激活。
|
||||
</docs>
|
||||
|
||||
72
one/docs/demo/autocomplete/custom.vue
Normal file
72
one/docs/demo/autocomplete/custom.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<h3>大小写敏感搜索叶子节点</h3>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
:match="match"
|
||||
:filter="filter"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
options: [
|
||||
{
|
||||
value: 'Moka'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
match ({ label }, keyword) {
|
||||
const index = label.indexOf(keyword)
|
||||
return index >= 0
|
||||
? [[index, index + keyword.length]]
|
||||
: false
|
||||
},
|
||||
filter ({ options }, _, { offsets }) {
|
||||
// 不要父节点，只要叶子节点
|
||||
return options && options.length
|
||||
? false
|
||||
: offsets === true || (!!offsets && !!offsets.length)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -106,6 +106,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
50
one/docs/demo/autocomplete/strict.vue
Normal file
50
one/docs/demo/autocomplete/strict.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article class="autocomplete-normal-demo">
|
||||
<section>
|
||||
<veui-autocomplete
|
||||
:datasource="suggestions"
|
||||
placeholder="请输入"
|
||||
suggest-trigger="focus"
|
||||
strict
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Autocomplete } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-autocomplete': Autocomplete
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
suggestions: [
|
||||
{
|
||||
value: 'Moka'
|
||||
},
|
||||
{
|
||||
value: 'Turkish'
|
||||
},
|
||||
{
|
||||
value: 'latte'
|
||||
},
|
||||
{
|
||||
value: 'cappuccino'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.autocomplete-normal-demo {
|
||||
display: flex;
|
||||
|
||||
section + section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
one/docs/demo/badge/corner-dot.vue
Normal file
43
one/docs/demo/badge/corner-dot.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-badge type="success">
|
||||
Running
|
||||
</veui-badge>
|
||||
<veui-badge type="info">
|
||||
New
|
||||
</veui-badge>
|
||||
<veui-badge>
|
||||
Rejected
|
||||
</veui-badge>
|
||||
<veui-badge type="warning">
|
||||
Auditing
|
||||
</veui-badge>
|
||||
<veui-badge type="aux">
|
||||
Expired
|
||||
</veui-badge>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-badge': Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.veui-badge {
|
||||
& + & {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
25
one/docs/demo/calendar/date-class.vue
Normal file
25
one/docs/demo/calendar/date-class.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-calendar
|
||||
date-class="custom-date"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.custom-date {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
27
one/docs/demo/calendar/disabled-date.vue
Normal file
27
one/docs/demo/calendar/disabled-date.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>只允许选未来的日期</h4>
|
||||
<veui-calendar :disabled-date="disabledDate"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar
|
||||
},
|
||||
created () {
|
||||
this.now = new Date()
|
||||
this.now.setHours(0, 0, 0, 0)
|
||||
},
|
||||
methods: {
|
||||
disabledDate (date) {
|
||||
return this.now.getTime() > date.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
one/docs/demo/calendar/fill-month.vue
Normal file
31
one/docs/demo/calendar/fill-month.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<article>
|
||||
<p>
|
||||
fill-month: <veui-switch v-model="isFill"/>
|
||||
</p>
|
||||
<veui-calendar :fill-month="isFill"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
isFill: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
37
one/docs/demo/calendar/type.vue
Normal file
37
one/docs/demo/calendar/type.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-radio-group
|
||||
v-model="type"
|
||||
:items="types"
|
||||
/>
|
||||
<veui-calendar :type="type"/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Calendar, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-calendar': Calendar,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date(),
|
||||
type: 'date',
|
||||
types: [
|
||||
{ label: 'date', value: 'date' },
|
||||
{ label: 'month', value: 'month' },
|
||||
{ label: 'year', value: 'year' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
v-model="indicatorPosition"
|
||||
:items="positions"
|
||||
/>
|
||||
<h4>Indicator alignment</h4>
|
||||
<h4>Indicator align</h4>
|
||||
<veui-radio-group
|
||||
v-model="align"
|
||||
:items="alignments"
|
||||
@ -31,8 +31,6 @@
|
||||
<script>
|
||||
import { Carousel, RadioGroup } from 'veui'
|
||||
|
||||
// TODO update alignment
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel,
|
||||
|
||||
57
one/docs/demo/carousel/ratio.vue
Normal file
57
one/docs/demo/carousel/ratio.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>按 `2/1` 比例展示轮播项</h4>
|
||||
<veui-carousel
|
||||
:datasource="items"
|
||||
effect="slide"
|
||||
indicator-align="end"
|
||||
slide-aspect-ratio="2/1"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Carousel } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-carousel': Carousel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
|
||||
alt: 'A cute kitty looking at you with its greenish eyes.',
|
||||
label: 'Cat'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
|
||||
alt: 'A common kingfisher flying above river.',
|
||||
label: 'Kingfisher'
|
||||
},
|
||||
{
|
||||
src:
|
||||
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
|
||||
alt: 'A white and gray dolphin in blue water.',
|
||||
label: 'Dolphin'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/column-trigger.vue
Normal file
144
one/docs/demo/cascader/column-trigger.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="trigger"
|
||||
:items="triggers"
|
||||
/>
|
||||
<veui-cascader
|
||||
:column-trigger="trigger"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trigger: 'click',
|
||||
triggers: [
|
||||
{ label: 'click', value: 'click' },
|
||||
{ label: 'hover', value: 'hover' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/select-mode.vue
Normal file
144
one/docs/demo/cascader/select-mode.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="selectMode"
|
||||
:items="selectModes"
|
||||
/>
|
||||
<veui-cascader
|
||||
:select-mode="selectMode"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectMode: 'any',
|
||||
selectModes: [
|
||||
{ label: 'any', value: 'any' },
|
||||
{ label: 'leaf-only', value: 'leaf-only' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
144
one/docs/demo/cascader/value-display.vue
Normal file
144
one/docs/demo/cascader/value-display.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="valueDisplay"
|
||||
:items="valueDisplays"
|
||||
/>
|
||||
<veui-cascader
|
||||
:value-display="valueDisplay"
|
||||
:options="options"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cascader, RadioGroup } from 'veui'
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: '浙江',
|
||||
value: '浙江',
|
||||
options: [
|
||||
{
|
||||
label: '威海',
|
||||
value: '威海'
|
||||
},
|
||||
{
|
||||
label: '滨州',
|
||||
value: '滨州'
|
||||
},
|
||||
{
|
||||
label: '临沂',
|
||||
value: '临沂'
|
||||
},
|
||||
{
|
||||
label: '东营',
|
||||
value: '东营'
|
||||
},
|
||||
{
|
||||
label: '济南',
|
||||
value: '济南'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '山东',
|
||||
value: '山东',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽',
|
||||
value: '菏泽',
|
||||
options: [
|
||||
{
|
||||
label: '菏泽1',
|
||||
value: '菏泽1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '潍坊',
|
||||
value: '潍坊',
|
||||
options: [
|
||||
{
|
||||
label: '潍坊1',
|
||||
value: '潍坊1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '泰山',
|
||||
value: '泰山'
|
||||
},
|
||||
{
|
||||
label: '烟台',
|
||||
value: '烟台'
|
||||
},
|
||||
{
|
||||
label: '华山',
|
||||
value: '华山'
|
||||
},
|
||||
{
|
||||
label: '衡山',
|
||||
value: '衡山'
|
||||
},
|
||||
{
|
||||
label: '嵩山',
|
||||
value: '嵩山'
|
||||
},
|
||||
{
|
||||
label: '恒山',
|
||||
value: '恒山'
|
||||
},
|
||||
{
|
||||
label: '大雪山',
|
||||
value: '大雪山'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
value: '海外',
|
||||
disabled: true,
|
||||
options: [
|
||||
{
|
||||
label: '日本',
|
||||
value: '日本'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-cascader': Cascader,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
valueDisplay: 'simple',
|
||||
valueDisplays: [
|
||||
{ label: 'simple', value: 'simple' },
|
||||
{ label: 'complete', value: 'complete' }
|
||||
],
|
||||
options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/check-button-group/desc.vue
Normal file
50
one/docs/demo/check-button-group/desc.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-check-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
60
one/docs/demo/check-button-group/simple.vue
Normal file
60
one/docs/demo/check-button-group/simple.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-check-button-group
|
||||
v-model="selected"
|
||||
ui="simple"
|
||||
:items="sizes"
|
||||
/>
|
||||
<p>Checked: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: ['any'],
|
||||
sizes: [
|
||||
{
|
||||
label: 'Any',
|
||||
value: 'any'
|
||||
},
|
||||
{
|
||||
label: 'Small',
|
||||
value: 'sm'
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'md'
|
||||
},
|
||||
{
|
||||
label: 'Large',
|
||||
value: 'lg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readable () {
|
||||
return (this.selected || []).join(', ') || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
46
one/docs/demo/check-button-group/stable.vue
Normal file
46
one/docs/demo/check-button-group/stable.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
最小宽度：<veui-switch v-model="isStable"/>
|
||||
</p>
|
||||
<veui-check-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
:ui="isStable ? 'stable' : ''"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckButtonGroup, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-check-button-group': CheckButtonGroup,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isStable: true,
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/checkbox-group/desc.vue
Normal file
50
one/docs/demo/checkbox-group/desc.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-checkbox-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-checkbox-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckboxGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox-group': CheckboxGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
45
one/docs/demo/date-picker/disabled.vue
Normal file
45
one/docs/demo/date-picker/disabled.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Disabled</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
disabled
|
||||
placeholder="disabled"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Readonly</h4>
|
||||
<veui-date-picker
|
||||
v-model="date"
|
||||
readonly
|
||||
placeholder="readonly"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DatePicker } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-date-picker': DatePicker
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
date: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
31
one/docs/demo/input/composition.vue
Normal file
31
one/docs/demo/input/composition.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
composition: <veui-switch v-model="composition"/>
|
||||
</p>
|
||||
<p>Input value: {{ value }}</p>
|
||||
<veui-input
|
||||
v-model="value"
|
||||
:composition="composition"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
composition: true,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
one/docs/demo/input/trim.vue
Normal file
33
one/docs/demo/input/trim.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p class="respect-whitespace">Input value: `{{ value }}`</p>
|
||||
<veui-input
|
||||
v-model="value"
|
||||
trim
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Input } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
composition: true,
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.respect-whitespace {
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
87
one/docs/demo/nav/card.vue
Normal file
87
one/docs/demo/nav/card.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav :items="items"/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
position: 'card',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
one/docs/demo/nav/more.vue
Normal file
95
one/docs/demo/nav/more.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
class="more-nav-items"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.more-nav-items {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
95
one/docs/demo/nav/size.vue
Normal file
95
one/docs/demo/nav/size.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
ui="s"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-nav
|
||||
ui="m"
|
||||
:items="items"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/components/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/components/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
one/docs/demo/nav/slot.vue
Normal file
92
one/docs/demo/nav/slot.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-nav
|
||||
:items="items"
|
||||
>
|
||||
<template #item-label="{ label }">
|
||||
<i>{{ label }}</i>
|
||||
</template>
|
||||
</veui-nav>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Nav } from 'veui'
|
||||
|
||||
export default {
|
||||
name: 'veui-nav-demo',
|
||||
components: {
|
||||
'veui-nav': Nav
|
||||
},
|
||||
data () {
|
||||
let items = [
|
||||
{
|
||||
label: 'Group One',
|
||||
name: 'group-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Sub One',
|
||||
name: 'sub-one',
|
||||
children: [
|
||||
{
|
||||
label: 'Input',
|
||||
to: '/components/input'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Loading',
|
||||
name: 'Loading',
|
||||
to: '/components/loading',
|
||||
children: [
|
||||
{
|
||||
label: 'Switch',
|
||||
to: '/switch'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Button',
|
||||
name: 'Button',
|
||||
to: '/components/button',
|
||||
children: [
|
||||
{
|
||||
label: 'Disabled',
|
||||
name: 'Disabled',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Link',
|
||||
name: 'Link',
|
||||
to: '/link'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Navigation Three',
|
||||
name: 'nav-three',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: 'Navigation Four',
|
||||
name: 'nav-four',
|
||||
children: [
|
||||
{
|
||||
label: 'Progress',
|
||||
to: '/components/progress'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
return {
|
||||
items
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
one/docs/demo/number-input/decimal.vue
Normal file
28
one/docs/demo/number-input/decimal.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>精确2位小数,递增0.01</h4>
|
||||
<veui-number-input
|
||||
:decimal-place="2"
|
||||
:step="0.01"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>精确2位小数,递增0.1</h4>
|
||||
<veui-number-input
|
||||
:decimal-place="2"
|
||||
:step="0.1"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NumberInput } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-number-input': NumberInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
one/docs/demo/pagination/pages.vue
Normal file
55
one/docs/demo/pagination/pages.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-pagination
|
||||
:page="page"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
:total="total"
|
||||
:to="to"
|
||||
@pagesizechange="handlePageSizeChange"
|
||||
/>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-pagination': Pagination
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
to: './pagination?page=:page',
|
||||
total: 10101,
|
||||
pageSize: 20,
|
||||
pageSizes: [20, 30, 50, 100]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
page () {
|
||||
return Number(this.$route.query.page) || 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePageSizeChange (size) {
|
||||
this.pageSize = size
|
||||
if (this.page !== 1) {
|
||||
this.$router.push({
|
||||
path: './pagination?page=1'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
article {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.veui-pagination {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@
|
||||
<veui-number-input
|
||||
v-model="value"
|
||||
:min="0"
|
||||
:decimal-place="1"
|
||||
:max="100"
|
||||
/>
|
||||
</section>
|
||||
@ -59,7 +60,7 @@ export default {
|
||||
type: 'bar',
|
||||
value: 66.6,
|
||||
desc: true,
|
||||
autoSucceed: true,
|
||||
autoSucceed: 200,
|
||||
indeterminate: false
|
||||
}
|
||||
}
|
||||
|
||||
50
one/docs/demo/radio-button-group/desc.vue
Normal file
50
one/docs/demo/radio-button-group/desc.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-radio-button-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
53
one/docs/demo/radio-button-group/simple.vue
Normal file
53
one/docs/demo/radio-button-group/simple.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
ui="simple"
|
||||
:items="flavors"
|
||||
/>
|
||||
<p>Selected: {{ readable }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
flavorLabelMap () {
|
||||
return this.flavors.reduce((map, { value, label }) => {
|
||||
map[value] = label
|
||||
return map
|
||||
}, {})
|
||||
},
|
||||
readable () {
|
||||
return this.flavorLabelMap[this.flavor] || '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
46
one/docs/demo/radio-button-group/stable.vue
Normal file
46
one/docs/demo/radio-button-group/stable.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
最小宽度：<veui-switch v-model="isStable"/>
|
||||
</p>
|
||||
<veui-radio-button-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
:ui="isStable ? 'stable' : ''"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioButtonGroup, Switch } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isStable: true,
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte' },
|
||||
{ value: 'MOCHA', label: 'Mocha' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
50
one/docs/demo/radio-group/desc.vue
Normal file
50
one/docs/demo/radio-group/desc.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="flavor"
|
||||
:items="flavors"
|
||||
>
|
||||
<template #desc="{ desc, label }">
|
||||
{{ desc || `a description for ${label}` }}
|
||||
</template>
|
||||
</veui-radio-group>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
flavor: null,
|
||||
flavors: [
|
||||
{ value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
|
||||
{ value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
|
||||
{ value: 'AMERICANO', label: 'Americano' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
81
one/docs/demo/select/selected.vue
Normal file
81
one/docs/demo/select/selected.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>下拉关闭时省略显示已选项</h4>
|
||||
<veui-select
|
||||
v-model="license"
|
||||
multiple
|
||||
:options="options"
|
||||
>
|
||||
<template
|
||||
#label="{ selected }"
|
||||
>{{ selected[0].label }}等{{ selected.length }}个{{ ' ' }}</template>
|
||||
</veui-select>
|
||||
</section>
|
||||
<section>
|
||||
<h4>始终省略显示已选项</h4>
|
||||
<veui-select
|
||||
v-model="license"
|
||||
multiple
|
||||
:options="options"
|
||||
>
|
||||
<template
|
||||
#selected="{ selected }"
|
||||
>{{ selected[0].label
|
||||
}}{{ selected.length > 1 ? `等${selected.length}个` : '' }}</template>
|
||||
</veui-select>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-select': Select
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchable: false,
|
||||
license: null,
|
||||
options: [
|
||||
{
|
||||
label: 'MIT',
|
||||
value: 'mit'
|
||||
},
|
||||
{
|
||||
label: 'BSD',
|
||||
value: 'bsd'
|
||||
},
|
||||
{
|
||||
label: 'Apache 2.0',
|
||||
value: 'apache2'
|
||||
},
|
||||
{
|
||||
label: 'GPL 3.0',
|
||||
value: 'gpl3'
|
||||
},
|
||||
{
|
||||
label: 'AGPL 3.0',
|
||||
value: 'agpl3'
|
||||
},
|
||||
{
|
||||
label: 'LGPL 2.1',
|
||||
value: 'lgpl2'
|
||||
},
|
||||
{
|
||||
label: 'MPL 2.0',
|
||||
value: 'mpl2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
</style>
|
||||
@ -25,7 +25,7 @@
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
:filter-value="filtered"
|
||||
:filter-value="filtered || null"
|
||||
>
|
||||
<template #default="{ bid }">
|
||||
{{ bid | currency }}
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
}
|
||||
],
|
||||
crowded: false,
|
||||
filtered: false
|
||||
filtered: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
93
one/docs/demo/table/loading.vue
Normal file
93
one/docs/demo/table/loading.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>loading：<veui-switch v-model="loading"/></p>
|
||||
<veui-table
|
||||
:data="data"
|
||||
:loading="loading"
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
sortable
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Switch } from 'veui'
|
||||
|
||||
let data = [
|
||||
{
|
||||
id: '31552',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '31541',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '31563',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '31574',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
loading: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
132
one/docs/demo/table/order.vue
Normal file
132
one/docs/demo/table/order.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<p>
|
||||
允许不排序：<veui-switch
|
||||
v-model="allowFalse"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</p>
|
||||
<veui-table
|
||||
:data="sorted"
|
||||
key-field="id"
|
||||
:order="order"
|
||||
:order-by="orderBy"
|
||||
:allowed-orders="allowedOrders"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
sortable
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
sortable
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Switch } from 'veui'
|
||||
|
||||
let data = [
|
||||
{
|
||||
id: '31552',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '31541',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '31563',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '31574',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
|
||||
let allowedOrders = [false, 'desc', 'asc']
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-switch': Switch
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
order: 'asc',
|
||||
orderBy: 'id',
|
||||
allowFalse: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sorted () {
|
||||
let result = data.slice(0)
|
||||
if (this.order) {
|
||||
const sign = this.order === 'desc' ? -1 : 1
|
||||
result.sort((a, b) => {
|
||||
return sign * (+a[this.orderBy] - +b[this.orderBy])
|
||||
})
|
||||
}
|
||||
return result
|
||||
},
|
||||
allowedOrders () {
|
||||
let result = allowedOrders.slice(0)
|
||||
return this.allowFalse ? result : result.filter(item => item)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSort (field, order) {
|
||||
this.order = order
|
||||
this.orderBy = field
|
||||
},
|
||||
handleChange (val) {
|
||||
// 不允许不排序时，当前却是不排序，随便改下
|
||||
if (!val && !this.order) {
|
||||
this.order = 'desc'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
26
one/docs/demo/textarea/autoresize.vue
Normal file
26
one/docs/demo/textarea/autoresize.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<article>
|
||||
<div>
|
||||
<veui-textarea
|
||||
v-model="value"
|
||||
autoresize
|
||||
line-number
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Textarea } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-textarea': Textarea
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: 'Autoresize'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
200
one/docs/demo/transfer/merge-checked.vue
Normal file
200
one/docs/demo/transfer/merge-checked.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-radio-group
|
||||
v-model="mergeChecked"
|
||||
:items="items"
|
||||
/>
|
||||
<veui-transfer
|
||||
v-model="selected"
|
||||
:datasource="coffees"
|
||||
:merge-checked="mergeChecked"
|
||||
/>
|
||||
<p>Selected: {{ selected }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Transfer, RadioGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-transfer': Transfer,
|
||||
'veui-radio-group': RadioGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
coffees: [
|
||||
{
|
||||
label: 'Infused',
|
||||
value: 'infused',
|
||||
id: '100',
|
||||
children: [
|
||||
{
|
||||
label: 'Brewed',
|
||||
value: 'brewed',
|
||||
id: '100-01',
|
||||
children: [
|
||||
{
|
||||
label: 'Drip brewed',
|
||||
value: 'drip-brewed',
|
||||
id: '100-01-01'
|
||||
},
|
||||
{
|
||||
label: 'Filtered',
|
||||
value: 'filtered',
|
||||
id: '100-01-02'
|
||||
},
|
||||
{
|
||||
label: 'Pour-over',
|
||||
value: 'pour-over',
|
||||
id: '100-01-03'
|
||||
},
|
||||
{
|
||||
label: 'Immersion brewed',
|
||||
value: 'immersion-brewed',
|
||||
id: '100-01-04'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'French press',
|
||||
value: 'french-press',
|
||||
id: '100-02'
|
||||
},
|
||||
{
|
||||
label: 'Cold brew',
|
||||
value: 'cold-brew',
|
||||
id: '100-03'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Boiled',
|
||||
value: 'boiled',
|
||||
id: '200',
|
||||
children: [
|
||||
{
|
||||
label: 'Percolated',
|
||||
value: 'percolated',
|
||||
id: '200-01'
|
||||
},
|
||||
{
|
||||
label: 'Turkish',
|
||||
value: 'turkish',
|
||||
id: '200-02'
|
||||
},
|
||||
{
|
||||
label: 'Moka',
|
||||
value: 'moka',
|
||||
id: '200-03'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Espresso',
|
||||
value: 'espresso',
|
||||
id: '300',
|
||||
children: [
|
||||
{
|
||||
label: 'Caffè Americano',
|
||||
value: 'caffe-americano',
|
||||
id: '300-01'
|
||||
},
|
||||
{
|
||||
label: 'Cafe Lungo',
|
||||
value: 'cafe-lungo',
|
||||
id: '300-02'
|
||||
},
|
||||
{
|
||||
label: 'Café Cubano',
|
||||
value: 'cafe-cubano',
|
||||
id: '300-03'
|
||||
},
|
||||
{
|
||||
label: 'Caffè crema',
|
||||
value: 'caffe-crema',
|
||||
id: '300-04'
|
||||
},
|
||||
{
|
||||
label: 'Cafe Zorro',
|
||||
value: 'cafe-zorro',
|
||||
id: '300-05'
|
||||
},
|
||||
{
|
||||
label: 'Doppio',
|
||||
value: 'doppio',
|
||||
id: '300-06'
|
||||
},
|
||||
{
|
||||
label: 'Espresso Romano',
|
||||
value: 'espresso-romano',
|
||||
id: '300-07'
|
||||
},
|
||||
{
|
||||
label: 'Guillermo',
|
||||
value: 'guillermo',
|
||||
id: '300-08'
|
||||
},
|
||||
{
|
||||
label: 'Ristretto',
|
||||
value: 'ristretto',
|
||||
id: '300-09'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Milk coffee',
|
||||
value: 'milk-coffee',
|
||||
id: '400',
|
||||
children: [
|
||||
{
|
||||
label: 'Flat white',
|
||||
value: 'flat-white',
|
||||
id: '400-01'
|
||||
},
|
||||
{
|
||||
label: 'Latte',
|
||||
value: 'latte',
|
||||
id: '400-02'
|
||||
},
|
||||
{
|
||||
label: 'Macchiato',
|
||||
value: 'macchiato',
|
||||
id: '400-03'
|
||||
},
|
||||
{
|
||||
label: 'Cappuccino',
|
||||
value: 'cappuccino',
|
||||
id: '400-04'
|
||||
},
|
||||
{
|
||||
label: 'White coffee',
|
||||
value: 'white-coffee',
|
||||
id: '400-05'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
mergeChecked: 'keep-all',
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
items () {
|
||||
return [
|
||||
{ label: 'keep-all', value: 'keep-all' },
|
||||
{ label: 'downwards', value: 'downwards' },
|
||||
{ label: 'upwards', value: 'upwards' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-radio-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
57
one/docs/demo/uploader/controls.vue
Normal file
57
one/docs/demo/uploader/controls.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
:controls="controls"
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
@star="handleStar"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/star'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
controls (item, defaultControls) {
|
||||
return [
|
||||
...defaultControls,
|
||||
{
|
||||
name: 'star',
|
||||
icon: 'star',
|
||||
label: 'star'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStar () {
|
||||
toast.info('You click star!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
用 `controls` 自定义的操作，点击会触发同名事件，事件参数为该上传项数据和 `status` 字段, 即通常是 `{src, key, type, status, ...}`。
|
||||
</docs>
|
||||
@ -30,9 +30,11 @@ export default {
|
||||
action: 'https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog',
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
|
||||
57
one/docs/demo/uploader/entries.vue
Normal file
57
one/docs/demo/uploader/entries.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
:entries="entries"
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
@star="handleStar"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader, toast } from 'veui'
|
||||
import 'veui-theme-dls-icons/star'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
],
|
||||
entries (defaultEntries) {
|
||||
return [
|
||||
...defaultEntries,
|
||||
{
|
||||
name: 'star',
|
||||
icon: 'star',
|
||||
label: 'star'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStar () {
|
||||
toast.info('You clicked star!')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<docs>
|
||||
用 `entries` 自定义的操作，点击会触发同名事件，事件参数为空。
|
||||
</docs>
|
||||
@ -30,11 +30,13 @@ export default {
|
||||
let files = [
|
||||
{
|
||||
name: 'demo-file1.txt',
|
||||
src: '/file/demo-file1.txt'
|
||||
src: '/file/demo-file1.txt',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
name: 'demo-file2.txt',
|
||||
src: '/file/demo-file2.txt'
|
||||
src: '/file/demo-file2.txt',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
@ -39,10 +39,12 @@ export default {
|
||||
data () {
|
||||
let images = [
|
||||
{
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
src: '/images/development/uploader/demo-image2.jpg',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
@ -40,12 +40,14 @@ export default {
|
||||
let media = [
|
||||
{
|
||||
type: 'image',
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
type: 'video',
|
||||
src: 'https://nadvideo2.baidu.com/5dafd8544f4f53b27a5f59b0ab780403_1920_1080.mp4',
|
||||
poster: 'https://feed-image.baidu.com/0/pic/4dced79d185a16e228652b136f653dcc.jpg'
|
||||
poster: 'https://feed-image.baidu.com/0/pic/4dced79d185a16e228652b136f653dcc.jpg',
|
||||
key: 1
|
||||
}
|
||||
]
|
||||
return {
|
||||
|
||||
36
one/docs/demo/uploader/sortable.vue
Normal file
36
one/docs/demo/uploader/sortable.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-uploader
|
||||
v-model="images"
|
||||
sortable
|
||||
type="image"
|
||||
action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Uploader } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-uploader': Uploader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
key: 0,
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -29,10 +29,12 @@ export default {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
src: '/images/development/uploader/demo-image1.jpg'
|
||||
src: '/images/development/uploader/demo-image1.jpg',
|
||||
key: 0
|
||||
},
|
||||
{
|
||||
src: '/images/development/uploader/demo-image2.jpg'
|
||||
src: '/images/development/uploader/demo-image2.jpg',
|
||||
key: 1
|
||||
}
|
||||
],
|
||||
validator (file) {
|
||||
|
||||
@ -195,10 +195,6 @@
|
||||
"title": "Transfer - 穿梭框",
|
||||
"slug": "transfer"
|
||||
},
|
||||
{
|
||||
"title": "FilterPanel - 过滤面板",
|
||||
"slug": "filter-panel"
|
||||
},
|
||||
{
|
||||
"title": "Tree - 树形控件",
|
||||
"slug": "tree"
|
||||
@ -288,12 +284,12 @@
|
||||
"slug": "drawer"
|
||||
},
|
||||
{
|
||||
"title": "Embedded - 嵌入式面板",
|
||||
"slug": "embedded"
|
||||
"title": "Menu - 边栏菜单",
|
||||
"slug": "menu"
|
||||
},
|
||||
{
|
||||
"title": "Menu - 导航菜单",
|
||||
"slug": "menu"
|
||||
"title": "Nav - 导航菜单",
|
||||
"slug": "nav"
|
||||
},
|
||||
{
|
||||
"title": "Collapse - 折叠式面板",
|
||||
@ -589,10 +585,6 @@
|
||||
"title": "Transfer",
|
||||
"slug": "transfer"
|
||||
},
|
||||
{
|
||||
"title": "FilterPanel",
|
||||
"slug": "filter-panel"
|
||||
},
|
||||
{
|
||||
"title": "Tree",
|
||||
"slug": "tree"
|
||||
@ -693,11 +685,6 @@
|
||||
"slug": "drawer",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Embedded",
|
||||
"slug": "embedded",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"title": "Menu",
|
||||
"slug": "menu",
|
||||
|
||||
664
package-lock.json
generated
664
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user