chenhaodong / mew-iview

Commit 06322514c6dd6d255470952f46719412310f9dd9

Authored by 梁灏
1 parent fc7ef072

support Radio 

support Radio
Showing 13 changed files with 77 additions and 214 deletions   Show diff stats
Inline Side-by-side
CHANGE.md 0 → 100644
  Show/Hide comments   View file @0632251
  1 +### Input
  2 +使用 v-model
  3 +### RadioGroup
  4 +使用 v-model
  5 +### Radio
  6 +value 改为了 label，使用 v-model，废弃 checked
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 - [x] Button 21 - [x] Button
22 - [x] Icon 22 - [x] Icon
23 - [x] Input 23 - [x] Input
24 -- [ ] Radio 24 +- [x] Radio
25 - [ ] Checkbox 25 - [ ] Checkbox
26 - [ ] Switch 26 - [ ] Switch
27 - [ ] Table 27 - [ ] Table
src/components/affix/affix.vue
  Show/Hide comments   View file @0632251
@@ -39,6 +39,7 @@ @@ -39,6 +39,7 @@
39 } 39 }
40 40
41 export default { 41 export default {
  42 + name: 'Affix',
42 props: { 43 props: {
43 offsetTop: { 44 offsetTop: {
44 type: Number, 45 type: Number,
src/components/button/button-group.vue
  Show/Hide comments   View file @0632251
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 const prefixCls = 'ivu-btn-group'; 9 const prefixCls = 'ivu-btn-group';
10 10
11 export default { 11 export default {
  12 + name: 'buttonGroup',
12 props: { 13 props: {
13 size: { 14 size: {
14 validator (value) { 15 validator (value) {
src/components/button/button.vue
  Show/Hide comments   View file @0632251
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 const prefixCls = 'ivu-btn'; 12 const prefixCls = 'ivu-btn';
13 13
14 export default { 14 export default {
  15 + name: 'Button',
15 components: { Icon }, 16 components: { Icon },
16 props: { 17 props: {
17 type: { 18 type: {
src/components/icon/icon.vue
  Show/Hide comments   View file @0632251
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 const prefixCls = 'ivu-icon'; 5 const prefixCls = 'ivu-icon';
6 6
7 export default { 7 export default {
  8 + name: 'Icon',
8 props: { 9 props: {
9 type: String, 10 type: String,
10 size: [Number, String], 11 size: [Number, String],
src/components/input/input.vue
  Show/Hide comments   View file @0632251
@@ -48,6 +48,7 @@ @@ -48,6 +48,7 @@
48 const prefixCls = 'ivu-input'; 48 const prefixCls = 'ivu-input';
49 49
50 export default { 50 export default {
  51 + name: 'Input',
51 props: { 52 props: {
52 type: { 53 type: {
53 validator (value) { 54 validator (value) {
src/components/radio/radio-group.vue
  Show/Hide comments   View file @0632251
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 export default { 11 export default {
12 name: 'radioGroup', 12 name: 'radioGroup',
13 props: { 13 props: {
14 - model: { 14 + value: {
15 type: [String, Number], 15 type: [String, Number],
16 default: '' 16 default: ''
17 }, 17 },
@@ -30,6 +30,11 @@ @@ -30,6 +30,11 @@
30 default: false 30 default: false
31 } 31 }
32 }, 32 },
  33 + data () {
  34 + return {
  35 + currentValue: this.value
  36 + }
  37 + },
33 computed: { 38 computed: {
34 classes () { 39 classes () {
35 return [ 40 return [
@@ -42,27 +47,29 @@ @@ -42,27 +47,29 @@
42 ]; 47 ];
43 } 48 }
44 }, 49 },
45 - compiled () {  
46 - this.updateModel(); 50 + mounted () {
  51 + this.updateValue();
47 }, 52 },
48 methods: { 53 methods: {
49 - updateModel () {  
50 - const model = this.model; 54 + updateValue () {
  55 + const value = this.value;
51 this.$children.forEach((child) => { 56 this.$children.forEach((child) => {
52 - child.selected = model == child.value; 57 + child.currentValue = value == child.label;
53 child.group = true; 58 child.group = true;
54 }); 59 });
55 }, 60 },
56 change (data) { 61 change (data) {
57 - this.model = data.value;  
58 - this.updateModel(); 62 + this.currentValue = data.value;
  63 + this.updateValue();
  64 + this.$emit('input', data.value);
59 this.$emit('on-change', data.value); 65 this.$emit('on-change', data.value);
60 - this.$dispatch('on-form-change', data.value); 66 + // todo 事件
  67 +// this.$dispatch('on-form-change', data.value);
61 } 68 }
62 }, 69 },
63 watch: { 70 watch: {
64 - model () {  
65 - this.updateModel(); 71 + value () {
  72 + this.updateValue();
66 } 73 }
67 } 74 }
68 }; 75 };
src/components/radio/radio.vue
  Show/Hide comments   View file @0632251
@@ -6,31 +6,32 @@ @@ -6,31 +6,32 @@
6 type="radio" 6 type="radio"
7 :class="inputClasses" 7 :class="inputClasses"
8 :disabled="disabled" 8 :disabled="disabled"
9 - :checked="selected" 9 + :checked="currentValue"
10 @change="change"> 10 @change="change">
11 - </span><slot>{{ value }}</slot> 11 + </span><slot>{{ label }}</slot>
12 </label> 12 </label>
13 </template> 13 </template>
14 <script> 14 <script>
15 const prefixCls = 'ivu-radio'; 15 const prefixCls = 'ivu-radio';
16 16
17 export default { 17 export default {
  18 + name: 'Radio',
18 props: { 19 props: {
19 - checked: { 20 + value: {
20 type: Boolean, 21 type: Boolean,
21 default: false 22 default: false
22 }, 23 },
  24 + label: {
  25 + type: [String, Number]
  26 + },
23 disabled: { 27 disabled: {
24 type: Boolean, 28 type: Boolean,
25 default: false 29 default: false
26 - },  
27 - value: {  
28 - type: [String, Number]  
29 } 30 }
30 }, 31 },
31 data () { 32 data () {
32 return { 33 return {
33 - selected: false, 34 + currentValue: this.value,
34 group: false 35 group: false
35 }; 36 };
36 }, 37 },
@@ -40,7 +41,7 @@ @@ -40,7 +41,7 @@
40 `${prefixCls}-wrapper`, 41 `${prefixCls}-wrapper`,
41 { 42 {
42 [`${prefixCls}-group-item`]: this.group, 43 [`${prefixCls}-group-item`]: this.group,
43 - [`${prefixCls}-wrapper-checked`]: this.selected, 44 + [`${prefixCls}-wrapper-checked`]: this.currentValue,
44 [`${prefixCls}-wrapper-disabled`]: this.disabled 45 [`${prefixCls}-wrapper-disabled`]: this.disabled
45 } 46 }
46 ]; 47 ];
@@ -49,7 +50,7 @@ @@ -49,7 +50,7 @@
49 return [ 50 return [
50 `${prefixCls}`, 51 `${prefixCls}`,
51 { 52 {
52 - [`${prefixCls}-checked`]: this.selected, 53 + [`${prefixCls}-checked`]: this.currentValue,
53 [`${prefixCls}-disabled`]: this.disabled 54 [`${prefixCls}-disabled`]: this.disabled
54 } 55 }
55 ]; 56 ];
@@ -61,10 +62,10 @@ @@ -61,10 +62,10 @@
61 return `${prefixCls}-input`; 62 return `${prefixCls}-input`;
62 } 63 }
63 }, 64 },
64 - ready () { 65 + mounted () {
65 if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true; 66 if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
66 if (!this.group) { 67 if (!this.group) {
67 - this.updateModel(); 68 + this.updateValue();
68 } 69 }
69 }, 70 },
70 methods: { 71 methods: {
@@ -73,25 +74,27 @@ @@ -73,25 +74,27 @@
73 return false; 74 return false;
74 } 75 }
75 76
76 - this.selected = event.target.checked;  
77 - this.checked = this.selected; 77 + const checked = event.target.checked;
  78 + this.currentValue = checked;
  79 + this.$emit('input', checked);
  80 + this.$emit('on-change', checked);
78 81
79 - if (this.group && this.checked) { 82 + if (this.group && this.label) {
80 this.$parent.change({ 83 this.$parent.change({
81 - value: this.value,  
82 - checked: this.checked 84 + value: this.label,
  85 + checked: this.value
83 }); 86 });
84 } 87 }
85 -  
86 - if (!this.group) this.$dispatch('on-form-change', this.selected); 88 + // todo 事件
  89 +// if (!this.group) this.$dispatch('on-form-change', checked);
87 }, 90 },
88 - updateModel () {  
89 - this.selected = this.checked; 91 + updateValue () {
  92 + this.currentValue = this.value;
90 } 93 }
91 }, 94 },
92 watch: { 95 watch: {
93 - checked () {  
94 - this.updateModel(); 96 + value () {
  97 + this.updateValue();
95 } 98 }
96 } 99 }
97 }; 100 };
@@ -27,7 +27,7 @@ import Input from &#39;./components/input&#39;; @@ -27,7 +27,7 @@ import Input from &#39;./components/input&#39;;
27 // import Page from './components/page'; 27 // import Page from './components/page';
28 // import Poptip from './components/poptip'; 28 // import Poptip from './components/poptip';
29 // import Progress from './components/progress'; 29 // import Progress from './components/progress';
30 -// import Radio from './components/radio'; 30 +import Radio from './components/radio';
31 // import Rate from './components/rate'; 31 // import Rate from './components/rate';
32 // import Slider from './components/slider'; 32 // import Slider from './components/slider';
33 // import Spin from './components/spin'; 33 // import Spin from './components/spin';
@@ -89,8 +89,8 @@ const iview = { @@ -89,8 +89,8 @@ const iview = {
89 // Panel: Collapse.Panel, 89 // Panel: Collapse.Panel,
90 // Poptip, 90 // Poptip,
91 // Progress, 91 // Progress,
92 - // Radio,  
93 - // RadioGroup: Radio.Group, 92 + Radio,
  93 + RadioGroup: Radio.Group,
94 // Rate, 94 // Rate,
95 Row, 95 Row,
96 // iSelect: Select, 96 // iSelect: Select,
@@ -28,6 +28,7 @@ li + li { @@ -28,6 +28,7 @@ li + li {
28 <li><router-link to="/grid">Grid</router-link></li> 28 <li><router-link to="/grid">Grid</router-link></li>
29 <li><router-link to="/button">Button</router-link></li> 29 <li><router-link to="/button">Button</router-link></li>
30 <li><router-link to="/input">Input</router-link></li> 30 <li><router-link to="/input">Input</router-link></li>
  31 + <li><router-link to="/radio">Radio</router-link></li>
31 </ul> 32 </ul>
32 </nav> 33 </nav>
33 <router-view></router-view> 34 <router-view></router-view>
@@ -32,6 +32,10 @@ const router = new VueRouter({ @@ -32,6 +32,10 @@ const router = new VueRouter({
32 { 32 {
33 path: '/input', 33 path: '/input',
34 component: require('./routers/input.vue') 34 component: require('./routers/input.vue')
  35 + },
  36 + {
  37 + path: '/radio',
  38 + component: require('./routers/radio.vue')
35 } 39 }
36 ] 40 ]
37 }); 41 });
test/routers/radio.vue
  Show/Hide comments   View file @0632251
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Radio-group :model.sync="phone" vertical>  
4 - <Radio value="apple"> 3 + <Radio v-model="single" @on-change="c">Radio</Radio>
  4 + <Radio-group v-model="phone" type="button" @on-change="c">
  5 + <Radio label="apple">
5 <Icon type="social-apple"></Icon> 6 <Icon type="social-apple"></Icon>
6 <span>Apple</span> 7 <span>Apple</span>
7 </Radio> 8 </Radio>
8 - <Radio value="android" disabled> 9 + <Radio label="android">
9 <Icon type="social-android"></Icon> 10 <Icon type="social-android"></Icon>
10 <span>Android</span> 11 <span>Android</span>
11 </Radio> 12 </Radio>
12 - <Radio value="windows"> 13 + <Radio label="windows">
13 <Icon type="social-windows"></Icon> 14 <Icon type="social-windows"></Icon>
14 <span>Windows</span> 15 <span>Windows</span>
15 </Radio> 16 </Radio>
16 </Radio-group> 17 </Radio-group>
17 - <Radio-group :model.sync="animal">  
18 - <Radio value="金斑蝶"></Radio>  
19 - <Radio value="爪哇犀牛"></Radio>  
20 - <Radio value="印度黑羚"></Radio> 18 + <Radio-group v-model="animal">
  19 + <Radio label="金斑蝶"></Radio>
  20 + <Radio label="爪哇犀牛"></Radio>
  21 + <Radio label="印度黑羚"></Radio>
21 </Radio-group> 22 </Radio-group>
22 - <br><br>  
23 - <i-button @click="activeKey = '2'">换</i-button> 23 + {{ phone }}
  24 + <div @click="phone = 'apple'">apple</div>
  25 + <div @click="single = true"> single</div>{{ single }}
24 </div> 26 </div>
25 - <Radio :checked.sync="radio">Radio</Radio>  
26 - <i-button @click="radio = !radio">change radio</i-button>  
27 - <br>  
28 - <br>  
29 - <Radio-group :model.sync="phone" type="button" vertical>  
30 - <Radio value="apple">  
31 - <Icon type="social-apple"></Icon>  
32 - <span>Apple</span>  
33 - </Radio>  
34 - <Radio value="android">  
35 - <Icon type="social-android"></Icon>  
36 - <span>Android</span>  
37 - </Radio>  
38 - <Radio value="windows">  
39 - <Icon type="social-windows"></Icon>  
40 - <span>Windows</span>  
41 - </Radio>  
42 - </Radio-group>  
43 - <Radio-group :model.sync="animal" type="button">  
44 - <Radio value="金斑蝶"></Radio>  
45 - <Radio value="爪哇犀牛"></Radio>  
46 - <Radio value="印度黑羚"></Radio>  
47 - </Radio-group>  
48 -  
49 - <Radio-group :model.sync="animal" type="button">  
50 - <Radio value="金斑蝶" disabled></Radio>  
51 - <Radio value="爪哇犀牛" disabled></Radio>  
52 - <Radio value="印度黑羚"></Radio>  
53 - </Radio-group>  
54 - <br><br>  
55 - <Radio-group :model.sync="animal" type="button" size="large">  
56 - <Radio value="金斑蝶"></Radio>  
57 - <Radio value="爪哇犀牛"></Radio>  
58 - <Radio value="印度黑羚"></Radio>  
59 - </Radio-group>  
60 - <Radio-group :model.sync="animal" type="button">  
61 - <Radio value="金斑蝶"></Radio>  
62 - <Radio value="爪哇犀牛"></Radio>  
63 - <Radio value="印度黑羚"></Radio>  
64 - </Radio-group>  
65 - <Radio-group :model.sync="animal" type="button" size="small">  
66 - <Radio value="金斑蝶"></Radio>  
67 - <Radio value="爪哇犀牛"></Radio>  
68 - <Radio value="印度黑羚"></Radio>  
69 - </Radio-group>  
70 - <br><br><br><br>  
71 - <Checkbox :checked.sync="radio">Checkbox</Checkbox>  
72 - <br><br>  
73 - <Checkbox-group :model="social">  
74 - <Checkbox value="twitter">  
75 - <Icon type="social-twitter"></Icon>  
76 - <span>Twitter</span>  
77 - </Checkbox>  
78 - <Checkbox value="facebook">  
79 - <Icon type="social-facebook"></Icon>  
80 - <span>Facebook</span>  
81 - </Checkbox>  
82 - <Checkbox value="github">  
83 - <Icon type="social-github"></Icon>  
84 - <span>Github</span>  
85 - </Checkbox>  
86 - <Checkbox value="snapchat">  
87 - <Icon type="social-snapchat"></Icon>  
88 - <span>Snapchat</span>  
89 - </Checkbox>  
90 - </Checkbox-group>  
91 - <br><br>  
92 - <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>  
93 - <Checkbox-group :model="disabledGroup">  
94 - <Checkbox value="香蕉" disabled></Checkbox>  
95 - <Checkbox value="苹果" disabled></Checkbox>  
96 - <Checkbox value="西瓜"></Checkbox>  
97 - </Checkbox-group>  
98 - <br><br>  
99 - <Switch @on-change="change"></Switch>  
100 - <br><br>  
101 - <Switch>  
102 - <span slot="open">开</span>  
103 - <span slot="close">关</span>  
104 - </Switch>  
105 - <br><br>  
106 - <Switch>  
107 - <Icon type="android-done" slot="open"></Icon>  
108 - <Icon type="android-close" slot="close"></Icon>  
109 - </Switch>  
110 - <Switch disabled></Switch>  
111 - <Switch size="small"></Switch>  
112 - <br><br>  
113 - <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>  
114 - <Input-number :value="2" size="small"></Input-number>  
115 - <Input-number :value="2"></Input-number>  
116 - <Input-number :value="2" size="large"></Input-number>  
117 - <br><br>  
118 - <Breadcrumb>  
119 - <Breadcrumb-item href="/">Home</Breadcrumb-item>  
120 - <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>  
121 - <Breadcrumb-item>Breadcrumb</Breadcrumb-item>  
122 - </Breadcrumb>  
123 - <Breadcrumb>  
124 - <Breadcrumb-item href="/">  
125 - <Icon type="ios-home-outline"></Icon> Home  
126 - </Breadcrumb-item>  
127 - <Breadcrumb-item href="/components/breadcrumb">  
128 - <Icon type="social-buffer-outline"></Icon> Components  
129 - </Breadcrumb-item>  
130 - <Breadcrumb-item>  
131 - <Icon type="pound"></Icon> Breadcrumb  
132 - </Breadcrumb-item>  
133 - </Breadcrumb>  
134 - <Breadcrumb separator=">">  
135 - <Breadcrumb-item href="/">Home</Breadcrumb-item>  
136 - <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>  
137 - <Breadcrumb-item>Breadcrumb</Breadcrumb-item>  
138 - </Breadcrumb>  
139 - <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">  
140 - <Breadcrumb-item href="/">Home</Breadcrumb-item>  
141 - <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>  
142 - <Breadcrumb-item>Breadcrumb</Breadcrumb-item>  
143 - </Breadcrumb>  
144 - <br><br>  
145 - <Checkbox :checked.sync="single"></Checkbox>  
146 </template> 27 </template>
147 <script> 28 <script>
148 - import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';  
149 -  
150 - const RadioGroup = Radio.Group;  
151 - const Panel = Collapse.Panel;  
152 - const CheckboxGroup = Checkbox.Group;  
153 - const BreadcrumbItem = Breadcrumb.Item;  
154 -  
155 export default { 29 export default {
156 - components: {  
157 - Radio,  
158 - RadioGroup,  
159 - Alert,  
160 - Icon,  
161 - Collapse,  
162 - Panel,  
163 - iButton,  
164 - Checkbox,  
165 - CheckboxGroup,  
166 - Switch,  
167 - InputNumber,  
168 - Breadcrumb,  
169 - BreadcrumbItem,  
170 - LoadingBar  
171 - },  
172 - props: {  
173 -  
174 - },  
175 data () { 30 data () {
176 return { 31 return {
177 - single: false,  
178 - radio: false,  
179 - radioGroup: '段模',  
180 - activeKey: [1,2],  
181 phone: 'apple', 32 phone: 'apple',
182 animal: '爪哇犀牛', 33 animal: '爪哇犀牛',
183 - social: ['facebook', 'github'],  
184 - disabledSingle: true,  
185 - disabledGroup: ['苹果'] 34 + single: false
186 } 35 }
187 }, 36 },
188 - computed: {  
189 -  
190 - },  
191 methods: { 37 methods: {
192 - changeGroup (data) {  
193 - console.log(data);  
194 - },  
195 - closed (data) { 38 + c (data) {
196 console.log(data) 39 console.log(data)
197 - },  
198 - change (status) {  
199 - console.log(status);  
200 } 40 }
201 - },  
202 - ready () {  
203 - LoadingBar.start();  
204 } 41 }
205 } 42 }
206 </script> 43 </script>