drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #812

Browse source
This commit is contained in:
梁灏 2017-09-19 16:45:02 +08:00
parent e7ad415432
commit 0460a1e811
11 changed files with 211 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
examples/routers/form.vue
View file

@ -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
];
}
}
}

4
src/components/auto-complete/auto-complete.vue
View file

@ -18,6 +18,7 @@
ref="input"
slot="input"
v-model="currentValue"
:name="name"
:placeholder="placeholder"
:disabled="disabled"
:size="size"
@ -81,6 +82,9 @@
transfer: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {

4
src/components/cascader/cascader.vue
View file

@ -1,6 +1,7 @@
<template>
<div :class="classes" v-clickoutside="handleClose">
<div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
<input type="hidden" :name="name" :value="currentValue">
<slot>
<i-input
ref="input"
@ -127,6 +128,9 @@
transfer: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {

5
src/components/checkbox/checkbox.vue
View file

@ -9,6 +9,7 @@
:disabled="disabled"
:value="label"
v-model="model"
:name="name"
@change="change">
<input
v-if="!group"
@ -16,6 +17,7 @@
:class="inputClasses"
:disabled="disabled"
:checked="currentValue"
:name="name"
@change="change">
</span>
<slot><span v-if="showSlot">{{ label }}</span></slot>
@ -58,6 +60,9 @@
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
name: {
type: String
}
},
data () {

7
src/components/color-picker/color-picker.vue
View file

@ -1,6 +1,7 @@
<template>
<div :class="classes" v-clickoutside="handleClose">
<div ref="reference" @click="toggleVisible" :class="wrapClasses">
<input type="hidden" :name="name" :value="currentValue">
<i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
<div :class="inputClasses">
<div :class="[prefixCls + '-color']">
@ -167,11 +168,15 @@
transfer: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {
return {
val: _colorChange(this.value),
currentValue: this.value,
prefixCls: prefixCls,
visible: false,
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
@ -344,12 +349,14 @@
},
handleSuccess () {
const color = this.formatColor;
this.currentValue = color;
this.$emit('input', color);
this.$emit('on-change', color);
this.dispatch('FormItem', 'on-form-change', color);
this.handleClose();
},
handleClear () {
this.currentValue = '';
this.$emit('input', '');
this.$emit('on-change', '');
this.dispatch('FormItem', 'on-form-change', '');

4
src/components/date-picker/picker.vue
View file

@ -9,6 +9,7 @@
:size="size"
:placeholder="placeholder"
:value="visualValue"
:name="name"
@on-input-change="handleInputChange"
@on-focus="handleFocus"
@on-click="handleIconClick"
@ -197,6 +198,9 @@
transfer: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {

4
src/components/radio/radio.vue
View file

@ -7,6 +7,7 @@
:class="inputClasses"
:disabled="disabled"
:checked="currentValue"
:name="name"
@change="change">
</span><slot>{{ label }}</slot>
</label>
@ -44,6 +45,9 @@
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
name: {
type: String
}
},
data () {

5
src/components/rate/rate.vue
View file

@ -1,5 +1,6 @@
<template>
<div :class="classes" @mouseleave="handleMouseleave">
<input type="hidden" :name="name" :value="currentValue">
<div
v-for="item in count"
:class="starCls(item)"
@ -19,6 +20,7 @@
const prefixCls = 'ivu-rate';
export default {
name: 'Rate',
mixins: [ Locale, Emitter ],
props: {
count: {
@ -40,6 +42,9 @@
showText: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {

4
src/components/select/select.vue
View file

@ -5,6 +5,7 @@
ref="reference"
@click="toggleMenu">
<slot name="input">
<input type="hidden" :name="name" :value="model">
<div class="ivu-tag" v-for="(item, index) in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
@ -131,6 +132,9 @@
autoComplete: {
type: Boolean,
default: false
},
name: {
type: String
}
},
data () {

4
src/components/slider/slider.vue
View file

@ -9,6 +9,7 @@
:disabled="disabled"
@on-change="handleInputChange"></Input-number>
<div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
<input type="hidden" :name="name" :value="currentValue">
<template v-if="showStops">
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
</template>
@ -102,6 +103,9 @@
validator (value) {
return oneOf(value, ['hover', 'always', 'never']);
}
},
name: {
type: String
}
},
data () {

4
src/components/switch/switch.vue
View file

@ -1,5 +1,6 @@
<template>
<span :class="wrapClasses" @click="toggle">
<input type="hidden" :name="name" :value="currentValue">
<span :class="innerClasses">
<slot name="open" v-if="currentValue === trueValue"></slot>
<slot name="close" v-if="currentValue === falseValue"></slot>
@ -36,6 +37,9 @@
validator (value) {
return oneOf(value, ['large', 'small', 'default']);
}
},
name: {
type: String
}
},
data () {