support Radio

support Radio

CHANGE.md

@@ -0,0 +1,6 @@
+### Input
+使用 v-model
+### RadioGroup
+使用 v-model
+### Radio
+value 改为了 label，使用 v-model，废弃 checked

README.md

@@ -21,7 +21,7 @@
 - [x] Button
 - [x] Icon
 - [x] Input
-- [ ] Radio
+- [x] Radio
 - [ ] Checkbox
 - [ ] Switch
 - [ ] Table

src/components/affix/affix.vue

@@ -39,6 +39,7 @@
     }
 
     export default {
+        name: 'Affix',
         props: {
             offsetTop: {
                 type: Number,

src/components/button/button-group.vue

@@ -9,6 +9,7 @@
     const prefixCls = 'ivu-btn-group';
 
     export default {
+        name: 'buttonGroup',
         props: {
             size: {
                 validator (value) {

src/components/button/button.vue

@@ -12,6 +12,7 @@
     const prefixCls = 'ivu-btn';
 
     export default {
+        name: 'Button',
         components: { Icon },
         props: {
             type: {

src/components/icon/icon.vue

@@ -5,6 +5,7 @@
     const prefixCls = 'ivu-icon';
 
     export default {
+        name: 'Icon',
         props: {
             type: String,
             size: [Number, String],

src/components/input/input.vue

@@ -48,6 +48,7 @@
     const prefixCls = 'ivu-input';
 
     export default {
+        name: 'Input',
         props: {
             type: {
                 validator (value) {

src/components/radio/radio-group.vue

@@ -11,7 +11,7 @@
     export default {
         name: 'radioGroup',
         props: {
-            model: {
+            value: {
                 type: [String, Number],
                 default: ''
             },
@@ -30,6 +30,11 @@
                 default: false
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            }
+        },
         computed: {
             classes () {
                 return [
@@ -42,27 +47,29 @@
                 ];
             }
         },
-        compiled () {
-            this.updateModel();
+        mounted () {
+            this.updateValue();
         },
         methods: {
-            updateModel () {
-                const model = this.model;
+            updateValue () {
+                const value = this.value;
                 this.$children.forEach((child) => {
-                    child.selected = model == child.value;
+                    child.currentValue = value == child.label;
                     child.group = true;
                 });
             },
             change (data) {
-                this.model = data.value;
-                this.updateModel();
+                this.currentValue = data.value;
+                this.updateValue();
+                this.$emit('input', data.value);
                 this.$emit('on-change', data.value);
-                this.$dispatch('on-form-change', data.value);
+                // todo 事件
+//                this.$dispatch('on-form-change', data.value);
             }
         },
         watch: {
-            model () {
-                this.updateModel();
+            value () {
+                this.updateValue();
             }
         }
     };

src/components/radio/radio.vue

@@ -6,31 +6,32 @@
                 type="radio"
                 :class="inputClasses"
                 :disabled="disabled"
-                :checked="selected"
+                :checked="currentValue"
                 @change="change">
-        </span><slot>{{ value }}</slot>
+        </span><slot>{{ label }}</slot>
     </label>
 </template>
 <script>
     const prefixCls = 'ivu-radio';
 
     export default {
+        name: 'Radio',
         props: {
-            checked: {
+            value: {
                 type: Boolean,
                 default: false
             },
+            label: {
+                type: [String, Number]
+            },
             disabled: {
                 type: Boolean,
                 default: false
-            },
-            value: {
-                type: [String, Number]
             }
         },
         data () {
             return {
-                selected: false,
+                currentValue: this.value,
                 group: false
             };
         },
@@ -40,7 +41,7 @@
                     `${prefixCls}-wrapper`,
                     {
                         [`${prefixCls}-group-item`]: this.group,
-                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled
                     }
                 ];
@@ -49,7 +50,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-checked`]: this.currentValue,
                         [`${prefixCls}-disabled`]: this.disabled
                     }
                 ];
@@ -61,10 +62,10 @@
                 return `${prefixCls}-input`;
             }
         },
-        ready () {
+        mounted () {
             if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
             if (!this.group) {
-                this.updateModel();
+                this.updateValue();
             }
         },
         methods: {
@@ -73,25 +74,27 @@
                     return false;
                 }
 
-                this.selected = event.target.checked;
-                this.checked = this.selected;
+                const checked = event.target.checked;
+                this.currentValue = checked;
+                this.$emit('input', checked);
+                this.$emit('on-change', checked);
 
-                if (this.group && this.checked) {
+                if (this.group && this.label) {
                     this.$parent.change({
-                        value: this.value,
-                        checked: this.checked
+                        value: this.label,
+                        checked: this.value
                     });
                 }
-
-                if (!this.group) this.$dispatch('on-form-change', this.selected);
+                // todo 事件
+//                if (!this.group) this.$dispatch('on-form-change', checked);
             },
-            updateModel () {
-                this.selected = this.checked;
+            updateValue () {
+                this.currentValue = this.value;
             }
         },
         watch: {
-            checked () {
-                this.updateModel();
+            value () {
+                this.updateValue();
             }
         }
     };

src/index.js

@@ -27,7 +27,7 @@ import Input from './components/input';
 // import Page from './components/page';
 // import Poptip from './components/poptip';
 // import Progress from './components/progress';
-// import Radio from './components/radio';
+import Radio from './components/radio';
 // import Rate from './components/rate';
 // import Slider from './components/slider';
 // import Spin from './components/spin';
@@ -89,8 +89,8 @@ const iview = {
     // Panel: Collapse.Panel,
     // Poptip,
     // Progress,
-    // Radio,
-    // RadioGroup: Radio.Group,
+    Radio,
+    RadioGroup: Radio.Group,
     // Rate,
     Row,
     // iSelect: Select,

test/app.vue

@@ -28,6 +28,7 @@ li + li {
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>
                 <li><router-link to="/input">Input</router-link></li>
+                <li><router-link to="/radio">Radio</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -32,6 +32,10 @@ const router = new VueRouter({
         {
             path: '/input',
             component: require('./routers/input.vue')
+        },
+        {
+            path: '/radio',
+            component: require('./routers/radio.vue')
         }
     ]
 });