Merge branch 'master' into hotfix/switch_loading_fix

docs/examples-docs/radio.md

@@ -12,13 +12,65 @@ export default {
 
 ### 基础用法
 
-:::demo
 ```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>
-:::
 
-### API
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  }
+};
+</script>
+```
+
+### 禁用状态
+
+```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/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,37 @@
+<template>
+  <div class="page-radio">
+    <h1 class="page-title">Radio</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1'
+    }
+  }
+};
+</script>
+
+<style>
+.page-radio {
+  padding: 0 15px;
+}
+</style>

docs/index.js

@@ -5,11 +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';
-
-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,11 +2,20 @@
   <div
     class="z-radio"
     :class="{
-      'is-disabled': disabled
+      'is-disabled': isDisabled
     }">
     <span class="z-radio__input">
-      <input type="radio" class="z-radio__control">
+      <input
-      <span class="z-radio__circle"></span>
+        :value="name"
+        v-model="currentValue"
+        type="radio"
+        class="z-radio__control"
+        :disabled="isDisabled">
+      <span class="zui-icon" :class="{
+        'zui-icon-checked': currentValue === name,
+        'zui-icon-check': currentValue !== name
+      }">
+      </span>
     </span>
     <span class="z-radio__label">
       <slot></slot>
@@ -21,35 +30,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;
     }
   }
 };

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;
+    }
   }
 }

src/mixins/popup/index.js

@@ -85,7 +85,6 @@ export default {
 
       const dom = getDOM(this.$el);
       const props = merge({}, this, options);
-      const overlay = props.overlay;
       const zIndex = props.zIndex;
 
       // 如果属性中传入了`zIndex`，则覆盖`PopupManager`中对应的`zIndex`
@@ -94,7 +93,7 @@ export default {
       }
 
       // 如果显示遮罩层
-      if (overlay) {
+      if (this.overlay) {
         if (this.closing) {
           PopupManager.closeModal(this._popupId);
           this.closing = false;
@@ -102,7 +101,7 @@ export default {
         PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom);
 
         // 如果滚动时需要锁定
-        if (props.lockOnScroll) {
+        if (this.lockOnScroll) {
           // 将原来的`bodyOverflow`存起来
           if (!this.bodyOverflow) {
             this.bodyOverflow = document.body.style.overflow;