fixed #812
This commit is contained in:
梁灏
parent
e7ad415432
commit
0460a1e811
11 changed files with 211 additions and 53 deletions
|
|
@ -1,62 +1,168 @@
|
|||
<template>
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<Form-item prop="name">
|
||||
<span slot="label"><Icon type="ionic"></Icon></span>
|
||||
<AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
|
||||
</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="城市" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="请选择所在地">
|
||||
<Option value="beijing">北京市</Option>
|
||||
<Option value="shanghai">上海市</Option>
|
||||
<Option value="shenzhen">深圳市</Option>
|
||||
</Select>
|
||||
</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 label="介绍" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
|
||||
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
<div>
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
|
||||
<Form-item prop="name">
|
||||
<span slot="label"><Icon type="ionic"></Icon></span>
|
||||
<AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
|
||||
</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="城市" prop="city">
|
||||
<Select v-model="formValidate.city" placeholder="请选择所在地">
|
||||
<Option value="beijing">北京市</Option>
|
||||
<Option value="shanghai">上海市</Option>
|
||||
<Option value="shenzhen">深圳市</Option>
|
||||
</Select>
|
||||
</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 label="介绍" prop="desc">
|
||||
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
|
||||
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
|
||||
<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 {
|
||||
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: '',
|
||||
|
|
@ -110,6 +216,13 @@
|
|||
},
|
||||
handleReset (name) {
|
||||
this.$refs[name].resetFields();
|
||||
},
|
||||
handleSearch1 (value) {
|
||||
this.data1 = !value ? [] : [
|
||||
value,
|
||||
value + value,
|
||||
value + value + value
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue