other / mew-iview

Commit 0460a1e811edb39051cacc686d00931cceaf0bcb

Authored by 梁灏
1 parent e7ad4154

fixed #812

Showing 11 changed files with 211 additions and 53 deletions   Show diff stats
Inline Side-by-side
examples/routers/form.vue
  Show/Hide comments   View file @0460a1e
1 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 81 </template>
56 82 <script>
57 83 export default {
58 84 data () {
59 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 166 name: '',
61 167 formValidate: {
62 168 name: '',
... ... @@ -110,6 +216,13 @@
110 216 },
111 217 handleReset (name) {
112 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
  Show/Hide comments   View file @0460a1e
... ... @@ -18,6 +18,7 @@
18 18 ref="input"
19 19 slot="input"
20 20 v-model="currentValue"
  21 + :name="name"
21 22 :placeholder="placeholder"
22 23 :disabled="disabled"
23 24 :size="size"
... ... @@ -81,6 +82,9 @@
81 82 transfer: {
82 83 type: Boolean,
83 84 default: false
  85 + },
  86 + name: {
  87 + type: String
84 88 }
85 89 },
86 90 data () {
... ...
src/components/cascader/cascader.vue
  Show/Hide comments   View file @0460a1e
1 1 <template>
2 2 <div :class="classes" v-clickoutside="handleClose">
3 3 <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
  4 + <input type="hidden" :name="name" :value="currentValue">
4 5 <slot>
5 6 <i-input
6 7 ref="input"
... ... @@ -127,6 +128,9 @@
127 128 transfer: {
128 129 type: Boolean,
129 130 default: false
  131 + },
  132 + name: {
  133 + type: String
130 134 }
131 135 },
132 136 data () {
... ...
src/components/checkbox/checkbox.vue
  Show/Hide comments   View file @0460a1e
... ... @@ -9,6 +9,7 @@
9 9 :disabled="disabled"
10 10 :value="label"
11 11 v-model="model"
  12 + :name="name"
12 13 @change="change">
13 14 <input
14 15 v-if="!group"
... ... @@ -16,6 +17,7 @@
16 17 :class="inputClasses"
17 18 :disabled="disabled"
18 19 :checked="currentValue"
  20 + :name="name"
19 21 @change="change">
20 22 </span>
21 23 <slot><span v-if="showSlot">{{ label }}</span></slot>
... ... @@ -58,6 +60,9 @@
58 60 validator (value) {
59 61 return oneOf(value, ['small', 'large', 'default']);
60 62 }
  63 + },
  64 + name: {
  65 + type: String
61 66 }
62 67 },
63 68 data () {
... ...
src/components/color-picker/color-picker.vue
  Show/Hide comments   View file @0460a1e
1 1 <template>
2 2 <div :class="classes" v-clickoutside="handleClose">
3 3 <div ref="reference" @click="toggleVisible" :class="wrapClasses">
  4 + <input type="hidden" :name="name" :value="currentValue">
4 5 <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
5 6 <div :class="inputClasses">
6 7 <div :class="[prefixCls + '-color']">
... ... @@ -167,11 +168,15 @@
167 168 transfer: {
168 169 type: Boolean,
169 170 default: false
  171 + },
  172 + name: {
  173 + type: String
170 174 }
171 175 },
172 176 data () {
173 177 return {
174 178 val: _colorChange(this.value),
  179 + currentValue: this.value,
175 180 prefixCls: prefixCls,
176 181 visible: false,
177 182 disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
... ... @@ -344,12 +349,14 @@
344 349 },
345 350 handleSuccess () {
346 351 const color = this.formatColor;
  352 + this.currentValue = color;
347 353 this.$emit('input', color);
348 354 this.$emit('on-change', color);
349 355 this.dispatch('FormItem', 'on-form-change', color);
350 356 this.handleClose();
351 357 },
352 358 handleClear () {
  359 + this.currentValue = '';
353 360 this.$emit('input', '');
354 361 this.$emit('on-change', '');
355 362 this.dispatch('FormItem', 'on-form-change', '');
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @0460a1e
... ... @@ -9,6 +9,7 @@
9 9 :size="size"
10 10 :placeholder="placeholder"
11 11 :value="visualValue"
  12 + :name="name"
12 13 @on-input-change="handleInputChange"
13 14 @on-focus="handleFocus"
14 15 @on-click="handleIconClick"
... ... @@ -197,6 +198,9 @@
197 198 transfer: {
198 199 type: Boolean,
199 200 default: false
  201 + },
  202 + name: {
  203 + type: String
200 204 }
201 205 },
202 206 data () {
... ...
src/components/radio/radio.vue
  Show/Hide comments   View file @0460a1e
... ... @@ -7,6 +7,7 @@
7 7 :class="inputClasses"
8 8 :disabled="disabled"
9 9 :checked="currentValue"
  10 + :name="name"
10 11 @change="change">
11 12 </span><slot>{{ label }}</slot>
12 13 </label>
... ... @@ -44,6 +45,9 @@
44 45 validator (value) {
45 46 return oneOf(value, ['small', 'large', 'default']);
46 47 }
  48 + },
  49 + name: {
  50 + type: String
47 51 }
48 52 },
49 53 data () {
... ...
src/components/rate/rate.vue
  Show/Hide comments   View file @0460a1e
1 1 <template>
2 2 <div :class="classes" @mouseleave="handleMouseleave">
  3 + <input type="hidden" :name="name" :value="currentValue">
3 4 <div
4 5 v-for="item in count"
5 6 :class="starCls(item)"
... ... @@ -19,6 +20,7 @@
19 20 const prefixCls = 'ivu-rate';
20 21  
21 22 export default {
  23 + name: 'Rate',
22 24 mixins: [ Locale, Emitter ],
23 25 props: {
24 26 count: {
... ... @@ -40,6 +42,9 @@
40 42 showText: {
41 43 type: Boolean,
42 44 default: false
  45 + },
  46 + name: {
  47 + type: String
43 48 }
44 49 },
45 50 data () {
... ...
src/components/select/select.vue
  Show/Hide comments   View file @0460a1e
... ... @@ -5,6 +5,7 @@
5 5 ref="reference"
6 6 @click="toggleMenu">
7 7 <slot name="input">
  8 + <input type="hidden" :name="name" :value="model">
8 9 <div class="ivu-tag" v-for="(item, index) in selectedMultiple">
9 10 <span class="ivu-tag-text">{{ item.label }}</span>
10 11 <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
... ... @@ -131,6 +132,9 @@
131 132 autoComplete: {
132 133 type: Boolean,
133 134 default: false
  135 + },
  136 + name: {
  137 + type: String
134 138 }
135 139 },
136 140 data () {
... ...
src/components/slider/slider.vue
  Show/Hide comments   View file @0460a1e
... ... @@ -9,6 +9,7 @@
9 9 :disabled="disabled"
10 10 @on-change="handleInputChange"></Input-number>
11 11 <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
  12 + <input type="hidden" :name="name" :value="currentValue">
12 13 <template v-if="showStops">
13 14 <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
14 15 </template>
... ... @@ -102,6 +103,9 @@
102 103 validator (value) {
103 104 return oneOf(value, ['hover', 'always', 'never']);
104 105 }
  106 + },
  107 + name: {
  108 + type: String
105 109 }
106 110 },
107 111 data () {
... ...
src/components/switch/switch.vue
  Show/Hide comments   View file @0460a1e
1 1 <template>
2 2 <span :class="wrapClasses" @click="toggle">
  3 + <input type="hidden" :name="name" :value="currentValue">
3 4 <span :class="innerClasses">
4 5 <slot name="open" v-if="currentValue === trueValue"></slot>
5 6 <slot name="close" v-if="currentValue === falseValue"></slot>
... ... @@ -36,6 +37,9 @@
36 37 validator (value) {
37 38 return oneOf(value, ['large', 'small', 'default']);
38 39 }
  40 + },
  41 + name: {
  42 + type: String
39 43 }
40 44 },
41 45 data () {
... ...