radio component

docs/examples-docs/radio.md

@@ -12,11 +12,9 @@ export default {
 
 ### 基础用法
 
-:::demo
 ```html
-<z-radio v-model="radio"></z-radio>
+<z-radio v-model="radio">单选框</z-radio>
 ```
-:::
 
 ### API
 

docs/examples/dialog.vue

@@ -14,7 +14,8 @@
 </template>
 
 <script>
-import { Dialog } from 'src/index';
+import ZanUI from 'src/index';
+let { Dialog } = ZanUI;
 
 export default {
   methods: {

docs/examples/radio.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="page-switch">
+    <h1 class="page-title">Radio</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <z-radio-group v-model="radio1">
+      <z-radio name="1">单选框1</z-radio>
+      <z-radio name="2">单选框2</z-radio>
+    </z-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  },
+
+  watch: {
+    radio1(val) {
+      console.log(val);
+    }
+  }
+};
+</script>

docs/index.js

@@ -5,13 +5,7 @@ import navConfig from './nav.config.json';
 import routes from './router.config';
 import SideNav from './components/side-nav';
 import Mobile from './components/mobile';
-import ZanUI from '../src/index';
 
-import '../packages/zanui-css/src/index.css';
-
-import { Dialog } from '../src/index';
-console.log(Dialog);
-Vue.use(ZanUI);
 Vue.use(VueRouter);
 Vue.component('side-nav', SideNav);
 Vue.component('mobile', Mobile);

packages/radio/src/radio-group.vue

@@ -9,7 +9,14 @@ export default {
   name: 'z-radio-group',
 
   props: {
-    value: [String, Number]
+    value: {},
+    disabled: Boolean
+  },
+
+  watch: {
+    value(value) {
+      this.$emit('change', value);
+    }
   }
 };
 </script>

packages/radio/src/radio.vue

@@ -2,10 +2,15 @@
   <div
     class="z-radio"
     :class="{
-      'is-disabled': disabled
+      'is-disabled': isDisabled
     }">
     <span class="z-radio__input">
-      <input type="radio" class="z-radio__control">
+      <input
+        :value="name"
+        v-model="currentValue"
+        type="radio"
+        class="z-radio__control"
+        :disabled="isDisabled">
       <span class="z-radio__circle"></span>
     </span>
     <span class="z-radio__label">
@@ -21,35 +26,50 @@ export default {
   props: {
     disabled: Boolean,
     value: {},
-    parentGroup: null
+    name: [String, Number]
   },
 
   computed: {
     isGroup() {
-      let parent = this.$parent;
+      return !!this.findRadioGroup()
-      while (parent) {
-        if (parent.$options.name === 'z-radio-group') {
-          this.parentGroup = parent;
-          return true;
-        } else {
-          parent = parent.$parent;
-        }
-      }
-      return false;
     },
 
-    model: {
+    currentValue: {
       get() {
         return this.isGroup ? this.parentGroup.value : this.value;
       },
 
       set(val) {
         if (this.isGroup) {
-
+          this.parentGroup.$emit('input', val);
         } else {
           this.$emit('input', val);
         }
       }
+    },
+
+    isDisabled() {
+      return this.isGroup
+          ? this.parentGroup.disabled || this.disabled
+          : this.disabled;
+    }
+  },
+
+  methods: {
+    findRadioGroup() {
+      if (this.parentGroup) return;
+
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.name === 'z-radio-group') {
+          this.parentGroup = parent;
+          break;
+        } else {
+          parent = parent.$parent;
+        }
+      }
+
+      return this.parentGroup;
     }
   }
 };