feat: publicize doc implemetation
This commit is contained in:
38
one/docs/demo/form/disabled.vue
Normal file
38
one/docs/demo/form/disabled.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="disabled">
|
||||
禁用
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-form
|
||||
:data="formData"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<veui-field label="姓名:">
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
disabled: true,
|
||||
formData: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
84
one/docs/demo/form/normal.vue
Normal file
84
one/docs/demo/form/normal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<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>
|
38
one/docs/demo/form/readonly.vue
Normal file
38
one/docs/demo/form/readonly.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-checkbox v-model="readonly">
|
||||
只读
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<veui-form
|
||||
:data="formData"
|
||||
:readonly="readonly"
|
||||
>
|
||||
<veui-field label="姓名:">
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Form, Field, Input, Checkbox } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-form': Form,
|
||||
'veui-field': Field,
|
||||
'veui-input': Input
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
readonly: true,
|
||||
formData: {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
326
one/docs/demo/form/validate.vue
Normal file
326
one/docs/demo/form/validate.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-form
|
||||
ref="form"
|
||||
:before-validate="beforeValidate"
|
||||
:after-validate="afterValidate"
|
||||
:readonly="isValidating"
|
||||
:data="formData"
|
||||
:validators="validators"
|
||||
@invalid="handleInvalid"
|
||||
>
|
||||
<veui-field
|
||||
name="name"
|
||||
label="姓名"
|
||||
rules="required"
|
||||
>
|
||||
<veui-input v-model="formData.name"/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="age"
|
||||
:rules="ageRule"
|
||||
label="年龄"
|
||||
>
|
||||
<veui-input
|
||||
v-model="formData.age"
|
||||
placeholder="错误提示优先出在右侧"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="desc"
|
||||
rules="required"
|
||||
label="介绍"
|
||||
>
|
||||
<veui-textarea
|
||||
v-model="formData.desc"
|
||||
rows="3"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-fieldset
|
||||
name="phoneSet"
|
||||
label="电话"
|
||||
required
|
||||
>
|
||||
<veui-field
|
||||
name="phoneType"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-select
|
||||
v-model="formData.phoneType"
|
||||
:options="phoneTypeOptions"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="phone"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.phone"/>
|
||||
</veui-field>
|
||||
</veui-fieldset>
|
||||
|
||||
<veui-field
|
||||
name="hobby"
|
||||
:rules="hobbyRule"
|
||||
label="爱好"
|
||||
tip="选择则至少选三个"
|
||||
>
|
||||
<veui-checkbox-group
|
||||
v-model="formData.hobby"
|
||||
:items="hobbyItems"
|
||||
/>
|
||||
</veui-field>
|
||||
|
||||
<veui-fieldset
|
||||
label="预期收入"
|
||||
class="salary"
|
||||
tip="联合校验,下限必须小于上限"
|
||||
required
|
||||
>
|
||||
<veui-field
|
||||
name="start"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.start"/>
|
||||
</veui-field>
|
||||
<veui-span>-</veui-span>
|
||||
<veui-field
|
||||
name="end"
|
||||
:rules="numRequiredRule"
|
||||
>
|
||||
<veui-input v-model="formData.end"/>
|
||||
</veui-field>
|
||||
<veui-span>万</veui-span>
|
||||
</veui-fieldset>
|
||||
|
||||
<veui-field
|
||||
label="收入下限"
|
||||
name="floor"
|
||||
:rules="[
|
||||
{name: 'required', value: true},
|
||||
{name: 'min', value: 3500, message: '最低收入不小于 3500'}
|
||||
]"
|
||||
>
|
||||
<veui-number-input v-model="formData.floor"/>
|
||||
</veui-field>
|
||||
|
||||
<veui-field
|
||||
name="term"
|
||||
:rules="termRequiredRule"
|
||||
label="协议"
|
||||
>
|
||||
<veui-checkbox
|
||||
v-model="formData.term"
|
||||
>
|
||||
我已阅读并同意工作协议
|
||||
</veui-checkbox>
|
||||
</veui-field>
|
||||
|
||||
<template #actions>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
:loading="isValidating"
|
||||
type="submit"
|
||||
>
|
||||
提交
|
||||
</veui-button>
|
||||
<veui-button
|
||||
:loading="isValidating"
|
||||
@click="() => this.$refs.form.reset()"
|
||||
>
|
||||
重置
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-form>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
Form,
|
||||
Fieldset,
|
||||
Field,
|
||||
Span,
|
||||
Input,
|
||||
Button,
|
||||
Select,
|
||||
Textarea,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
NumberInput
|
||||
} from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-span': Span,
|
||||
'veui-input': Input,
|
||||
'veui-number-input': NumberInput,
|
||||
'veui-button': Button,
|
||||
'veui-form': Form,
|
||||
'veui-fieldset': Fieldset,
|
||||
'veui-field': Field,
|
||||
'veui-select': Select,
|
||||
'veui-checkbox': Checkbox,
|
||||
'veui-checkbox-group': CheckboxGroup,
|
||||
'veui-textarea': Textarea
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
name: 'liyunteng1',
|
||||
name1: 'liyunteng2',
|
||||
age: null,
|
||||
desc: '',
|
||||
hobby: ['🏸'],
|
||||
phone: '18888888888',
|
||||
phoneType: 'mobile',
|
||||
start: null,
|
||||
end: null,
|
||||
term: null,
|
||||
floor: 3501
|
||||
},
|
||||
hobbyItems: [
|
||||
{
|
||||
value: '⚽️',
|
||||
label: '足球'
|
||||
},
|
||||
{
|
||||
value: '🏀',
|
||||
label: '篮球'
|
||||
},
|
||||
{
|
||||
value: '🏸',
|
||||
label: '羽毛球'
|
||||
},
|
||||
{
|
||||
value: '🎾',
|
||||
label: '网球'
|
||||
}
|
||||
],
|
||||
phoneTypeOptions: [
|
||||
{
|
||||
label: '座机',
|
||||
value: 'phone'
|
||||
},
|
||||
{
|
||||
label: '手机',
|
||||
value: 'mobile'
|
||||
}
|
||||
],
|
||||
requiredRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
}
|
||||
],
|
||||
numRequiredRule: [
|
||||
{
|
||||
name: 'numeric',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
},
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
}
|
||||
],
|
||||
termRequiredRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
message: '请勾选阅读协议',
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
dynamicNameRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'blur,input'
|
||||
},
|
||||
{
|
||||
name: 'minLength',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
ageRule: [
|
||||
{
|
||||
name: 'required',
|
||||
value: true,
|
||||
triggers: 'input'
|
||||
},
|
||||
{
|
||||
name: 'numeric',
|
||||
value: true,
|
||||
triggers: 'input'
|
||||
},
|
||||
{
|
||||
name: 'maxLength',
|
||||
value: 3,
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
hobbyRule: [
|
||||
{
|
||||
name: 'minLength',
|
||||
value: 3,
|
||||
message: '至少选择三个爱好',
|
||||
triggers: 'change'
|
||||
}
|
||||
],
|
||||
isValidating: false,
|
||||
validators: [
|
||||
{
|
||||
fields: ['start', 'end'],
|
||||
handler (start, end) {
|
||||
if (start == null || end == null) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (parseInt(start, 10) >= parseInt(end, 10)) {
|
||||
return {
|
||||
start: '下限必须小于上限'
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
triggers: ['change', 'submit,input']
|
||||
},
|
||||
{
|
||||
fields: ['phone'],
|
||||
validate (phone) {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
let res
|
||||
if (phone === '18888888888') {
|
||||
res = {
|
||||
phone: '该手机已被注册'
|
||||
}
|
||||
}
|
||||
return resolve(res)
|
||||
}, 3000)
|
||||
})
|
||||
},
|
||||
triggers: ['input']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeValidate () {
|
||||
this.isValidating = true
|
||||
},
|
||||
afterValidate () {
|
||||
this.isValidating = false
|
||||
},
|
||||
handleInvalid () {
|
||||
this.isValidating = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user