radio component

docs/examples-docs/radio.md

@@ -13,10 +13,64 @@ export default {
 ### 基础用法
 
 ```html
-<z-radio v-model="radio">单选框</z-radio>
+<z-radio name="1" v-model="radio1">单选框1</z-radio>
+<z-radio name="2" v-model="radio1">单选框2</z-radio>
+
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  }
+};
+</script>
 ```
 
-### API
+### 禁用状态
+
+```html
+<z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
+<z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
+
+<script>
+export default {
+  data() {
+    return {
+      radio2: '2'
+    }
+  }
+};
+</script>
+```
+
+### radio组
+
+```html
+<z-radio-group v-model="radio3">
+  <z-radio name="1">单选框1</z-radio>
+  <z-radio name="2">单选框2</z-radio>
+</z-radio-group>
+
+<script>
+export default {
+  data() {
+    return {
+      radio3: '1'
+    }
+  }
+};
+</script>
+```
+
+### Radio API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+
+### RadioGroup API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|

docs/examples/radio.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="page-switch">
+  <div class="page-radio">
     <h1 class="page-title">Radio</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <z-radio-group v-model="radio1">
+    <z-radio name="1" v-model="radio1">单选框1</z-radio>
+    <z-radio name="2" v-model="radio1">单选框2</z-radio>
+
+    <h2 class="page-sub-title">禁用状态</h2>
+    <z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
+    <z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
+
+    <h2 class="page-sub-title">radio组</h2>
+    <z-radio-group v-model="radio3">
       <z-radio name="1">单选框1</z-radio>
       <z-radio name="2">单选框2</z-radio>
     </z-radio-group>
@@ -14,14 +22,16 @@
 export default {
   data() {
     return {
-      radio1: '1'
+      radio1: '1',
-    }
+      radio2: '2',
-  },
+      radio3: '1'
-
-  watch: {
-    radio1(val) {
-      console.log(val);
     }
   }
 };
 </script>
+
+<style>
+.page-radio {
+  padding: 0 15px;
+}
+</style>

packages/radio/src/radio.vue

@@ -11,7 +11,11 @@
         type="radio"
         class="z-radio__control"
         :disabled="isDisabled">
-      <span class="z-radio__circle"></span>
+      <span class="zui-icon" :class="{
+        'zui-icon-checked': currentValue === name,
+        'zui-icon-check': currentValue !== name
+      }">
+      </span>
     </span>
     <span class="z-radio__label">
       <slot></slot>

packages/zanui-css/src/radio.css

@@ -1,5 +1,46 @@
+@import "./common/var.css";
+
 @component-namespace z {
   @b radio {
+    margin: 10px 0;
 
+    @when disabled {
+      .zui-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zui-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zui-icon-checked {
+      color: $c-green;
+    }
+
+    .zui-icon-check {
+      color: $c-gray-dark;
+    }
   }
 }