Commit acb79ba30ea1c0fd0dd0e006936cd4df0fb0e60c
1 parent
ca131354
fixed #433
Showing
8 changed files
with
97 additions
and
11 deletions
Show diff stats
examples/routers/form.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> | 3 | <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> |
| 4 | - <Form-item prop="name"> | 4 | + <Form-item label-for="autocomplete" prop="name"> |
| 5 | <span slot="label"><Icon type="ionic"></Icon></span> | 5 | <span slot="label"><Icon type="ionic"></Icon></span> |
| 6 | - <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete> | 6 | + <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete> |
| 7 | </Form-item> | 7 | </Form-item> |
| 8 | <Form-item label="邮箱" prop="mail"> | 8 | <Form-item label="邮箱" prop="mail"> |
| 9 | <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>--> | 9 | <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>--> |
| 10 | <ColorPicker v-model="formValidate.mail"></ColorPicker> | 10 | <ColorPicker v-model="formValidate.mail"></ColorPicker> |
| 11 | </Form-item> | 11 | </Form-item> |
| 12 | - <Form-item label="城市" prop="city"> | ||
| 13 | - <Select v-model="formValidate.city" placeholder="请选择所在地"> | 12 | + <Form-item label-for="select" label="城市" prop="city"> |
| 13 | + <Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地"> | ||
| 14 | <Option value="beijing">北京市</Option> | 14 | <Option value="beijing">北京市</Option> |
| 15 | <Option value="shanghai">上海市</Option> | 15 | <Option value="shanghai">上海市</Option> |
| 16 | <Option value="shenzhen">深圳市</Option> | 16 | <Option value="shenzhen">深圳市</Option> |
| 17 | </Select> | 17 | </Select> |
| 18 | </Form-item> | 18 | </Form-item> |
| 19 | + <Form-item label-for="date" label="选择日期" prop="date"> | ||
| 20 | + <Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker> | ||
| 21 | + </Form-item> | ||
| 22 | + <Form-item label-for="cascader" label="级联选择" prop="cascader"> | ||
| 23 | + <Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader> | ||
| 24 | + </Form-item> | ||
| 25 | + | ||
| 26 | + <Form-item label-for="inputnumber" label="数字框" prop="inputnumber"> | ||
| 27 | + <InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber> | ||
| 28 | + </Form-item> | ||
| 29 | + | ||
| 19 | <Form-item label="选择日期"> | 30 | <Form-item label="选择日期"> |
| 20 | <Row> | 31 | <Row> |
| 21 | <Col span="11"> | 32 | <Col span="11"> |
| @@ -45,8 +56,8 @@ | @@ -45,8 +56,8 @@ | ||
| 45 | <Checkbox label="看电影"></Checkbox> | 56 | <Checkbox label="看电影"></Checkbox> |
| 46 | </Checkbox-group> | 57 | </Checkbox-group> |
| 47 | </Form-item> | 58 | </Form-item> |
| 48 | - <Form-item label="介绍" prop="desc"> | ||
| 49 | - <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | 59 | + <Form-item label-for="input" label="介绍" prop="desc"> |
| 60 | + <Input element-id="input" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> | ||
| 50 | </Form-item> | 61 | </Form-item> |
| 51 | <Form-item> | 62 | <Form-item> |
| 52 | <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | 63 | <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> |
| @@ -83,6 +94,53 @@ | @@ -83,6 +94,53 @@ | ||
| 83 | export default { | 94 | export default { |
| 84 | data () { | 95 | data () { |
| 85 | return { | 96 | return { |
| 97 | + dataCascader: [{ | ||
| 98 | + value: 'beijing', | ||
| 99 | + label: '北京', | ||
| 100 | + children: [ | ||
| 101 | + { | ||
| 102 | + value: 'gugong', | ||
| 103 | + label: '故宫' | ||
| 104 | + }, | ||
| 105 | + { | ||
| 106 | + value: 'tiantan', | ||
| 107 | + label: '天坛' | ||
| 108 | + }, | ||
| 109 | + { | ||
| 110 | + value: 'wangfujing', | ||
| 111 | + label: '王府井' | ||
| 112 | + } | ||
| 113 | + ] | ||
| 114 | + }, { | ||
| 115 | + value: 'jiangsu', | ||
| 116 | + label: '江苏', | ||
| 117 | + children: [ | ||
| 118 | + { | ||
| 119 | + value: 'nanjing', | ||
| 120 | + label: '南京', | ||
| 121 | + children: [ | ||
| 122 | + { | ||
| 123 | + value: 'fuzimiao', | ||
| 124 | + label: '夫子庙', | ||
| 125 | + } | ||
| 126 | + ] | ||
| 127 | + }, | ||
| 128 | + { | ||
| 129 | + value: 'suzhou', | ||
| 130 | + label: '苏州', | ||
| 131 | + children: [ | ||
| 132 | + { | ||
| 133 | + value: 'zhuozhengyuan', | ||
| 134 | + label: '拙政园', | ||
| 135 | + }, | ||
| 136 | + { | ||
| 137 | + value: 'shizilin', | ||
| 138 | + label: '狮子林', | ||
| 139 | + } | ||
| 140 | + ] | ||
| 141 | + } | ||
| 142 | + ], | ||
| 143 | + }], | ||
| 86 | color: '#19be6b', | 144 | color: '#19be6b', |
| 87 | valuer: 3, | 145 | valuer: 3, |
| 88 | valuec: [], | 146 | valuec: [], |
| @@ -172,7 +230,9 @@ | @@ -172,7 +230,9 @@ | ||
| 172 | interest: [], | 230 | interest: [], |
| 173 | date: '', | 231 | date: '', |
| 174 | time: '', | 232 | time: '', |
| 175 | - desc: '' | 233 | + desc: '', |
| 234 | + cascader: [], | ||
| 235 | + inputnumber: 1 | ||
| 176 | }, | 236 | }, |
| 177 | ruleValidate: { | 237 | ruleValidate: { |
| 178 | name: [ | 238 | name: [ |
src/components/auto-complete/auto-complete.vue
| @@ -15,6 +15,7 @@ | @@ -15,6 +15,7 @@ | ||
| 15 | :transfer="transfer"> | 15 | :transfer="transfer"> |
| 16 | <slot name="input"> | 16 | <slot name="input"> |
| 17 | <i-input | 17 | <i-input |
| 18 | + :element-id="elementId" | ||
| 18 | ref="input" | 19 | ref="input" |
| 19 | slot="input" | 20 | slot="input" |
| 20 | v-model="currentValue" | 21 | v-model="currentValue" |
| @@ -85,6 +86,9 @@ | @@ -85,6 +86,9 @@ | ||
| 85 | }, | 86 | }, |
| 86 | name: { | 87 | name: { |
| 87 | type: String | 88 | type: String |
| 89 | + }, | ||
| 90 | + elementId: { | ||
| 91 | + type: String | ||
| 88 | } | 92 | } |
| 89 | }, | 93 | }, |
| 90 | data () { | 94 | data () { |
src/components/cascader/cascader.vue
| @@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
| 4 | <input type="hidden" :name="name" :value="currentValue"> | 4 | <input type="hidden" :name="name" :value="currentValue"> |
| 5 | <slot> | 5 | <slot> |
| 6 | <i-input | 6 | <i-input |
| 7 | + :element-id="elementId" | ||
| 7 | ref="input" | 8 | ref="input" |
| 8 | :readonly="!filterable" | 9 | :readonly="!filterable" |
| 9 | :disabled="disabled" | 10 | :disabled="disabled" |
| @@ -131,6 +132,9 @@ | @@ -131,6 +132,9 @@ | ||
| 131 | }, | 132 | }, |
| 132 | name: { | 133 | name: { |
| 133 | type: String | 134 | type: String |
| 135 | + }, | ||
| 136 | + elementId: { | ||
| 137 | + type: String | ||
| 134 | } | 138 | } |
| 135 | }, | 139 | }, |
| 136 | data () { | 140 | data () { |
src/components/date-picker/picker.vue
| @@ -3,6 +3,7 @@ | @@ -3,6 +3,7 @@ | ||
| 3 | <div ref="reference" :class="[prefixCls + '-rel']"> | 3 | <div ref="reference" :class="[prefixCls + '-rel']"> |
| 4 | <slot> | 4 | <slot> |
| 5 | <i-input | 5 | <i-input |
| 6 | + :element-id="elementId" | ||
| 6 | :class="[prefixCls + '-editor']" | 7 | :class="[prefixCls + '-editor']" |
| 7 | :readonly="!editable || readonly" | 8 | :readonly="!editable || readonly" |
| 8 | :disabled="disabled" | 9 | :disabled="disabled" |
| @@ -202,6 +203,9 @@ | @@ -202,6 +203,9 @@ | ||
| 202 | }, | 203 | }, |
| 203 | name: { | 204 | name: { |
| 204 | type: String | 205 | type: String |
| 206 | + }, | ||
| 207 | + elementId: { | ||
| 208 | + type: String | ||
| 205 | } | 209 | } |
| 206 | }, | 210 | }, |
| 207 | data () { | 211 | data () { |
src/components/form/form-item.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classes"> | 2 | <div :class="classes"> |
| 3 | - <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label> | 3 | + <label :class="[prefixCls + '-label']" :for="labelFor" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label> |
| 4 | <div :class="[prefixCls + '-content']" :style="contentStyles"> | 4 | <div :class="[prefixCls + '-content']" :style="contentStyles"> |
| 5 | <slot></slot> | 5 | <slot></slot> |
| 6 | <transition name="fade"> | 6 | <transition name="fade"> |
| @@ -10,8 +10,6 @@ | @@ -10,8 +10,6 @@ | ||
| 10 | </div> | 10 | </div> |
| 11 | </template> | 11 | </template> |
| 12 | <script> | 12 | <script> |
| 13 | - // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue | ||
| 14 | - | ||
| 15 | import AsyncValidator from 'async-validator'; | 13 | import AsyncValidator from 'async-validator'; |
| 16 | import Emitter from '../../mixins/emitter'; | 14 | import Emitter from '../../mixins/emitter'; |
| 17 | 15 | ||
| @@ -70,6 +68,9 @@ | @@ -70,6 +68,9 @@ | ||
| 70 | showMessage: { | 68 | showMessage: { |
| 71 | type: Boolean, | 69 | type: Boolean, |
| 72 | default: true | 70 | default: true |
| 71 | + }, | ||
| 72 | + labelFor: { | ||
| 73 | + type: String | ||
| 73 | } | 74 | } |
| 74 | }, | 75 | }, |
| 75 | data () { | 76 | data () { |
src/components/input-number/input-number.vue
| @@ -16,6 +16,7 @@ | @@ -16,6 +16,7 @@ | ||
| 16 | </div> | 16 | </div> |
| 17 | <div :class="inputWrapClasses"> | 17 | <div :class="inputWrapClasses"> |
| 18 | <input | 18 | <input |
| 19 | + :id="elementId" | ||
| 19 | :class="inputClasses" | 20 | :class="inputClasses" |
| 20 | :disabled="disabled" | 21 | :disabled="disabled" |
| 21 | autocomplete="off" | 22 | autocomplete="off" |
| @@ -101,6 +102,9 @@ | @@ -101,6 +102,9 @@ | ||
| 101 | }, | 102 | }, |
| 102 | precision: { | 103 | precision: { |
| 103 | type: Number | 104 | type: Number |
| 105 | + }, | ||
| 106 | + elementId: { | ||
| 107 | + type: String | ||
| 104 | } | 108 | } |
| 105 | }, | 109 | }, |
| 106 | data () { | 110 | data () { |
src/components/input/input.vue
| @@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
| 7 | <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> | 7 | <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> |
| 8 | </transition> | 8 | </transition> |
| 9 | <input | 9 | <input |
| 10 | + :id="elementId" | ||
| 10 | :autocomplete="autocomplete" | 11 | :autocomplete="autocomplete" |
| 11 | ref="input" | 12 | ref="input" |
| 12 | :type="type" | 13 | :type="type" |
| @@ -30,8 +31,9 @@ | @@ -30,8 +31,9 @@ | ||
| 30 | <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div> | 31 | <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div> |
| 31 | </template> | 32 | </template> |
| 32 | <textarea | 33 | <textarea |
| 33 | - :autocomplete="autocomplete" | ||
| 34 | v-else | 34 | v-else |
| 35 | + :id="elementId" | ||
| 36 | + :autocomplete="autocomplete" | ||
| 35 | ref="textarea" | 37 | ref="textarea" |
| 36 | :class="textareaClasses" | 38 | :class="textareaClasses" |
| 37 | :style="textareaStyles" | 39 | :style="textareaStyles" |
| @@ -119,6 +121,9 @@ | @@ -119,6 +121,9 @@ | ||
| 119 | return oneOf(value, ['on', 'off']); | 121 | return oneOf(value, ['on', 'off']); |
| 120 | }, | 122 | }, |
| 121 | default: 'off' | 123 | default: 'off' |
| 124 | + }, | ||
| 125 | + elementId: { | ||
| 126 | + type: String | ||
| 122 | } | 127 | } |
| 123 | }, | 128 | }, |
| 124 | data () { | 129 | data () { |
src/components/select/select.vue
| @@ -13,6 +13,7 @@ | @@ -13,6 +13,7 @@ | ||
| 13 | <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span> | 13 | <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span> |
| 14 | <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span> | 14 | <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span> |
| 15 | <input | 15 | <input |
| 16 | + :id="elementId" | ||
| 16 | type="text" | 17 | type="text" |
| 17 | v-if="filterable" | 18 | v-if="filterable" |
| 18 | v-model="query" | 19 | v-model="query" |
| @@ -135,6 +136,9 @@ | @@ -135,6 +136,9 @@ | ||
| 135 | }, | 136 | }, |
| 136 | name: { | 137 | name: { |
| 137 | type: String | 138 | type: String |
| 139 | + }, | ||
| 140 | + elementId: { | ||
| 141 | + type: String | ||
| 138 | } | 142 | } |
| 139 | }, | 143 | }, |
| 140 | data () { | 144 | data () { |