docs: refine form demo and message
This commit is contained in:
parent
a43b11c9e6
commit
bc5ca56021
@ -2,9 +2,7 @@
|
|||||||
|
|
||||||
## 示例
|
## 示例
|
||||||
|
|
||||||
`Message` 有五种状态,分别是 `success`、`info`、`warning` 、`error` 和 `aux`,可以通过 [`status`](#props-status) 属性指定不同的类型。
|
可以使用 [`status`](#props-status) 属性指定不同的上下文状态,使用 [`display`](#props-display) 属性指定不同的展示形态。
|
||||||
|
|
||||||
`Message` 有四种变体,分别是 `normal`、`popup`、`simple` 和 `standalone`,可以通过 [`display`](#props-display) 属性指定不同的变体。
|
|
||||||
|
|
||||||
[[ demo src="/demo/message/default.vue" ]]
|
[[ demo src="/demo/message/default.vue" ]]
|
||||||
|
|
||||||
@ -34,11 +32,11 @@
|
|||||||
+++枚举值
|
+++枚举值
|
||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `info` | 消息提示样式。 |
|
| `info` | 信息提示状态。 |
|
||||||
| `success` | 成功样式。 |
|
| `success` | 成功状态。 |
|
||||||
| `warning` | 警告样式。 |
|
| `warning` | 警告状态。 |
|
||||||
| `error` | 错误样式。 |
|
| `error` | 错误状态。 |
|
||||||
| `aux` | 辅助样式。 |
|
| `aux` | 辅助状态。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
@ -49,9 +47,9 @@
|
|||||||
| 值 | 描述 |
|
| 值 | 描述 |
|
||||||
| -- | -- |
|
| -- | -- |
|
||||||
| `normal` | 普通样式,有图标和带状态文本。 |
|
| `normal` | 普通样式,有图标和带状态文本。 |
|
||||||
| `popup` | 气泡样式。 |
|
| `popup` | 气泡样式,默认仅展示图标,可交互调起气泡展示详细内容。 |
|
||||||
| `simple` | 简单样式,没有图标。 |
|
| `simple` | 简单样式,没有图标。 |
|
||||||
| `standalone` | 独立样式,有图标和无状态文本。 |
|
| `standalone` | 独立样式,展示图标和无状态文本。 |
|
||||||
+++
|
+++
|
||||||
^^^
|
^^^
|
||||||
|
|
||||||
|
@ -4,15 +4,15 @@
|
|||||||
:data="formData"
|
:data="formData"
|
||||||
>
|
>
|
||||||
<veui-field
|
<veui-field
|
||||||
label="门店:"
|
label="门店"
|
||||||
name="store"
|
name="store"
|
||||||
:rules="[{
|
:rules="[{
|
||||||
name: 'required', message: `请选择门店`, triggers: 'select'
|
name: 'required', message: '请选择门店', triggers: 'select'
|
||||||
}]"
|
}]"
|
||||||
>
|
>
|
||||||
<veui-transfer
|
<veui-transfer
|
||||||
:datasource="storeList"
|
|
||||||
v-model="formData.store"
|
v-model="formData.store"
|
||||||
|
:datasource="storeList"
|
||||||
>
|
>
|
||||||
<template #selected-item-label="{ label, value }">
|
<template #selected-item-label="{ label, value }">
|
||||||
<div class="selected-store">
|
<div class="selected-store">
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
:data="formData"
|
:data="formData"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
<veui-field label="姓名:">
|
<veui-field label="姓名">
|
||||||
<veui-input v-model="formData.name"/>
|
<veui-input v-model="formData.name"/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
</veui-form>
|
</veui-form>
|
||||||
|
@ -1,43 +1,56 @@
|
|||||||
<template>
|
<template>
|
||||||
<article>
|
<article>
|
||||||
|
<section>
|
||||||
|
<veui-checkbox
|
||||||
|
v-model="helpPosition"
|
||||||
|
true-value="bottom"
|
||||||
|
false-value="side"
|
||||||
|
>
|
||||||
|
辅助信息显示在底部
|
||||||
|
</veui-checkbox>
|
||||||
|
</section>
|
||||||
<veui-form
|
<veui-form
|
||||||
:data="formData"
|
:data="formData"
|
||||||
>
|
>
|
||||||
<veui-field
|
<veui-field
|
||||||
label="姓名:"
|
|
||||||
tip="提示"
|
|
||||||
help="辅助文本"
|
|
||||||
name="name"
|
name="name"
|
||||||
|
label="姓名"
|
||||||
|
tip="你的全名"
|
||||||
|
help="至少 2 个字符"
|
||||||
|
:help-position="helpPosition"
|
||||||
>
|
>
|
||||||
<veui-input v-model="formData.name"/>
|
<veui-input v-model="formData.name"/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
<veui-field
|
<veui-field
|
||||||
label="爱好:"
|
name="address"
|
||||||
help="辅助文本"
|
label="地址"
|
||||||
name="hobby"
|
tip="居住地的详细地址"
|
||||||
help-position="bottom"
|
help="精确到门牌号"
|
||||||
|
:help-position="helpPosition"
|
||||||
>
|
>
|
||||||
<veui-input v-model="formData.hobby"/>
|
<veui-input v-model="formData.address"/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
</veui-form>
|
</veui-form>
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Form, Field, Input } from 'veui'
|
import { Form, Field, Input, Checkbox } from 'veui'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
'veui-form': Form,
|
'veui-form': Form,
|
||||||
'veui-field': Field,
|
'veui-field': Field,
|
||||||
'veui-input': Input
|
'veui-input': Input,
|
||||||
|
'veui-checkbox': Checkbox
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
formData: {
|
formData: {
|
||||||
name: '',
|
name: '',
|
||||||
hobby: ''
|
address: ''
|
||||||
}
|
},
|
||||||
|
helpPosition: 'side'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,27 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<article>
|
<article>
|
||||||
<veui-form :data="formData">
|
<veui-form
|
||||||
<veui-field label="状态:">
|
:data="formData"
|
||||||
|
@submit="handleSubmit"
|
||||||
|
>
|
||||||
|
<veui-field label="型号">
|
||||||
<veui-select
|
<veui-select
|
||||||
v-model="formData.statusSelected"
|
v-model="formData.model"
|
||||||
:options="statusOptions"
|
:options="models"
|
||||||
/>
|
/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
|
<veui-field label="日期">
|
||||||
<veui-field label="时间:">
|
<veui-date-picker
|
||||||
<veui-datepicker
|
v-model="formData.date"
|
||||||
v-model="formData.range"
|
|
||||||
range
|
|
||||||
/>
|
/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
|
|
||||||
<veui-field>
|
|
||||||
<veui-search-box
|
|
||||||
v-model="formData.query"
|
|
||||||
placeholder="请输入搜索内容"
|
|
||||||
/>
|
|
||||||
</veui-field>
|
|
||||||
|
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<veui-button
|
<veui-button
|
||||||
ui="primary"
|
ui="primary"
|
||||||
@ -36,7 +29,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
|
import { Form, Field, Button, Select, DatePicker } from 'veui'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -44,38 +37,38 @@ export default {
|
|||||||
'veui-field': Field,
|
'veui-field': Field,
|
||||||
'veui-button': Button,
|
'veui-button': Button,
|
||||||
'veui-select': Select,
|
'veui-select': Select,
|
||||||
'veui-datepicker': DatePicker,
|
'veui-date-picker': DatePicker
|
||||||
'veui-search-box': SearchBox
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const start = new Date()
|
|
||||||
const end = new Date(start.getFullYear(), start.getMonth() + 1, 0)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
statusOptions: [
|
models: [
|
||||||
{
|
{
|
||||||
label: '状态1',
|
label: 'APTX-4867',
|
||||||
value: 1
|
value: 'aptx-4867'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '状态2',
|
label: 'APTX-4868',
|
||||||
value: 2
|
value: 'aptx-4868'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '状态3',
|
label: 'APTX-4869',
|
||||||
value: 3
|
value: 'aptx-4869'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '状态4',
|
label: 'APTX-4870',
|
||||||
value: 4
|
value: 'aptx-4870'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
formData: {
|
formData: {
|
||||||
statusSelected: 1,
|
model: null,
|
||||||
query: '',
|
date: null
|
||||||
range: [start, end]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSubmit (data) {
|
||||||
|
this.$toast(JSON.stringify(data, null, 2))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
:data="formData"
|
:data="formData"
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
>
|
>
|
||||||
<veui-field label="姓名:">
|
<veui-field label="姓名">
|
||||||
<veui-input v-model="formData.name"/>
|
<veui-input v-model="formData.name"/>
|
||||||
</veui-field>
|
</veui-field>
|
||||||
</veui-form>
|
</veui-form>
|
||||||
|
@ -1,28 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<article>
|
<article>
|
||||||
<section>
|
<section class="options">
|
||||||
<div class="control-wrapper">
|
|
||||||
<veui-radio-button-group
|
<veui-radio-button-group
|
||||||
v-model="ui"
|
v-model="ui"
|
||||||
|
ui="s"
|
||||||
:items="uiValues"
|
:items="uiValues"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<veui-radio-button-group
|
<veui-radio-button-group
|
||||||
v-model="display"
|
v-model="display"
|
||||||
|
ui="s"
|
||||||
:items="displayValues"
|
:items="displayValues"
|
||||||
/>
|
/>
|
||||||
</div>
|
</section>
|
||||||
<div
|
<section>
|
||||||
v-for="(status, index) in statuses"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<span class="message-label">{{ status }}:</span>
|
|
||||||
<veui-message
|
<veui-message
|
||||||
:display="display"
|
:display="display"
|
||||||
:ui="ui"
|
:ui="ui"
|
||||||
:status="status"
|
status="info"
|
||||||
>消息</veui-message>
|
>
|
||||||
</div>
|
请在一小时内容完成付款,否则订单将自动取消
|
||||||
|
</veui-message>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<veui-message
|
||||||
|
:display="display"
|
||||||
|
:ui="ui"
|
||||||
|
status="success"
|
||||||
|
>
|
||||||
|
订单创建成功
|
||||||
|
</veui-message>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<veui-message
|
||||||
|
:display="display"
|
||||||
|
:ui="ui"
|
||||||
|
status="error"
|
||||||
|
>
|
||||||
|
网络连接失败
|
||||||
|
</veui-message>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<veui-message
|
||||||
|
:display="display"
|
||||||
|
:ui="ui"
|
||||||
|
status="warning"
|
||||||
|
>
|
||||||
|
余额较低,请及时续费
|
||||||
|
</veui-message>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<veui-message
|
||||||
|
:display="display"
|
||||||
|
:ui="ui"
|
||||||
|
status="aux"
|
||||||
|
>
|
||||||
|
允许上传的文件类型为:JPG、PNG
|
||||||
|
</veui-message>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
@ -56,23 +90,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
section {
|
section + section {
|
||||||
margin-bottom: 10px;
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
& > div {
|
.options {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 32px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
gap: 8px;
|
||||||
|
|
||||||
.message-label {
|
|
||||||
min-width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.veui-radio-button-group {
|
|
||||||
& + & {
|
|
||||||
margin-left: 26px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user