other / 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
... ...
README.md
  Show/Hide comments   View file @0632251
... ... @@ -21,7 +21,7 @@
21 21 - [x] Button
22 22 - [x] Icon
23 23 - [x] Input
24   -- [ ] Radio
  24 +- [x] Radio
25 25 - [ ] Checkbox
26 26 - [ ] Switch
27 27 - [ ] Table
... ...
src/components/affix/affix.vue
  Show/Hide comments   View file @0632251
... ... @@ -39,6 +39,7 @@
39 39 }
40 40  
41 41 export default {
  42 + name: 'Affix',
42 43 props: {
43 44 offsetTop: {
44 45 type: Number,
... ...
src/components/button/button-group.vue
  Show/Hide comments   View file @0632251
... ... @@ -9,6 +9,7 @@
9 9 const prefixCls = 'ivu-btn-group';
10 10  
11 11 export default {
  12 + name: 'buttonGroup',
12 13 props: {
13 14 size: {
14 15 validator (value) {
... ...
src/components/button/button.vue
  Show/Hide comments   View file @0632251
... ... @@ -12,6 +12,7 @@
12 12 const prefixCls = 'ivu-btn';
13 13  
14 14 export default {
  15 + name: 'Button',
15 16 components: { Icon },
16 17 props: {
17 18 type: {
... ...
src/components/icon/icon.vue
  Show/Hide comments   View file @0632251
... ... @@ -5,6 +5,7 @@
5 5 const prefixCls = 'ivu-icon';
6 6  
7 7 export default {
  8 + name: 'Icon',
8 9 props: {
9 10 type: String,
10 11 size: [Number, String],
... ...
src/components/input/input.vue
  Show/Hide comments   View file @0632251
... ... @@ -48,6 +48,7 @@
48 48 const prefixCls = 'ivu-input';
49 49  
50 50 export default {
  51 + name: 'Input',
51 52 props: {
52 53 type: {
53 54 validator (value) {
... ...
src/components/radio/radio-group.vue
  Show/Hide comments   View file @0632251
... ... @@ -11,7 +11,7 @@
11 11 export default {
12 12 name: 'radioGroup',
13 13 props: {
14   - model: {
  14 + value: {
15 15 type: [String, Number],
16 16 default: ''
17 17 },
... ... @@ -30,6 +30,11 @@
30 30 default: false
31 31 }
32 32 },
  33 + data () {
  34 + return {
  35 + currentValue: this.value
  36 + }
  37 + },
33 38 computed: {
34 39 classes () {
35 40 return [
... ... @@ -42,27 +47,29 @@
42 47 ];
43 48 }
44 49 },
45   - compiled () {
46   - this.updateModel();
  50 + mounted () {
  51 + this.updateValue();
47 52 },
48 53 methods: {
49   - updateModel () {
50   - const model = this.model;
  54 + updateValue () {
  55 + const value = this.value;
51 56 this.$children.forEach((child) => {
52   - child.selected = model == child.value;
  57 + child.currentValue = value == child.label;
53 58 child.group = true;
54 59 });
55 60 },
56 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 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 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 6 type="radio"
7 7 :class="inputClasses"
8 8 :disabled="disabled"
9   - :checked="selected"
  9 + :checked="currentValue"
10 10 @change="change">
11   - </span><slot>{{ value }}</slot>
  11 + </span><slot>{{ label }}</slot>
12 12 </label>
13 13 </template>
14 14 <script>
15 15 const prefixCls = 'ivu-radio';
16 16  
17 17 export default {
  18 + name: 'Radio',
18 19 props: {
19   - checked: {
  20 + value: {
20 21 type: Boolean,
21 22 default: false
22 23 },
  24 + label: {
  25 + type: [String, Number]
  26 + },
23 27 disabled: {
24 28 type: Boolean,
25 29 default: false
26   - },
27   - value: {
28   - type: [String, Number]
29 30 }
30 31 },
31 32 data () {
32 33 return {
33   - selected: false,
  34 + currentValue: this.value,
34 35 group: false
35 36 };
36 37 },
... ... @@ -40,7 +41,7 @@
40 41 `${prefixCls}-wrapper`,
41 42 {
42 43 [`${prefixCls}-group-item`]: this.group,
43   - [`${prefixCls}-wrapper-checked`]: this.selected,
  44 + [`${prefixCls}-wrapper-checked`]: this.currentValue,
44 45 [`${prefixCls}-wrapper-disabled`]: this.disabled
45 46 }
46 47 ];
... ... @@ -49,7 +50,7 @@
49 50 return [
50 51 `${prefixCls}`,
51 52 {
52   - [`${prefixCls}-checked`]: this.selected,
  53 + [`${prefixCls}-checked`]: this.currentValue,
53 54 [`${prefixCls}-disabled`]: this.disabled
54 55 }
55 56 ];
... ... @@ -61,10 +62,10 @@
61 62 return `${prefixCls}-input`;
62 63 }
63 64 },
64   - ready () {
  65 + mounted () {
65 66 if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
66 67 if (!this.group) {
67   - this.updateModel();
  68 + this.updateValue();
68 69 }
69 70 },
70 71 methods: {
... ... @@ -73,25 +74,27 @@
73 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 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 95 watch: {
93   - checked () {
94   - this.updateModel();
  96 + value () {
  97 + this.updateValue();
95 98 }
96 99 }
97 100 };
... ...
src/index.js
  Show/Hide comments   View file @0632251
... ... @@ -27,7 +27,7 @@ import Input from &#39;./components/input&#39;;
27 27 // import Page from './components/page';
28 28 // import Poptip from './components/poptip';
29 29 // import Progress from './components/progress';
30   -// import Radio from './components/radio';
  30 +import Radio from './components/radio';
31 31 // import Rate from './components/rate';
32 32 // import Slider from './components/slider';
33 33 // import Spin from './components/spin';
... ... @@ -89,8 +89,8 @@ const iview = {
89 89 // Panel: Collapse.Panel,
90 90 // Poptip,
91 91 // Progress,
92   - // Radio,
93   - // RadioGroup: Radio.Group,
  92 + Radio,
  93 + RadioGroup: Radio.Group,
94 94 // Rate,
95 95 Row,
96 96 // iSelect: Select,
... ...
test/app.vue
  Show/Hide comments   View file @0632251
... ... @@ -28,6 +28,7 @@ li + li {
28 28 <li><router-link to="/grid">Grid</router-link></li>
29 29 <li><router-link to="/button">Button</router-link></li>
30 30 <li><router-link to="/input">Input</router-link></li>
  31 + <li><router-link to="/radio">Radio</router-link></li>
31 32 </ul>
32 33 </nav>
33 34 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @0632251
... ... @@ -32,6 +32,10 @@ const router = new VueRouter({
32 32 {
33 33 path: '/input',
34 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 1 <template>
2 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 6 <Icon type="social-apple"></Icon>
6 7 <span>Apple</span>
7 8 </Radio>
8   - <Radio value="android" disabled>
  9 + <Radio label="android">
9 10 <Icon type="social-android"></Icon>
10 11 <span>Android</span>
11 12 </Radio>
12   - <Radio value="windows">
  13 + <Radio label="windows">
13 14 <Icon type="social-windows"></Icon>
14 15 <span>Windows</span>
15 16 </Radio>
16 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 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 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 27 </template>
147 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 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 30 data () {
176 31 return {
177   - single: false,
178   - radio: false,
179   - radioGroup: '段模',
180   - activeKey: [1,2],
181 32 phone: 'apple',
182 33 animal: '爪哇犀牛',
183   - social: ['facebook', 'github'],
184   - disabledSingle: true,
185   - disabledGroup: ['苹果']
  34 + single: false
186 35 }
187 36 },
188   - computed: {
189   -
190   - },
191 37 methods: {
192   - changeGroup (data) {
193   - console.log(data);
194   - },
195   - closed (data) {
  38 + c (data) {
196 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 43 </script>
... ...