Commit 0460a1e811edb39051cacc686d00931cceaf0bcb
1 parent
e7ad4154
fixed #812
Showing
11 changed files
with
211 additions
and
53 deletions
Show diff stats
examples/routers/form.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> | ||
| 3 | - <Form-item prop="name"> | ||
| 4 | - <span slot="label"><Icon type="ionic"></Icon></span> | ||
| 5 | - <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete> | ||
| 6 | - </Form-item> | ||
| 7 | - <Form-item label="邮箱" prop="mail"> | ||
| 8 | - <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>--> | ||
| 9 | - <ColorPicker v-model="formValidate.mail"></ColorPicker> | ||
| 10 | - </Form-item> | ||
| 11 | - <Form-item label="城市" prop="city"> | ||
| 12 | - <Select v-model="formValidate.city" placeholder="请选择所在地"> | ||
| 13 | - <Option value="beijing">北京市</Option> | ||
| 14 | - <Option value="shanghai">上海市</Option> | ||
| 15 | - <Option value="shenzhen">深圳市</Option> | ||
| 16 | - </Select> | ||
| 17 | - </Form-item> | ||
| 18 | - <Form-item label="选择日期"> | ||
| 19 | - <Row> | ||
| 20 | - <Col span="11"> | ||
| 21 | - <Form-item prop="date"> | ||
| 22 | - <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker> | ||
| 23 | - </Form-item> | ||
| 24 | - </Col> | ||
| 25 | - <Col span="2" style="text-align: center">-</Col> | ||
| 26 | - <Col span="11"> | ||
| 27 | - <Form-item prop="time"> | ||
| 28 | - <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker> | ||
| 29 | - </Form-item> | ||
| 30 | - </Col> | ||
| 31 | - </Row> | ||
| 32 | - </Form-item> | ||
| 33 | - <Form-item label="性别" prop="gender"> | ||
| 34 | - <Radio-group v-model="formValidate.gender"> | ||
| 35 | - <Radio label="male">男</Radio> | ||
| 36 | - <Radio label="female">女</Radio> | ||
| 37 | - </Radio-group> | ||
| 38 | - </Form-item> | ||
| 39 | - <Form-item label="爱好" prop="interest"> | ||
| 40 | - <Checkbox-group v-model="formValidate.interest"> | ||
| 41 | - <Checkbox label="吃饭"></Checkbox> | ||
| 42 | - <Checkbox label="睡觉"></Checkbox> | ||
| 43 | - <Checkbox label="跑步"></Checkbox> | ||
| 44 | - <Checkbox label="看电影"></Checkbox> | ||
| 45 | - </Checkbox-group> | ||
| 46 | - </Form-item> | ||
| 47 | - <Form-item label="介绍" prop="desc"> | ||
| 48 | - <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | ||
| 49 | - </Form-item> | ||
| 50 | - <Form-item> | ||
| 51 | - <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | ||
| 52 | - <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> | ||
| 53 | - </Form-item> | ||
| 54 | - </Form> | 2 | + <div> |
| 3 | + <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> | ||
| 4 | + <Form-item prop="name"> | ||
| 5 | + <span slot="label"><Icon type="ionic"></Icon></span> | ||
| 6 | + <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete> | ||
| 7 | + </Form-item> | ||
| 8 | + <Form-item label="邮箱" prop="mail"> | ||
| 9 | + <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>--> | ||
| 10 | + <ColorPicker v-model="formValidate.mail"></ColorPicker> | ||
| 11 | + </Form-item> | ||
| 12 | + <Form-item label="城市" prop="city"> | ||
| 13 | + <Select v-model="formValidate.city" placeholder="请选择所在地"> | ||
| 14 | + <Option value="beijing">北京市</Option> | ||
| 15 | + <Option value="shanghai">上海市</Option> | ||
| 16 | + <Option value="shenzhen">深圳市</Option> | ||
| 17 | + </Select> | ||
| 18 | + </Form-item> | ||
| 19 | + <Form-item label="选择日期"> | ||
| 20 | + <Row> | ||
| 21 | + <Col span="11"> | ||
| 22 | + <Form-item prop="date"> | ||
| 23 | + <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker> | ||
| 24 | + </Form-item> | ||
| 25 | + </Col> | ||
| 26 | + <Col span="2" style="text-align: center">-</Col> | ||
| 27 | + <Col span="11"> | ||
| 28 | + <Form-item prop="time"> | ||
| 29 | + <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker> | ||
| 30 | + </Form-item> | ||
| 31 | + </Col> | ||
| 32 | + </Row> | ||
| 33 | + </Form-item> | ||
| 34 | + <Form-item label="性别" prop="gender"> | ||
| 35 | + <Radio-group v-model="formValidate.gender"> | ||
| 36 | + <Radio label="male">男</Radio> | ||
| 37 | + <Radio label="female">女</Radio> | ||
| 38 | + </Radio-group> | ||
| 39 | + </Form-item> | ||
| 40 | + <Form-item label="爱好" prop="interest"> | ||
| 41 | + <Checkbox-group v-model="formValidate.interest"> | ||
| 42 | + <Checkbox label="吃饭"></Checkbox> | ||
| 43 | + <Checkbox label="睡觉"></Checkbox> | ||
| 44 | + <Checkbox label="跑步"></Checkbox> | ||
| 45 | + <Checkbox label="看电影"></Checkbox> | ||
| 46 | + </Checkbox-group> | ||
| 47 | + </Form-item> | ||
| 48 | + <Form-item label="介绍" prop="desc"> | ||
| 49 | + <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | ||
| 50 | + </Form-item> | ||
| 51 | + <Form-item> | ||
| 52 | + <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | ||
| 53 | + <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> | ||
| 54 | + </Form-item> | ||
| 55 | + </Form> | ||
| 56 | + | ||
| 57 | + <div style="margin: 100px"> | ||
| 58 | + <form action="/"> | ||
| 59 | + <Input name="f1"></Input> | ||
| 60 | + <i-switch name="f2" :true-value="1" :false-value="2"></i-switch> | ||
| 61 | + <Select v-model="model1" multiple style="width:200px" name="f3"> | ||
| 62 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
| 63 | + </Select> | ||
| 64 | + <AutoComplete | ||
| 65 | + v-model="value1" | ||
| 66 | + :data="data1" | ||
| 67 | + @on-search="handleSearch1" | ||
| 68 | + placeholder="input here" | ||
| 69 | + name="f4" | ||
| 70 | + style="width:200px"></AutoComplete> | ||
| 71 | + <Slider v-model="value11" name="f5"></Slider> | ||
| 72 | + <DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker> | ||
| 73 | + <TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker> | ||
| 74 | + <Cascader :data="datac" v-model="valuec" name="f8"></Cascader> | ||
| 75 | + <Rate v-model="valuer" name="f9"></Rate> | ||
| 76 | + <ColorPicker v-model="color" name="f10" /> | ||
| 77 | + <button type="submit">test</button> | ||
| 78 | + </form> | ||
| 79 | + </div> | ||
| 80 | + </div> | ||
| 55 | </template> | 81 | </template> |
| 56 | <script> | 82 | <script> |
| 57 | export default { | 83 | export default { |
| 58 | data () { | 84 | data () { |
| 59 | return { | 85 | return { |
| 86 | + color: '#19be6b', | ||
| 87 | + valuer: 3, | ||
| 88 | + valuec: [], | ||
| 89 | + datac: [{ | ||
| 90 | + value: 'beijing', | ||
| 91 | + label: '北京', | ||
| 92 | + children: [ | ||
| 93 | + { | ||
| 94 | + value: 'gugong', | ||
| 95 | + label: '故宫' | ||
| 96 | + }, | ||
| 97 | + { | ||
| 98 | + value: 'tiantan', | ||
| 99 | + label: '天坛' | ||
| 100 | + }, | ||
| 101 | + { | ||
| 102 | + value: 'wangfujing', | ||
| 103 | + label: '王府井' | ||
| 104 | + } | ||
| 105 | + ] | ||
| 106 | + }, { | ||
| 107 | + value: 'jiangsu', | ||
| 108 | + label: '江苏', | ||
| 109 | + children: [ | ||
| 110 | + { | ||
| 111 | + value: 'nanjing', | ||
| 112 | + label: '南京', | ||
| 113 | + children: [ | ||
| 114 | + { | ||
| 115 | + value: 'fuzimiao', | ||
| 116 | + label: '夫子庙', | ||
| 117 | + } | ||
| 118 | + ] | ||
| 119 | + }, | ||
| 120 | + { | ||
| 121 | + value: 'suzhou', | ||
| 122 | + label: '苏州', | ||
| 123 | + children: [ | ||
| 124 | + { | ||
| 125 | + value: 'zhuozhengyuan', | ||
| 126 | + label: '拙政园', | ||
| 127 | + }, | ||
| 128 | + { | ||
| 129 | + value: 'shizilin', | ||
| 130 | + label: '狮子林', | ||
| 131 | + } | ||
| 132 | + ] | ||
| 133 | + } | ||
| 134 | + ], | ||
| 135 | + }], | ||
| 136 | + value1: '', | ||
| 137 | + value11: 25, | ||
| 138 | + data1: [], | ||
| 139 | + cityList: [ | ||
| 140 | + { | ||
| 141 | + value: 'beijing', | ||
| 142 | + label: '北京市' | ||
| 143 | + }, | ||
| 144 | + { | ||
| 145 | + value: 'shanghai', | ||
| 146 | + label: '上海市' | ||
| 147 | + }, | ||
| 148 | + { | ||
| 149 | + value: 'shenzhen', | ||
| 150 | + label: '深圳市' | ||
| 151 | + }, | ||
| 152 | + { | ||
| 153 | + value: 'hangzhou', | ||
| 154 | + label: '杭州市' | ||
| 155 | + }, | ||
| 156 | + { | ||
| 157 | + value: 'nanjing', | ||
| 158 | + label: '南京市' | ||
| 159 | + }, | ||
| 160 | + { | ||
| 161 | + value: 'chongqing', | ||
| 162 | + label: '重庆市' | ||
| 163 | + } | ||
| 164 | + ], | ||
| 165 | + model1: [], | ||
| 60 | name: '', | 166 | name: '', |
| 61 | formValidate: { | 167 | formValidate: { |
| 62 | name: '', | 168 | name: '', |
| @@ -110,6 +216,13 @@ | @@ -110,6 +216,13 @@ | ||
| 110 | }, | 216 | }, |
| 111 | handleReset (name) { | 217 | handleReset (name) { |
| 112 | this.$refs[name].resetFields(); | 218 | this.$refs[name].resetFields(); |
| 219 | + }, | ||
| 220 | + handleSearch1 (value) { | ||
| 221 | + this.data1 = !value ? [] : [ | ||
| 222 | + value, | ||
| 223 | + value + value, | ||
| 224 | + value + value + value | ||
| 225 | + ]; | ||
| 113 | } | 226 | } |
| 114 | } | 227 | } |
| 115 | } | 228 | } |
src/components/auto-complete/auto-complete.vue
| @@ -18,6 +18,7 @@ | @@ -18,6 +18,7 @@ | ||
| 18 | ref="input" | 18 | ref="input" |
| 19 | slot="input" | 19 | slot="input" |
| 20 | v-model="currentValue" | 20 | v-model="currentValue" |
| 21 | + :name="name" | ||
| 21 | :placeholder="placeholder" | 22 | :placeholder="placeholder" |
| 22 | :disabled="disabled" | 23 | :disabled="disabled" |
| 23 | :size="size" | 24 | :size="size" |
| @@ -81,6 +82,9 @@ | @@ -81,6 +82,9 @@ | ||
| 81 | transfer: { | 82 | transfer: { |
| 82 | type: Boolean, | 83 | type: Boolean, |
| 83 | default: false | 84 | default: false |
| 85 | + }, | ||
| 86 | + name: { | ||
| 87 | + type: String | ||
| 84 | } | 88 | } |
| 85 | }, | 89 | }, |
| 86 | data () { | 90 | data () { |
src/components/cascader/cascader.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classes" v-clickoutside="handleClose"> | 2 | <div :class="classes" v-clickoutside="handleClose"> |
| 3 | <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference"> | 3 | <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference"> |
| 4 | + <input type="hidden" :name="name" :value="currentValue"> | ||
| 4 | <slot> | 5 | <slot> |
| 5 | <i-input | 6 | <i-input |
| 6 | ref="input" | 7 | ref="input" |
| @@ -127,6 +128,9 @@ | @@ -127,6 +128,9 @@ | ||
| 127 | transfer: { | 128 | transfer: { |
| 128 | type: Boolean, | 129 | type: Boolean, |
| 129 | default: false | 130 | default: false |
| 131 | + }, | ||
| 132 | + name: { | ||
| 133 | + type: String | ||
| 130 | } | 134 | } |
| 131 | }, | 135 | }, |
| 132 | data () { | 136 | data () { |
src/components/checkbox/checkbox.vue
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | :disabled="disabled" | 9 | :disabled="disabled" |
| 10 | :value="label" | 10 | :value="label" |
| 11 | v-model="model" | 11 | v-model="model" |
| 12 | + :name="name" | ||
| 12 | @change="change"> | 13 | @change="change"> |
| 13 | <input | 14 | <input |
| 14 | v-if="!group" | 15 | v-if="!group" |
| @@ -16,6 +17,7 @@ | @@ -16,6 +17,7 @@ | ||
| 16 | :class="inputClasses" | 17 | :class="inputClasses" |
| 17 | :disabled="disabled" | 18 | :disabled="disabled" |
| 18 | :checked="currentValue" | 19 | :checked="currentValue" |
| 20 | + :name="name" | ||
| 19 | @change="change"> | 21 | @change="change"> |
| 20 | </span> | 22 | </span> |
| 21 | <slot><span v-if="showSlot">{{ label }}</span></slot> | 23 | <slot><span v-if="showSlot">{{ label }}</span></slot> |
| @@ -58,6 +60,9 @@ | @@ -58,6 +60,9 @@ | ||
| 58 | validator (value) { | 60 | validator (value) { |
| 59 | return oneOf(value, ['small', 'large', 'default']); | 61 | return oneOf(value, ['small', 'large', 'default']); |
| 60 | } | 62 | } |
| 63 | + }, | ||
| 64 | + name: { | ||
| 65 | + type: String | ||
| 61 | } | 66 | } |
| 62 | }, | 67 | }, |
| 63 | data () { | 68 | data () { |
src/components/color-picker/color-picker.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classes" v-clickoutside="handleClose"> | 2 | <div :class="classes" v-clickoutside="handleClose"> |
| 3 | <div ref="reference" @click="toggleVisible" :class="wrapClasses"> | 3 | <div ref="reference" @click="toggleVisible" :class="wrapClasses"> |
| 4 | + <input type="hidden" :name="name" :value="currentValue"> | ||
| 4 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> | 5 | <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i> |
| 5 | <div :class="inputClasses"> | 6 | <div :class="inputClasses"> |
| 6 | <div :class="[prefixCls + '-color']"> | 7 | <div :class="[prefixCls + '-color']"> |
| @@ -167,11 +168,15 @@ | @@ -167,11 +168,15 @@ | ||
| 167 | transfer: { | 168 | transfer: { |
| 168 | type: Boolean, | 169 | type: Boolean, |
| 169 | default: false | 170 | default: false |
| 171 | + }, | ||
| 172 | + name: { | ||
| 173 | + type: String | ||
| 170 | } | 174 | } |
| 171 | }, | 175 | }, |
| 172 | data () { | 176 | data () { |
| 173 | return { | 177 | return { |
| 174 | val: _colorChange(this.value), | 178 | val: _colorChange(this.value), |
| 179 | + currentValue: this.value, | ||
| 175 | prefixCls: prefixCls, | 180 | prefixCls: prefixCls, |
| 176 | visible: false, | 181 | visible: false, |
| 177 | disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭 | 182 | disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭 |
| @@ -344,12 +349,14 @@ | @@ -344,12 +349,14 @@ | ||
| 344 | }, | 349 | }, |
| 345 | handleSuccess () { | 350 | handleSuccess () { |
| 346 | const color = this.formatColor; | 351 | const color = this.formatColor; |
| 352 | + this.currentValue = color; | ||
| 347 | this.$emit('input', color); | 353 | this.$emit('input', color); |
| 348 | this.$emit('on-change', color); | 354 | this.$emit('on-change', color); |
| 349 | this.dispatch('FormItem', 'on-form-change', color); | 355 | this.dispatch('FormItem', 'on-form-change', color); |
| 350 | this.handleClose(); | 356 | this.handleClose(); |
| 351 | }, | 357 | }, |
| 352 | handleClear () { | 358 | handleClear () { |
| 359 | + this.currentValue = ''; | ||
| 353 | this.$emit('input', ''); | 360 | this.$emit('input', ''); |
| 354 | this.$emit('on-change', ''); | 361 | this.$emit('on-change', ''); |
| 355 | this.dispatch('FormItem', 'on-form-change', ''); | 362 | this.dispatch('FormItem', 'on-form-change', ''); |
src/components/date-picker/picker.vue
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | :size="size" | 9 | :size="size" |
| 10 | :placeholder="placeholder" | 10 | :placeholder="placeholder" |
| 11 | :value="visualValue" | 11 | :value="visualValue" |
| 12 | + :name="name" | ||
| 12 | @on-input-change="handleInputChange" | 13 | @on-input-change="handleInputChange" |
| 13 | @on-focus="handleFocus" | 14 | @on-focus="handleFocus" |
| 14 | @on-click="handleIconClick" | 15 | @on-click="handleIconClick" |
| @@ -197,6 +198,9 @@ | @@ -197,6 +198,9 @@ | ||
| 197 | transfer: { | 198 | transfer: { |
| 198 | type: Boolean, | 199 | type: Boolean, |
| 199 | default: false | 200 | default: false |
| 201 | + }, | ||
| 202 | + name: { | ||
| 203 | + type: String | ||
| 200 | } | 204 | } |
| 201 | }, | 205 | }, |
| 202 | data () { | 206 | data () { |
src/components/radio/radio.vue
| @@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
| 7 | :class="inputClasses" | 7 | :class="inputClasses" |
| 8 | :disabled="disabled" | 8 | :disabled="disabled" |
| 9 | :checked="currentValue" | 9 | :checked="currentValue" |
| 10 | + :name="name" | ||
| 10 | @change="change"> | 11 | @change="change"> |
| 11 | </span><slot>{{ label }}</slot> | 12 | </span><slot>{{ label }}</slot> |
| 12 | </label> | 13 | </label> |
| @@ -44,6 +45,9 @@ | @@ -44,6 +45,9 @@ | ||
| 44 | validator (value) { | 45 | validator (value) { |
| 45 | return oneOf(value, ['small', 'large', 'default']); | 46 | return oneOf(value, ['small', 'large', 'default']); |
| 46 | } | 47 | } |
| 48 | + }, | ||
| 49 | + name: { | ||
| 50 | + type: String | ||
| 47 | } | 51 | } |
| 48 | }, | 52 | }, |
| 49 | data () { | 53 | data () { |
src/components/rate/rate.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classes" @mouseleave="handleMouseleave"> | 2 | <div :class="classes" @mouseleave="handleMouseleave"> |
| 3 | + <input type="hidden" :name="name" :value="currentValue"> | ||
| 3 | <div | 4 | <div |
| 4 | v-for="item in count" | 5 | v-for="item in count" |
| 5 | :class="starCls(item)" | 6 | :class="starCls(item)" |
| @@ -19,6 +20,7 @@ | @@ -19,6 +20,7 @@ | ||
| 19 | const prefixCls = 'ivu-rate'; | 20 | const prefixCls = 'ivu-rate'; |
| 20 | 21 | ||
| 21 | export default { | 22 | export default { |
| 23 | + name: 'Rate', | ||
| 22 | mixins: [ Locale, Emitter ], | 24 | mixins: [ Locale, Emitter ], |
| 23 | props: { | 25 | props: { |
| 24 | count: { | 26 | count: { |
| @@ -40,6 +42,9 @@ | @@ -40,6 +42,9 @@ | ||
| 40 | showText: { | 42 | showText: { |
| 41 | type: Boolean, | 43 | type: Boolean, |
| 42 | default: false | 44 | default: false |
| 45 | + }, | ||
| 46 | + name: { | ||
| 47 | + type: String | ||
| 43 | } | 48 | } |
| 44 | }, | 49 | }, |
| 45 | data () { | 50 | data () { |
src/components/select/select.vue
| @@ -5,6 +5,7 @@ | @@ -5,6 +5,7 @@ | ||
| 5 | ref="reference" | 5 | ref="reference" |
| 6 | @click="toggleMenu"> | 6 | @click="toggleMenu"> |
| 7 | <slot name="input"> | 7 | <slot name="input"> |
| 8 | + <input type="hidden" :name="name" :value="model"> | ||
| 8 | <div class="ivu-tag" v-for="(item, index) in selectedMultiple"> | 9 | <div class="ivu-tag" v-for="(item, index) in selectedMultiple"> |
| 9 | <span class="ivu-tag-text">{{ item.label }}</span> | 10 | <span class="ivu-tag-text">{{ item.label }}</span> |
| 10 | <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon> | 11 | <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon> |
| @@ -131,6 +132,9 @@ | @@ -131,6 +132,9 @@ | ||
| 131 | autoComplete: { | 132 | autoComplete: { |
| 132 | type: Boolean, | 133 | type: Boolean, |
| 133 | default: false | 134 | default: false |
| 135 | + }, | ||
| 136 | + name: { | ||
| 137 | + type: String | ||
| 134 | } | 138 | } |
| 135 | }, | 139 | }, |
| 136 | data () { | 140 | data () { |
src/components/slider/slider.vue
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | :disabled="disabled" | 9 | :disabled="disabled" |
| 10 | @on-change="handleInputChange"></Input-number> | 10 | @on-change="handleInputChange"></Input-number> |
| 11 | <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick"> | 11 | <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick"> |
| 12 | + <input type="hidden" :name="name" :value="currentValue"> | ||
| 12 | <template v-if="showStops"> | 13 | <template v-if="showStops"> |
| 13 | <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div> | 14 | <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div> |
| 14 | </template> | 15 | </template> |
| @@ -102,6 +103,9 @@ | @@ -102,6 +103,9 @@ | ||
| 102 | validator (value) { | 103 | validator (value) { |
| 103 | return oneOf(value, ['hover', 'always', 'never']); | 104 | return oneOf(value, ['hover', 'always', 'never']); |
| 104 | } | 105 | } |
| 106 | + }, | ||
| 107 | + name: { | ||
| 108 | + type: String | ||
| 105 | } | 109 | } |
| 106 | }, | 110 | }, |
| 107 | data () { | 111 | data () { |
src/components/switch/switch.vue
| 1 | <template> | 1 | <template> |
| 2 | <span :class="wrapClasses" @click="toggle"> | 2 | <span :class="wrapClasses" @click="toggle"> |
| 3 | + <input type="hidden" :name="name" :value="currentValue"> | ||
| 3 | <span :class="innerClasses"> | 4 | <span :class="innerClasses"> |
| 4 | <slot name="open" v-if="currentValue === trueValue"></slot> | 5 | <slot name="open" v-if="currentValue === trueValue"></slot> |
| 5 | <slot name="close" v-if="currentValue === falseValue"></slot> | 6 | <slot name="close" v-if="currentValue === falseValue"></slot> |
| @@ -36,6 +37,9 @@ | @@ -36,6 +37,9 @@ | ||
| 36 | validator (value) { | 37 | validator (value) { |
| 37 | return oneOf(value, ['large', 'small', 'default']); | 38 | return oneOf(value, ['large', 'small', 'default']); |
| 38 | } | 39 | } |
| 40 | + }, | ||
| 41 | + name: { | ||
| 42 | + type: String | ||
| 39 | } | 43 | } |
| 40 | }, | 44 | }, |
| 41 | data () { | 45 | data () { |