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> <template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <div>
<Form-item prop="name"> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<span slot="label"><Icon type="ionic"></Icon></span> <Form-item prop="name">
<AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete> <span slot="label"><Icon type="ionic"></Icon></span>
</Form-item> <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
<Form-item label="邮箱" prop="mail"> </Form-item>
<!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>--> <Form-item label="邮箱" prop="mail">
<ColorPicker v-model="formValidate.mail"></ColorPicker> <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
</Form-item> <ColorPicker v-model="formValidate.mail"></ColorPicker>
<Form-item label="城市" prop="city"> </Form-item>
<Select v-model="formValidate.city" placeholder="请选择所在地"> <Form-item label="城市" prop="city">
<Option value="beijing">北京市</Option> <Select v-model="formValidate.city" placeholder="请选择所在地">
<Option value="shanghai">上海市</Option> <Option value="beijing">北京市</Option>
<Option value="shenzhen">深圳市</Option> <Option value="shanghai">上海市</Option>
</Select> <Option value="shenzhen">深圳市</Option>
</Form-item> </Select>
<Form-item label="选择日期"> </Form-item>
<Row> <Form-item label="选择日期">
<Col span="11"> <Row>
<Form-item prop="date"> <Col span="11">
<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker> <Form-item prop="date">
</Form-item> <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
</Col> </Form-item>
<Col span="2" style="text-align: center">-</Col> </Col>
<Col span="11"> <Col span="2" style="text-align: center">-</Col>
<Form-item prop="time"> <Col span="11">
<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker> <Form-item prop="time">
</Form-item> <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
</Col> </Form-item>
</Row> </Col>
</Form-item> </Row>
<Form-item label="性别" prop="gender"> </Form-item>
<Radio-group v-model="formValidate.gender"> <Form-item label="性别" prop="gender">
<Radio label="male">男</Radio> <Radio-group v-model="formValidate.gender">
<Radio label="female">女</Radio> <Radio label="male">男</Radio>
</Radio-group> <Radio label="female">女</Radio>
</Form-item> </Radio-group>
<Form-item label="爱好" prop="interest"> </Form-item>
<Checkbox-group v-model="formValidate.interest"> <Form-item label="爱好" prop="interest">
<Checkbox label="吃饭"></Checkbox> <Checkbox-group v-model="formValidate.interest">
<Checkbox label="睡觉"></Checkbox> <Checkbox label="吃饭"></Checkbox>
<Checkbox label="跑步"></Checkbox> <Checkbox label="睡觉"></Checkbox>
<Checkbox label="看电影"></Checkbox> <Checkbox label="跑步"></Checkbox>
</Checkbox-group> <Checkbox label="看电影"></Checkbox>
</Form-item> </Checkbox-group>
<Form-item label="介绍" prop="desc"> </Form-item>
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> <Form-item label="介绍" prop="desc">
</Form-item> <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> <Form-item>
<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
</Form-item> <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
</Form> </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> </template>
<script> <script>
export default { export default {
data () { data () {
return { 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: '', name: '',
formValidate: { formValidate: {
name: '', name: '',
@ -110,6 +216,13 @@
}, },
handleReset (name) { handleReset (name) {
this.$refs[name].resetFields(); 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" ref="input"
slot="input" slot="input"
v-model="currentValue" v-model="currentValue"
:name="name"
:placeholder="placeholder" :placeholder="placeholder"
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"
@ -81,6 +82,9 @@
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default: false
},
name: {
type: String
} }
}, },
data () { data () {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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