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 () {
+        mounted () {
-            this.updateModel();
+            this.updateValue();
         },
         methods: {
-            updateModel () {
+            updateValue () {
-                const model = this.model;
+                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.currentValue = data.value;
-                this.updateModel();
+                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 () {
+            value () {
-                this.updateModel();
+                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;
+                const checked = event.target.checked;
-                this.checked = this.selected;
+                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,
+                        value: this.label,
-                        checked: this.checked
+                        checked: this.value
                     });
                 }
-
+                // todo 事件
-                if (!this.group) this.$dispatch('on-form-change', this.selected);
+//                if (!this.group) this.$dispatch('on-form-change', checked);
             },
-            updateModel () {
+            updateValue () {
-                this.selected = this.checked;
+                this.currentValue = this.value;
             }
         },
         watch: {
-            checked () {
+            value () {
-                this.updateModel();
+                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,
+    Radio,
-    // RadioGroup: Radio.Group,
+    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')
         }
     ]
 });

test/routers/radio.vue

@@ -1,206 +1,43 @@
 <template>
     <div>
-        <Radio-group :model.sync="phone" vertical>
+        <Radio v-model="single" @on-change="c">Radio</Radio>
-            <Radio value="apple">
+        <Radio-group v-model="phone" type="button" @on-change="c">
+            <Radio label="apple">
                 <Icon type="social-apple"></Icon>
                 <span>Apple</span>
             </Radio>
-            <Radio value="android" disabled>
+            <Radio label="android">
                 <Icon type="social-android"></Icon>
                 <span>Android</span>
             </Radio>
-            <Radio value="windows">
+            <Radio label="windows">
                 <Icon type="social-windows"></Icon>
                 <span>Windows</span>
             </Radio>
         </Radio-group>
-        <Radio-group :model.sync="animal">
+        <Radio-group v-model="animal">
-            <Radio value="金斑蝶"></Radio>
+            <Radio label="金斑蝶"></Radio>
-            <Radio value="爪哇犀牛"></Radio>
+            <Radio label="爪哇犀牛"></Radio>
-            <Radio value="印度黑羚"></Radio>
+            <Radio label="印度黑羚"></Radio>
         </Radio-group>
-        <br><br>
+        {{ phone }}
-        <i-button @click="activeKey = '2'">换</i-button>
+        <div @click="phone = 'apple'">apple</div>
+        <div @click="single = true"> single</div>{{ single }}
     </div>
-    <Radio :checked.sync="radio">Radio</Radio>
-    <i-button @click="radio = !radio">change radio</i-button>
-    <br>
-    <br>
-    <Radio-group :model.sync="phone" type="button" vertical>
-        <Radio value="apple">
-            <Icon type="social-apple"></Icon>
-            <span>Apple</span>
-        </Radio>
-        <Radio value="android">
-            <Icon type="social-android"></Icon>
-            <span>Android</span>
-        </Radio>
-        <Radio value="windows">
-            <Icon type="social-windows"></Icon>
-            <span>Windows</span>
-        </Radio>
-    </Radio-group>
-    <Radio-group :model.sync="animal" type="button">
-        <Radio value="金斑蝶"></Radio>
-        <Radio value="爪哇犀牛"></Radio>
-        <Radio value="印度黑羚"></Radio>
-    </Radio-group>
-
-    <Radio-group :model.sync="animal" type="button">
-        <Radio value="金斑蝶" disabled></Radio>
-        <Radio value="爪哇犀牛" disabled></Radio>
-        <Radio value="印度黑羚"></Radio>
-    </Radio-group>
-    <br><br>
-    <Radio-group :model.sync="animal" type="button" size="large">
-        <Radio value="金斑蝶"></Radio>
-        <Radio value="爪哇犀牛"></Radio>
-        <Radio value="印度黑羚"></Radio>
-    </Radio-group>
-    <Radio-group :model.sync="animal" type="button">
-        <Radio value="金斑蝶"></Radio>
-        <Radio value="爪哇犀牛"></Radio>
-        <Radio value="印度黑羚"></Radio>
-    </Radio-group>
-    <Radio-group :model.sync="animal" type="button" size="small">
-        <Radio value="金斑蝶"></Radio>
-        <Radio value="爪哇犀牛"></Radio>
-        <Radio value="印度黑羚"></Radio>
-    </Radio-group>
-    <br><br><br><br>
-    <Checkbox :checked.sync="radio">Checkbox</Checkbox>
-    <br><br>
-    <Checkbox-group :model="social">
-        <Checkbox value="twitter">
-            <Icon type="social-twitter"></Icon>
-            <span>Twitter</span>
-        </Checkbox>
-        <Checkbox value="facebook">
-            <Icon type="social-facebook"></Icon>
-            <span>Facebook</span>
-        </Checkbox>
-        <Checkbox value="github">
-            <Icon type="social-github"></Icon>
-            <span>Github</span>
-        </Checkbox>
-        <Checkbox value="snapchat">
-            <Icon type="social-snapchat"></Icon>
-            <span>Snapchat</span>
-        </Checkbox>
-    </Checkbox-group>
-    <br><br>
-    <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
-    <Checkbox-group :model="disabledGroup">
-        <Checkbox value="香蕉" disabled></Checkbox>
-        <Checkbox value="苹果" disabled></Checkbox>
-        <Checkbox value="西瓜"></Checkbox>
-    </Checkbox-group>
-    <br><br>
-    <Switch @on-change="change"></Switch>
-    <br><br>
-    <Switch>
-        <span slot="open">开</span>
-        <span slot="close">关</span>
-    </Switch>
-    <br><br>
-    <Switch>
-        <Icon type="android-done" slot="open"></Icon>
-        <Icon type="android-close" slot="close"></Icon>
-    </Switch>
-    <Switch disabled></Switch>
-    <Switch size="small"></Switch>
-    <br><br>
-    <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
-    <Input-number :value="2" size="small"></Input-number>
-    <Input-number :value="2"></Input-number>
-    <Input-number :value="2" size="large"></Input-number>
-    <br><br>
-    <Breadcrumb>
-        <Breadcrumb-item href="/">Home</Breadcrumb-item>
-        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
-        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
-    </Breadcrumb>
-    <Breadcrumb>
-        <Breadcrumb-item href="/">
-            <Icon type="ios-home-outline"></Icon> Home
-        </Breadcrumb-item>
-        <Breadcrumb-item href="/components/breadcrumb">
-            <Icon type="social-buffer-outline"></Icon> Components
-        </Breadcrumb-item>
-        <Breadcrumb-item>
-            <Icon type="pound"></Icon> Breadcrumb
-        </Breadcrumb-item>
-    </Breadcrumb>
-    <Breadcrumb separator=">">
-        <Breadcrumb-item href="/">Home</Breadcrumb-item>
-        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
-        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
-    </Breadcrumb>
-    <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
-        <Breadcrumb-item href="/">Home</Breadcrumb-item>
-        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
-        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
-    </Breadcrumb>
-    <br><br>
-    <Checkbox :checked.sync="single"></Checkbox>
 </template>
 <script>
-    import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
-
-    const RadioGroup = Radio.Group;
-    const Panel = Collapse.Panel;
-    const CheckboxGroup = Checkbox.Group;
-    const BreadcrumbItem = Breadcrumb.Item;
-
     export default {
-        components: {
-            Radio,
-            RadioGroup,
-            Alert,
-            Icon,
-            Collapse,
-            Panel,
-            iButton,
-            Checkbox,
-            CheckboxGroup,
-            Switch,
-            InputNumber,
-            Breadcrumb,
-            BreadcrumbItem,
-            LoadingBar
-        },
-        props: {
-
-        },
         data () {
             return {
-                single: false,
-                radio: false,
-                radioGroup: '段模',
-                activeKey: [1,2],
                 phone: 'apple',
                 animal: '爪哇犀牛',
-                social: ['facebook', 'github'],
+                single: false
-                disabledSingle: true,
-                disabledGroup: ['苹果']
             }
-        },
-        computed: {
-
         },
         methods: {
-            changeGroup (data) {
+            c (data) {
-                console.log(data);
-            },
-            closed (data) {
                 console.log(data)
-            },
-            change (status) {
-                console.log(status);
             }
-        },
-        ready () {
-            LoadingBar.start();
         }
     }
 </script>