drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
iview/examples/routers/form.vue

427 lines
21 KiB
Vue
Raw Normal View History

update Form update Form
2017-01-03 16:18:21 +08:00
<template>
fixed #812
2017-09-19 16:45:02 +08:00
<div>
fixed: #2219 & ColorPicker icon position
2017-10-28 11:57:38 +08:00
<Tabs type="card">
<TabPane label="默认大小">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form-item label-for="autocomplete" prop="name">
<span slot="label"><Icon type="ionic"></Icon></span>
<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>
</Form-item>
<Form-item label-for="input" label="介绍" prop="desc">
<Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
</Form-item>
<Form-item label="邮箱" prop="mail">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<ColorPicker v-model="formValidate.mail"></ColorPicker>
</Form-item>
<Form-item label-for="select" label="城市" prop="city">
<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
</Form-item>
<Form-item label-for="date" label="选择日期" prop="date">
<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
</Form-item>
<Form-item label-for="cascader" label="级联选择" prop="cascader">
<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>
</Form-item>
fixed #433
2017-09-22 15:29:50 +08:00
fixed: #2219 & ColorPicker icon position
2017-10-28 11:57:38 +08:00
<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>
</Form-item>
<Form-item label="选择日期">
<Row>
<Col span="11">
<Form-item prop="date">
<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
</Form-item>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<Form-item prop="time">
<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
</Form-item>
</Col>
</Row>
</Form-item>
<Form-item label="性别" prop="gender">
<Radio-group v-model="formValidate.gender">
<Radio label="male">男</Radio>
<Radio label="female">女</Radio>
</Radio-group>
</Form-item>
<Form-item label="爱好" prop="interest">
<Checkbox-group v-model="formValidate.interest">
<Checkbox label="吃饭"></Checkbox>
<Checkbox label="睡觉"></Checkbox>
<Checkbox label="跑步"></Checkbox>
<Checkbox label="看电影"></Checkbox>
</Checkbox-group>
</Form-item>
<Form-item>
<Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>
</Form-item>
</Form>
</TabPane>
<TabPane label="小表单">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form-item label-for="autocomplete" prop="name">
<span slot="label"><Icon type="ionic"></Icon></span>
<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>
</Form-item>
<Form-item label-for="input" label="介绍" prop="desc">
<Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
</Form-item>
<Form-item label="邮箱" prop="mail">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>
</Form-item>
<Form-item label-for="select" label="城市" prop="city">
<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
</Form-item>
<Form-item label-for="date" label="选择日期" prop="date">
<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
</Form-item>
<Form-item label-for="cascader" label="级联选择" prop="cascader">
<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>
</Form-item>
<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>
</Form-item>
<Form-item label="选择日期">
<Row>
<Col span="11">
<Form-item prop="date">
<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>
</Form-item>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<Form-item prop="time">
<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>
</Form-item>
</Col>
</Row>
</Form-item>
<Form-item label="性别" prop="gender">
<Radio-group v-model="formValidate.gender" size="small">
<Radio label="male">男</Radio>
<Radio label="female">女</Radio>
</Radio-group>
</Form-item>
<Form-item label="爱好" prop="interest" size="small">
<Checkbox-group v-model="formValidate.interest">
<Checkbox label="吃饭"></Checkbox>
<Checkbox label="睡觉"></Checkbox>
<Checkbox label="跑步"></Checkbox>
<Checkbox label="看电影"></Checkbox>
</Checkbox-group>
</Form-item>
<Form-item>
<Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>
</Form-item>
</Form>
</TabPane>
<TabPane label="大表单">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form-item label-for="autocomplete" prop="name">
<span slot="label"><Icon type="ionic"></Icon></span>
<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>
</Form-item>
<Form-item label-for="input" label="介绍" prop="desc">
<Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
</Form-item>
<Form-item label="邮箱" prop="mail">
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
<ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>
</Form-item>
<Form-item label-for="select" label="城市" prop="city">
<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
</Form-item>
<Form-item label-for="date" label="选择日期" prop="date">
<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
</Form-item>
<Form-item label-for="cascader" label="级联选择" prop="cascader">
<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>
</Form-item>
<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">
<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>
</Form-item>
<Form-item label="选择日期">
<Row>
<Col span="11">
<Form-item prop="date">
<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>
</Form-item>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<Form-item prop="time">
<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>
</Form-item>
</Col>
</Row>
</Form-item>
<Form-item label="性别" prop="gender">
<Radio-group v-model="formValidate.gender" size="large">
<Radio label="male">男</Radio>
<Radio label="female">女</Radio>
</Radio-group>
</Form-item>
<Form-item label="爱好" prop="interest" size="large">
<Checkbox-group v-model="formValidate.interest">
<Checkbox label="吃饭"></Checkbox>
<Checkbox label="睡觉"></Checkbox>
<Checkbox label="跑步"></Checkbox>
<Checkbox label="看电影"></Checkbox>
</Checkbox-group>
</Form-item>
<Form-item>
<Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>
</Form-item>
</Form>
</TabPane>
</Tabs>
fixed #433
2017-09-22 15:29:50 +08:00
fixed #812
2017-09-19 16:45:02 +08:00
<div style="margin: 100px">
<form action="/">
<Input name="f1"></Input>
<i-switch name="f2" :true-value="1" :false-value="2"></i-switch>
<Select v-model="model1" multiple style="width:200px" name="f3">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<AutoComplete
v-model="value1"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
name="f4"
style="width:200px"></AutoComplete>
<Slider v-model="value11" name="f5"></Slider>
<DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>
<TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>
<Cascader :data="datac" v-model="valuec" name="f8"></Cascader>
<Rate v-model="valuer" name="f9"></Rate>
<ColorPicker v-model="color" name="f10" />
<button type="submit">test</button>
</form>
</div>
</div>
update Form update Form
2017-01-03 16:18:21 +08:00
</template>
<script>
export default {
data () {
update Form update Form
2017-01-03 18:13:59 +08:00
return {
fixed #433
2017-09-22 15:29:50 +08:00
dataCascader: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}],
fixed #812
2017-09-19 16:45:02 +08:00
color: '#19be6b',
valuer: 3,
valuec: [],
datac: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}],
value1: '',
value11: 25,
data1: [],
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
model1: [],
update AutoComplete
2017-08-23 15:19:32 +08:00
name: '',
fixed #768
2017-04-25 14:50:37 +08:00
formValidate: {
fixed #1171
2017-06-15 14:40:35 +08:00
name: '',
mail: '',
city: '',
gender: '',
interest: [],
date: '',
time: '',
fixed #433
2017-09-22 15:29:50 +08:00
desc: '',
cascader: [],
inputnumber: 1
update Input update Input
2017-01-06 11:30:01 +08:00
},
fixed #768
2017-04-25 14:50:37 +08:00
ruleValidate: {
fixed #1171
2017-06-15 14:40:35 +08:00
name: [
update AutoComplete
2017-08-23 15:19:32 +08:00
{ required: true, message: '姓名不能为空', trigger: 'change' }
fixed #1171
2017-06-15 14:40:35 +08:00
],
mail: [
update ColorPicker
2017-08-23 16:06:30 +08:00
{ required: true, message: '邮箱不能为空', trigger: 'change' }
fixed #1171
2017-06-15 14:40:35 +08:00
],
city: [
{ required: true, message: '请选择城市', trigger: 'change' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
fixed #768
2017-04-25 14:50:37 +08:00
interest: [
fixed #1171
2017-06-15 14:40:35 +08:00
{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }
],
time: [
{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }
],
desc: [
{ required: true, message: '请输入个人介绍', trigger: 'blur' },
{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
support Form support Form
2017-03-08 15:31:59 +08:00
]
update Form update Form
2017-01-03 18:13:59 +08:00
}
}
update Form update Form
2017-01-03 16:18:21 +08:00
},
update Form update Form
2017-01-03 18:13:59 +08:00
methods: {
optimize Input validate icon
2017-04-01 12:08:08 +08:00
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('提交成功!');
} else {
this.$Message.error('表单验证失败!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
fixed #812
2017-09-19 16:45:02 +08:00
},
handleSearch1 (value) {
this.data1 = !value ? [] : [
value,
value + value,
value + value + value
];
fixed #494 watch trigger after form emit, so the value of date not change when validate, change to async
2017-03-27 10:30:45 +08:00
}
update Form update Form
2017-01-03 18:13:59 +08:00
}
update Input on-form-change trigger timing #198 update Input on-form-change trigger timing #198
2017-01-13 15:45:08 +08:00
}
optimize Input validate icon
2017-04-01 12:08:08 +08:00
</script>
Reference in a new issue Copy permalink