docs_vue2/one/docs/demo/form/normal.vue
2020-08-13 11:47:56 +08:00

85 lines
1.5 KiB
Vue

<template>
<article>
<veui-form :data="formData">
<veui-field label="状态:">
<veui-select
v-model="formData.statusSelected"
:options="statusOptions"
/>
</veui-field>
<veui-field label="时间:">
<veui-datepicker
v-model="formData.range"
range
/>
</veui-field>
<veui-field>
<veui-search-box
v-model="formData.query"
placeholder="请输入搜索内容"
/>
</veui-field>
<template #actions>
<veui-button
ui="primary"
type="submit"
>
提交
</veui-button>
<veui-button>取消</veui-button>
</template>
</veui-form>
</article>
</template>
<script>
import moment from 'moment'
import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
export default {
components: {
'veui-form': Form,
'veui-field': Field,
'veui-button': Button,
'veui-select': Select,
'veui-datepicker': DatePicker,
'veui-search-box': SearchBox
},
data () {
return {
statusOptions: [
{
label: '状态1',
value: 1
},
{
label: '状态2',
value: 2
},
{
label: '状态3',
value: 3
},
{
label: '状态4',
value: 4
}
],
formData: {
statusSelected: 1,
query: '',
range: [
moment().toDate(),
moment()
.add(3, 'month')
.toDate()
]
}
}
}
}
</script>