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