update form demo

This commit is contained in:
梁灏 2019-09-17 09:32:13 +08:00
parent 834b31f731
commit 9725f37580

View file

@ -1,502 +1,395 @@
<!--<template>-->
<!--<div>-->
<!--<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">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<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>-->
<!--<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">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<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">-->
<!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
<!--<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>-->
<!--<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>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--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: '狮子林',-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--}],-->
<!--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: [],-->
<!--name: '',-->
<!--formValidate: {-->
<!--name: '',-->
<!--mail: '',-->
<!--city: '',-->
<!--gender: '',-->
<!--interest: [],-->
<!--date: '',-->
<!--time: '',-->
<!--desc: '',-->
<!--cascader: [],-->
<!--inputnumber: 1-->
<!--},-->
<!--ruleValidate: {-->
<!--name: [-->
<!--{ required: true, message: '姓名不能为空', trigger: 'change' }-->
<!--],-->
<!--mail: [-->
<!--{ required: true, message: '邮箱不能为空', trigger: 'change' }-->
<!--],-->
<!--city: [-->
<!--{ required: true, message: '请选择城市', trigger: 'change' }-->
<!--],-->
<!--gender: [-->
<!--{ required: true, message: '请选择性别', trigger: 'change' }-->
<!--],-->
<!--interest: [-->
<!--{ 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' }-->
<!--]-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSubmit (name) {-->
<!--this.$refs[name].validate((valid) => {-->
<!--if (valid) {-->
<!--this.$Message.success('提交成功!');-->
<!--} else {-->
<!--this.$Message.error('表单验证失败!');-->
<!--}-->
<!--})-->
<!--},-->
<!--handleReset (name) {-->
<!--this.$refs[name].resetFields();-->
<!--},-->
<!--handleSearch1 (value) {-->
<!--this.data1 = !value ? [] : [-->
<!--value,-->
<!--value + value,-->
<!--value + value + value-->
<!--];-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Form :model="formItem" :label-width="80"> <div style="margin: 100px;">
<FormItem label="Input"> <row :gutter="64">
<Input v-model="formItem.input" placeholder="Enter something..."></Input> <i-col span="12">
</FormItem> <Form ref="formValidate1" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Select"> <FormItem label="Name" prop="name">
<Select v-model="formItem.select"> <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="time">
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Gender" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Hobby" prop="interest">
<CheckboxGroup v-model="formValidate.interest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Desc" prop="desc">
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Switch" prop="switch">
<i-switch v-model="formValidate.switch"></i-switch>
</FormItem>
<FormItem label="Slider" prop="slider">
<Slider v-model="formValidate.slider"></Slider>
</FormItem>
<FormItem label="AutoComplete" prop="autoComplete">
<AutoComplete
v-model="formValidate.autoComplete"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
style="width:200px"></AutoComplete>
</FormItem>
<FormItem label="cascader" prop="cascader">
<Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
</FormItem>
<FormItem label="inputNumber" prop="inputNumber">
<InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
</FormItem>
<FormItem label="rate" prop="rate">
<Rate v-model="formValidate.rate" />
</FormItem>
<FormItem label="colorPicker" prop="colorPicker">
<ColorPicker v-model="formValidate.colorPicker" />
</FormItem>
<FormItem label="upload" prop="upload">
<Upload action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate1')">Submit</Button>
<Button @click="handleReset('formValidate1')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</i-col>
<i-col span="12">
<Form disabled ref="formValidate2" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select v-model="formValidate.city" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="time">
<TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Gender" prop="gender">
<RadioGroup v-model="formValidate.gender">
<Radio label="male">Male</Radio>
<Radio label="female">Female</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Hobby" prop="interest">
<CheckboxGroup v-model="formValidate.interest">
<Checkbox label="Eat"></Checkbox>
<Checkbox label="Sleep"></Checkbox>
<Checkbox label="Run"></Checkbox>
<Checkbox label="Movie"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Desc" prop="desc">
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="Switch" prop="switch">
<i-switch v-model="formValidate.switch"></i-switch>
</FormItem>
<FormItem label="Slider" prop="slider">
<Slider v-model="formValidate.slider"></Slider>
</FormItem>
<FormItem label="AutoComplete" prop="autoComplete">
<AutoComplete
v-model="formValidate.autoComplete"
:data="data1"
@on-search="handleSearch1"
placeholder="input here"
style="width:200px"></AutoComplete>
</FormItem>
<FormItem label="cascader" prop="cascader">
<Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
</FormItem>
<FormItem label="inputNumber" prop="inputNumber">
<InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
</FormItem>
<FormItem label="rate" prop="rate">
<Rate v-model="formValidate.rate" />
</FormItem>
<FormItem label="colorPicker" prop="colorPicker">
<ColorPicker v-model="formValidate.colorPicker" />
</FormItem>
<FormItem label="upload" prop="upload">
<Upload action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate2')">Submit</Button>
<Button @click="handleReset('formValidate2')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</i-col>
</row>
<div style="margin: 100px;width: 200px;">
<Divider>普通组件</Divider>
<Button>123</Button>
<Button disabled>123</Button>
<br>
<Input value="" />
<Input value="" disabled />
<br>
<Radio :value="false">Radio</Radio>
<Radio :value="false" disabled>Radio</Radio>
<RadioGroup value="爪哇犀牛">
<Radio label="金斑蝶"></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</RadioGroup>
<RadioGroup value="爪哇犀牛">
<Radio label="金斑蝶" disabled></Radio>
<Radio label="爪哇犀牛"></Radio>
<Radio label="印度黑羚"></Radio>
</RadioGroup>
<br>
<Checkbox :value="false">Checkbox</Checkbox>
<Checkbox :value="false" disabled>Checkbox</Checkbox>
<CheckboxGroup :value="['香蕉']">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果" disabled></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<i-switch :value="false" />
<i-switch :value="false" disabled />
<br>
<Select value="London" disabled style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select value="London" style="width:200px">
<Option value="beijing">New York</Option> <Option value="beijing">New York</Option>
<Option value="shanghai">London</Option> <Option value="shanghai" disabled>London</Option>
<Option value="shenzhen">Sydney</Option> <Option value="shenzhen">Sydney</Option>
</Select> </Select>
</FormItem> <Select value="" filterable>
<FormItem label="DatePicker"> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Row> </Select>
<Col span="11"> <Select value="" filterable disabled>
<DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Col> </Select>
<Col span="2" style="text-align: center">-</Col> <br>
<Col span="11"> <Slider :value="20"></Slider>
<TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker> <Slider :value="20" disabled></Slider>
</Col> <br>
</Row> <AutoComplete
</FormItem> v-model="value1"
<FormItem label="Radio"> :data="data1"
<RadioGroup v-model="formItem.radio"> @on-search="handleSearch1"
<Radio label="male">Male</Radio> placeholder="input here"
<Radio label="female">Female</Radio> style="width:200px"></AutoComplete>
</RadioGroup> <AutoComplete
</FormItem> v-model="value1"
<FormItem label="Checkbox"> :data="data1"
<CheckboxGroup v-model="formItem.checkbox"> @on-search="handleSearch1"
<Checkbox label="Eat"></Checkbox> placeholder="input here"
<Checkbox label="Sleep"></Checkbox> disabled
<Checkbox label="Run"></Checkbox> style="width:200px"></AutoComplete>
<Checkbox label="Movie"></Checkbox> <br>
</CheckboxGroup> <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
</FormItem> <DatePicker type="date" placeholder="Select date" style="width: 200px" disabled></DatePicker>
<FormItem label="Switch"> <br>
<i-switch v-model="formItem.switch" size="large"> <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
<span slot="open">On</span> <TimePicker type="time" placeholder="Select time" style="width: 168px" disabled></TimePicker>
<span slot="close">Off</span> <br>
</i-switch> <Cascader :data="data2"></Cascader>
</FormItem> <Cascader :data="data2" disabled></Cascader>
<FormItem label="Slider"> <br>
<Slider v-model="formItem.slider" range></Slider> <InputNumber :max="10" :min="1" :value="2"></InputNumber>
</FormItem> <InputNumber :max="10" :min="1" :value="2" disabled></InputNumber>
<FormItem label="Text"> <br>
<Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> <Rate :value="3" />
</FormItem> <Rate :value="3" disabled />
<FormItem> <br>
<Button type="primary">Submit</Button> <ColorPicker value="#19be6b" />
<Button type="primary" ghost style="margin-left: 8px">Cancel</Button> <ColorPicker value="#19be6b" disabled />
</FormItem> <br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> <Upload action="//jsonplaceholder.typicode.com/posts/">
</Form> <Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
<Upload action="//jsonplaceholder.typicode.com/posts/" disabled>
<Button icon="ios-cloud-upload-outline">Upload files</Button>
</Upload>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
formItem: { value1: '',
input: '', data1: [],
select: '', formValidate: {
radio: 'male', name: '',
checkbox: [], mail: '',
switch: true, city: '',
gender: '',
interest: [],
date: '', date: '',
time: '', time: '',
slider: [20, 50], desc: '',
textarea: '' switch: false,
} slider: 20,
autoComplete: '',
cascader: [],
inputNumber: 2,
rate: 3,
colorPicker: ''
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
slider: [
{ required: true, type: 'number', message: 'Slider', trigger: 'change' }
],
switch: [
{ required: true, type: 'boolean', message: 'Switch...', trigger: 'change' }
],
mail: [
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
],
gender: [
{ required: true, message: 'Please select gender', trigger: 'change' }
],
interest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
],
time: [
{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
]
},
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
data2: [{
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖'
}]
}]
}, {
value: 'jiangsu',
label: '江苏',
disabled: true,
children: [{
value: 'nanjing',
label: '南京',
children: [{
value: 'zhonghuamen',
label: '中华门'
}]
}]
}]
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
},
handleSearch1 (value) {
this.data1 = !value ? [] : [
value,
value + value,
value + value + value
];
} }
} }
} }