other / mew-iview

Commit acb79ba30ea1c0fd0dd0e006936cd4df0fb0e60c

Authored by 梁灏
1 parent ca131354

fixed #433

Showing 8 changed files with 97 additions and 11 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @acb79ba
1 1 <template>
2 2 <div>
3 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 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 7 </Form-item>
8 8 <Form-item label="邮箱" prop="mail">
9 9 <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
10 10 <ColorPicker v-model="formValidate.mail"></ColorPicker>
11 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 14 <Option value="beijing">北京市</Option>
15 15 <Option value="shanghai">上海市</Option>
16 16 <Option value="shenzhen">深圳市</Option>
17 17 </Select>
18 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 30 <Form-item label="选择日期">
20 31 <Row>
21 32 <Col span="11">
... ... @@ -45,8 +56,8 @@
45 56 <Checkbox label="看电影"></Checkbox>
46 57 </Checkbox-group>
47 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 61 </Form-item>
51 62 <Form-item>
52 63 <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
... ... @@ -83,6 +94,53 @@
83 94 export default {
84 95 data () {
85 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 144 color: '#19be6b',
87 145 valuer: 3,
88 146 valuec: [],
... ... @@ -172,7 +230,9 @@
172 230 interest: [],
173 231 date: '',
174 232 time: '',
175   - desc: ''
  233 + desc: '',
  234 + cascader: [],
  235 + inputnumber: 1
176 236 },
177 237 ruleValidate: {
178 238 name: [
... ...
src/components/auto-complete/auto-complete.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -15,6 +15,7 @@
15 15 :transfer="transfer">
16 16 <slot name="input">
17 17 <i-input
  18 + :element-id="elementId"
18 19 ref="input"
19 20 slot="input"
20 21 v-model="currentValue"
... ... @@ -85,6 +86,9 @@
85 86 },
86 87 name: {
87 88 type: String
  89 + },
  90 + elementId: {
  91 + type: String
88 92 }
89 93 },
90 94 data () {
... ...
src/components/cascader/cascader.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -4,6 +4,7 @@
4 4 <input type="hidden" :name="name" :value="currentValue">
5 5 <slot>
6 6 <i-input
  7 + :element-id="elementId"
7 8 ref="input"
8 9 :readonly="!filterable"
9 10 :disabled="disabled"
... ... @@ -131,6 +132,9 @@
131 132 },
132 133 name: {
133 134 type: String
  135 + },
  136 + elementId: {
  137 + type: String
134 138 }
135 139 },
136 140 data () {
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -3,6 +3,7 @@
3 3 <div ref="reference" :class="[prefixCls + '-rel']">
4 4 <slot>
5 5 <i-input
  6 + :element-id="elementId"
6 7 :class="[prefixCls + '-editor']"
7 8 :readonly="!editable || readonly"
8 9 :disabled="disabled"
... ... @@ -202,6 +203,9 @@
202 203 },
203 204 name: {
204 205 type: String
  206 + },
  207 + elementId: {
  208 + type: String
205 209 }
206 210 },
207 211 data () {
... ...
src/components/form/form-item.vue
  Show/Hide comments   View file @acb79ba
1 1 <template>
2 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 4 <div :class="[prefixCls + '-content']" :style="contentStyles">
5 5 <slot></slot>
6 6 <transition name="fade">
... ... @@ -10,8 +10,6 @@
10 10 </div>
11 11 </template>
12 12 <script>
13   - // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
14   -
15 13 import AsyncValidator from 'async-validator';
16 14 import Emitter from '../../mixins/emitter';
17 15  
... ... @@ -70,6 +68,9 @@
70 68 showMessage: {
71 69 type: Boolean,
72 70 default: true
  71 + },
  72 + labelFor: {
  73 + type: String
73 74 }
74 75 },
75 76 data () {
... ...
src/components/input-number/input-number.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -16,6 +16,7 @@
16 16 </div>
17 17 <div :class="inputWrapClasses">
18 18 <input
  19 + :id="elementId"
19 20 :class="inputClasses"
20 21 :disabled="disabled"
21 22 autocomplete="off"
... ... @@ -101,6 +102,9 @@
101 102 },
102 103 precision: {
103 104 type: Number
  105 + },
  106 + elementId: {
  107 + type: String
104 108 }
105 109 },
106 110 data () {
... ...
src/components/input/input.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -7,6 +7,7 @@
7 7 <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
8 8 </transition>
9 9 <input
  10 + :id="elementId"
10 11 :autocomplete="autocomplete"
11 12 ref="input"
12 13 :type="type"
... ... @@ -30,8 +31,9 @@
30 31 <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
31 32 </template>
32 33 <textarea
33   - :autocomplete="autocomplete"
34 34 v-else
  35 + :id="elementId"
  36 + :autocomplete="autocomplete"
35 37 ref="textarea"
36 38 :class="textareaClasses"
37 39 :style="textareaStyles"
... ... @@ -119,6 +121,9 @@
119 121 return oneOf(value, ['on', 'off']);
120 122 },
121 123 default: 'off'
  124 + },
  125 + elementId: {
  126 + type: String
122 127 }
123 128 },
124 129 data () {
... ...
src/components/select/select.vue
  Show/Hide comments   View file @acb79ba
... ... @@ -13,6 +13,7 @@
13 13 <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
14 14 <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
15 15 <input
  16 + :id="elementId"
16 17 type="text"
17 18 v-if="filterable"
18 19 v-model="query"
... ... @@ -135,6 +136,9 @@
135 136 },
136 137 name: {
137 138 type: String
  139 + },
  140 + elementId: {
  141 + type: String
138 142 }
139 143 },
140 144 data () {
... ...