update

sites/doc/asset/css/style-blue.scss

@@ -4,20 +4,20 @@
     h1 {
         font-size: 28px;
         font-weight: 700;
-        margin:10px 0;
+        margin: 10px 0;
         color: #333333;
     }
     p {
         font-size: 14px;
-        margin:10px 0;
+        margin: 10px 0;
     }
     h1+p,
     h1+p+p,
     h1+p+p {
         color: #333333;
-    } 
+    }
     h2 {
-        margin:30px 0 15px;
+        margin: 30px 0 15px;
         font-size: 22px;
         font-weight: 400;
         color: #333333;
@@ -25,8 +25,9 @@
     h2+p,
     h2+p+p {
         color: #3F4449;
-    } 
+    }
     h3 {
+        margin: 20px 0 10px;
         font-size: 18px;
         font-weight: 400;
         color: #333333;
@@ -34,11 +35,11 @@
     h3+p,
     h3+p+p {
         color: #3F4449;
-    } 
+    }
     h4 {
         font-size: 14px;
         font-weight: normal;
-        margin:15px 0;
+        margin: 15px 0;
         color: #666666;
     }
     h4+p,
@@ -48,8 +49,7 @@
     }
     h4+p::nth-child(n) {
         color: #666666;
-    } 
-
+    }
     blockquote {
         padding: 0;
         margin: 0;
@@ -68,22 +68,22 @@
             font-style: normal;
         }
     }
-    ul {       
+    ul {
         border-radius: 3px;
-        padding: 5px 20px;       
+        padding: 5px 20px;
         list-style: none;
-        p{
-            margin:0;
+        p {
+            margin: 0;
         }
-        ul{
-            margin:0;
-            padding:0;
+        ul {
+            margin: 0;
+            padding: 0;
         }
         li {
             font-size: 14px;
             color: #455A64;
             padding: 7px;
-            line-height: 20px;  
+            line-height: 20px;
             display: flex;
             align-items: center;
         }
@@ -101,7 +101,7 @@
         background: #F2F4F5;
         border-radius: 3px;
         padding: 13px 40px;
-        li {           
+        li {
             line-height: 20px;
             padding: 7px 0 0 10px;
             font-size: 14px;
@@ -110,8 +110,8 @@
     }
     ul,
     ol,
-    p,table
-     {
+    p,
+    table {
         em {
             color: #8cade9;
             font-style: normal;
@@ -167,10 +167,10 @@
         white-space: unset;
         word-break: break-all;
     }
-    a{
+    a {
         color: #5396ff;
         text-decoration: none;
-        &:hover{
+        &:hover {
             text-decoration: underline;
         }
     }

src/config.json

@@ -330,6 +330,16 @@
       "author": "Frans"
     },
     {
+      "name": "RadioGroup",
+      "version": "1.0.0",
+      "sort": "1",
+      "chnName": "单选按钮组",
+      "type": "component",
+      "showDemo": false,
+      "desc": "单选按钮组",
+      "author": "Frans"
+    },
+    {
       "version": "1.0.0",
       "name": "CheckBox",
       "sort": "1",

src/mixins/findCptUpward/index.js

@@ -0,0 +1,17 @@
+export default {
+    methods: {
+        findCptUpward(cptName) {
+            let parentCpt = this.$parent;
+
+            while (parentCpt) {
+                if (parentCpt.$options.name === cptName){
+                    this.parent = parentCpt;
+                   break;
+                }
+                
+                parentCpt = parent.$parent;
+            }
+        }
+    }
+}
+

src/packages/radio/demo.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="demo-list">
-    <h4>基本用法</h4>
+    <h4>Radio基本用法</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-radio v-model="radioVal" :label="2">备选项</nut-radio>
+        </span>
+      </nut-cell>
+    </div>
+    
+    <h4>组合使用Radio</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -10,25 +19,48 @@
         <div slot="desc">radioVal1: {{radioVal1}}</div>
       </nut-cell>
     </div>
+    <p>组合使用 Radio 时推荐使用 radiogroup 组件，见下方示例</p>
 
-    <h4>禁用状态</h4>
+    <h4>RadioGroup基本用法</h4>
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio :disabled="true" v-model="radioVal2" label="禁用">备选项1</nut-radio>
+          <nut-radiogroup v-model="radioGroupVal1">
+            <nut-radio label="a">备选项1</nut-radio>
+            <nut-radio label="b">备选项2</nut-radio>
+          </nut-radiogroup>
         </span>
       </nut-cell>
+    </div>
+
+    <h4>Radio禁用</h4>
+    <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用">备选项2</nut-radio>
+          未选中时的禁用状态：<nut-radio :disabled="true" v-model="radioVal2" label="禁用">备选项1</nut-radio>
         </span>
       </nut-cell>
       <nut-cell>
-        <span slot="title">radioVal2: {{radioVal2}}</span>
+        <span slot="title">
+          已选中时的禁用状态：<nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用">备选项2</nut-radio>
+        </span>
       </nut-cell>
     </div>
 
-    <h4>自定义尺寸</h4>
+    <h4>RadioGroup整体禁用</h4>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-radiogroup v-model="radioGroupVal2" :disabled="true">
+            <nut-radio label="1">备选项1</nut-radio>
+            <nut-radio label="2">备选项2</nut-radio>
+            <nut-radio label="3">备选项3</nut-radio>
+          </nut-radiogroup>
+        </span>
+      </nut-cell>
+    </div>
+
+    <h4>Radio自定义尺寸</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -48,34 +80,45 @@
       <p>size可选值：'small', 'base', 'large'</p>
     </div>
 
-    <h4>禁用动效</h4>
+    <h4>RadioGroup整体定义尺寸</h4>
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio :animation="false" v-model="radioVal3" label="a">备选项1</nut-radio>
+          <nut-radiogroup v-model="radioGroupVal3" size="large">
+            <nut-radio label="1">备选项1</nut-radio>
+            <nut-radio label="2">备选项2</nut-radio>
+            <nut-radio label="3">备选项3</nut-radio>
+          </nut-radiogroup>
         </span>
       </nut-cell>
+    </div>
+
+    <h4>Radio禁用动效</h4>
+    <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio :animation="false" v-model="radioVal3" label="b">备选项2</nut-radio>
+          <nut-radio :animated="false" v-model="radioVal3" label="a">备选项1</nut-radio>
         </span>
       </nut-cell>
-      <p>animation属性值为false时，禁用自带动效</p>
-    </div>
-
-    <h4>事件</h4>
-    <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio v-model="radioVal4" label="a" @change="radioChange">备选项1</nut-radio>
+          <nut-radio :animated="false" v-model="radioVal3" label="b">备选项2</nut-radio>
         </span>
       </nut-cell>
+      <p>animated 属性值为 false 时，禁用自带动效</p>
+    </div>
+
+    <h4>RadioGroup禁用动效</h4>
+    <div>
       <nut-cell>
         <span slot="title">
-          <nut-radio v-model="radioVal4" label="b" @change="radioChange">备选项2</nut-radio>
+          <nut-radiogroup v-model="radioGroupVal4" :animated="false">
+            <nut-radio label="a">备选项1</nut-radio>
+            <nut-radio label="b">备选项2</nut-radio>
+            <nut-radio label="c">备选项3</nut-radio>
+          </nut-radiogroup>
         </span>
       </nut-cell>
-      <p>值发生变化时，将触发change事件</p>
     </div>
 
     <h4>自定义Class</h4>
@@ -98,18 +141,19 @@
 export default {
   data() {
     return {
-      result: "",
+      radioVal:1,
       radioVal1: 2,
       radioVal2: "选中且禁用",
       radioVal3: "b",
       radioVal4: "b",
-      radioVal5: "a"
+      radioVal5: "a",
+      radioGroupVal1:"b",
+      radioGroupVal2:"2",
+      radioGroupVal3:"2",
+      radioGroupVal4:"c",
     };
   },
   methods: {
-    radioChange(label) {
-      alert("选中的是" + label);
-    }
   }
 };
 </script>

src/packages/radio/doc.md

@@ -2,6 +2,26 @@
 
 ## 基本用法
 
+通过 **v-model** 绑定值当前选中项的 **label** ，二者一致时 **Radio** 选中。
+```html
+<nut-radio 
+  v-model="radioVal"
+  :label="b"
+>备选项1
+</nut-radio>
+```
+```javascript
+export default {
+  data() {
+    return {
+      radioVal:"a",
+    }
+  }
+};
+```
+
+## 组合使用
+
 ```html
 <nut-radio 
   v-model="radioVal1"
@@ -15,9 +35,29 @@
 >备选项2
 </nut-radio>
 ```
+
+
+> 组合使用 **Radio** 组件时，推荐使用 **RadioGroup** 组件，按需加载时，别忘了引入哦
+
+```html
+<nut-radiogroup v-model="radioGroupVal1">
+  <nut-radio label="a">备选项1</nut-radio>
+  <nut-radio label="b">备选项2</nut-radio>
+</nut-radiogroup>
+```
+```javascript
+export default {
+  data() {
+    return {
+      radioGroupVal1:"b",
+    }
+  }
+};
+```
+
 ## 禁用状态
 
-非选中时的禁用状态
+通过给 **disabled** 传布尔值 **false** ，可将组件禁用
 
 ```html
 <nut-radio 
@@ -28,15 +68,15 @@
 </nut-radio>
 ```
 
-选中时的禁用状态
+
+RadioGroup整体禁用
 
 ```html
-<nut-radio 
-  :disabled="true" 
-  v-model="radioVal2" 
-  label="选中且禁用"
->备选项2
-</nut-radio>
+<nut-radiogroup v-model="radioGroupVal2" :disabled="true">
+  <nut-radio label="1">备选项1</nut-radio>
+  <nut-radio label="2">备选项2</nut-radio>
+  <nut-radio label="3">备选项3</nut-radio>
+</nut-radiogroup>
 ```
 
 ## 自定义尺寸
@@ -60,25 +100,45 @@
 </nut-radio>
 ```
 
+自定义RadioGroup整体尺寸
+
+```html
+<nut-radiogroup v-model="radioGroupVal3" size="large">
+  <nut-radio label="1">备选项1</nut-radio>
+  <nut-radio label="2">备选项2</nut-radio>
+  <nut-radio label="3">备选项3</nut-radio>
+</nut-radiogroup>
+```
+
 ## 禁用动效
 
-animation属性值为false时，禁用自带动效
+通过给 **animated** 传布尔值 **false** ，禁用自带动效
 
 ```html
 <nut-radio 
-   :animation="false" 
+   :animated="false" 
    v-model="radioVal3" 
    label="a"
 >备选项1
 </nut-radio>
 
 <nut-radio 
-   :animation="false" 
+   :animated="false" 
    v-model="radioVal3" 
    label="b"
 >备选项2</nut-radio>
 ```
 
+禁用 **RadioGroup** 动效
+
+```html
+<nut-radiogroup v-model="radioGroupVal4" :animated="false">
+  <nut-radio label="a">备选项1</nut-radio>
+  <nut-radio label="b">备选项2</nut-radio>
+  <nut-radio label="c">备选项3</nut-radio>
+</nut-radiogroup>
+```
+
 
 ## 新增自定义class
 ```html
@@ -86,8 +146,11 @@ animation属性值为false时，禁用自带动效
    class="my-radio"
 >备选项</nut-radio>
 ```
+**RadioGroup** 也支持新增自定义class
 
-## API
+## Props
+
+### Radio
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
@@ -95,10 +158,13 @@ animation属性值为false时，禁用自带动效
 | label | 标识符，与v-model值一致时呈选中状态 | 任意类型 | -
 | size | 尺寸，可选值small/base/large | String | base
 | disabled | 是否禁用 | Boolean | false
-| animation | 是否需要动效 | Boolean | true
+| animated | 是否需要动效 | Boolean | true
 
-## Event
+### RadioGroup
 
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| change | 值变化时触发 | 当前选中项标识符（label） 
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
+| size | 尺寸，可选值small/base/large | String | base
+| disabled | 是否禁用 | Boolean | false
+| animated | 是否需要动效 | Boolean | true

src/packages/radio/index.js

@@ -6,4 +6,4 @@ Radio.install = function(Vue) {
 };
 
 
-export default Radio
+export default Radio;

src/packages/radio/radio.vue

@@ -1,52 +1,81 @@
 <template>
-<label :class="['nut-radio','nut-radio-size-'+size]">
-    <input 
-    type="radio"
-    :class="{'nut-radio-ani':animation}"
-    :checked="value===label" 
-    :disabled="disabled"
-    :label="label"
-    :value="value"
-    @change="changeEvt"
+  <label :class="['nut-radio','nut-radio-size-'+currentSize]" @click="clickEvt">
+    <input
+      type="radio"
+      :value="currentValue"
+      :class="{'nut-radio-ani':isAnimated}"
+      :checked="currentValue === label"
+      :disabled="isDisabled"
+      :label="label"
     >
     <span class="nut-radio-label">
       <slot></slot>
     </span>
-</label>
+  </label>
 </template>
 <script>
+import findCptUpward from "../../mixins/findCptUpward/index.js";
+
 export default {
   name: "nut-radio",
+  mixins: [findCptUpward],
   props: {
     value: {
-        type: [String, Number, Boolean],
-        default: false
-    },
-    label:{
-      type: [String, Number, Boolean]
+      type: [String, Number, Boolean],
+      default: false
     },
+    label: [String, Number, Boolean],
     size: {
       type: String,
-      default: 'base'
+      default: "base"
     },
     disabled: {
       type: Boolean,
       default: false
     },
-    animation: {
+    animated: {
       type: Boolean,
       default: true
     }
   },
   data() {
-    return {}
+    return {
+      parent: null
+    };
+  },
+  computed: {
+    currentValue: {
+      get() {
+        return this.parent ? this.parent.value : this.value;
+      },
+
+      set(val) {
+        (this.parent || this).$emit("input", val);
+      }
+    },
+    currentSize() {
+      return this.parent ? this.parent.size || this.size : this.size;
+    },
+    isDisabled() {
+      return this.parent
+        ? this.parent.disabled || this.disabled
+        : this.disabled;
+    },
+    isAnimated() {
+      return this.parent
+        ? this.parent.animated && this.animated
+        : this.animated;
+    }
   },
-  mounted(){
+  created() {
+    this.findCptUpward("nut-radiogroup");
   },
   methods: {
-    changeEvt(event) {
-      this.$emit("change", this.label);
-      this.$emit('input', this.label);
+    clickEvt(event) {
+      if (this.isDisabled) {
+        return false;
+      }
+      this.currentValue = this.label;
     }
   }
 };

src/packages/radiogroup/demo.vue

@@ -1,9 +1,5 @@
 <template>
     <div>
-      <nut-radiogroup>
-          <nut-radio label="禁用">备选项1</nut-radio>
-          <nut-radio label="禁用2">备选项2</nut-radio>
-      </nut-radiogroup>
     </div>
 </template>
 
@@ -11,27 +7,7 @@
 export default {
   data() {
     return {
-      myData:[
-        {
-          id:1,
-          text:'备选项1',
-          label:'a',
-        },
-        {
-          id:2,
-          text:'备选项2',
-          label:'b',
-        },
-        {
-          id:3,
-          text:'备选项3',
-          label:'c'
-        },
-      ]
     };
-  },
-  methods: {
-      
   }
 };
 </script>

src/packages/radiogroup/index.js

@@ -1,8 +1,7 @@
 import RadioGroup from './radiogroup.vue';
-import './radiogroup.scss';
 
 RadioGroup.install = function(Vue) {
   Vue.component(RadioGroup.name, RadioGroup);
 };
 
-export default RadioGroup
+export default RadioGroup;

src/packages/radiogroup/radiogroup.vue

@@ -1,29 +1,28 @@
 <template>
-    <div class="nut-radiogroup">
-        <slot></slot>
-        <!-- <nut-radio v-for="rdo in gData" :key="rdo.id" :label="rdo.label">{{rdo.text}}</nut-radio> -->
-    </div>
+  <div class="nut-radiogroup">
+    <slot></slot>
+  </div>
 </template>
 <script>
 export default {
-    name:'nut-radiogroup',
-    props: {
-        groupData:{
-            type:Array,
-            default(){
-                return [];
-            }
-        }
+  name: "nut-radiogroup",
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      default: false
     },
-    data() {
-        return {
-            gData:this.groupData
-        };
+    disabled: {
+      type: Boolean,
+      default: false
     },
-    methods: {
+    size: {
+      type: String,
+      default: "base"
     },
-    mounted(){
-        console.log(1234,this);
+    animated: {
+      type: Boolean,
+      default: true
     }
-}
+  }
+};
 </script>