fix: radio 样式修改

src/packages/radio/demo.vue

@@ -130,20 +130,59 @@
         </span>
       </nut-cell>
     </div> -->
-    <h4>按钮样式</h4>
+    <h4>按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
         <span slot="title">        
           <group 
             :list="labelList"
             :name="'test'"
+            :styleType="'label'"
             :effect-key = "'value'"
             :effect-text="'text'"
-            :checkedIndex="0"            
+            :checkedIndex="1"    
+            :reslout-attr="'value'"   
+            v-model="labelReslut"                 
           />
         </span>
       </nut-cell>
       <nut-cell>
-        <span slot="title"> 选择结果:{{labelReslut}}</span>
+        <span slot="title"> 选择结果 value: {{labelReslut}}</span>
+      </nut-cell>
+      <h4>按钮单选组输出属性为 text 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styleType="'label'"
+            :name="'test2'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut2"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut2}}</span>
+      </nut-cell>
+      <h4>列表单选组输出属性为 value 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styletype="'list'"
+            :name="'test3'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut3"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut3}}</span>
       </nut-cell>
   </div>
 </template>
@@ -170,35 +209,37 @@ export default {
         {
           name:'test',
           value:1,
-          text:'女孩'
+          text:'亚瑟'
         },
         {
           name:'test',
           value:2,
-          text:'女生'
+          text:'廉颇'
         },
         {
           name:'test',
           value:3,
-          text:'女神'
+          text:'东皇太一'
         },
         {
           name:'test',
           value:4,
-          text:'腐女'
+          text:'吕布'
         },
         {
           name:'test',
           value:5,
-          text:'神女'
+          text:'黑切'
         },
         {
           name:'test',
           value:6,
-          text:'小女'
+          text:'冰心'
         }
       ],
-      labelReslut:""   
+      labelReslut:"",
+      labelReslut2:"",
+      labelReslut3:""   
     };
   },
   components:{
@@ -210,6 +251,9 @@ export default {
     }
   },
   methods: {    
+  },
+  mounted(){
+    
   }
 };
 </script>

src/packages/radio/index.scss

@@ -5,7 +5,6 @@
         flex-wrap: wrap;        
         .warper{
             margin: 5px;
-            overflow: hidden;
         }
     }
 }

src/packages/radio/index.vue

@@ -1,33 +1,66 @@
 <template >
 <div class="nut-radio">
-    <div class="nut-label">
+    <div    class="nut-label" 
+            v-if="list&&list.length>0">
         <nut-radio   v-for="(item,index) in list" 
             :key="item[effectKey]"
             :type="'list'"           
             :name="name" 
             :text="item[effectText]"
-            :value="item[effectKey]"
-            :checked="checkedIndex===index"  
+            :value="item[effectKey]"  
+            :radioData="item"          
+            :checked="checkedIndex===index"    
+            @radioChange="radioChange"
+            :disabled="disabledValue | disabledFilter"          
             />
     </div>
 </div>    
 </template>
 <script>
-
-
 export default {
     name:"radio-group",    
-    props:{
-        list:{
-            type:Array,
-            default(){
+    props:{     
+        type:String, // radio 展示    
+        list:Array,  // radio 需要的数据信息 
+        checkedIndex:Number, // 初始化选中数组第几个从 0 开始
+        effectKey:String,    // 绑定有效值对应属性 key
+        effectText:String,   // 有效显示文案对应属性 key
+        resloutAttr:String,  // 选择结果展示属性值类型 key 
+        name:String, // radio 标签 name         
+        disabledValue:[String, Number, Boolean,Array] // 禁用的 radio 需要传一个数组
+    },    
+    mounted(){
+        if(this.list&&this.list.length>0){
+            this.$emit('input',this.list[this.checkedIndex][this.resloutAttr])
+        }
+        
+    },
+    methods:{
+        radioChange(obj){            
+            this.$emit('input',obj[this.resloutAttr])
+        }
+    },
+    watch:{
+        list(val){
+            if(val&&val.length>0){
+            this.$emit('input',val[this.checkedIndex][this.resloutAttr])
+        }
+        }
+    },
+    filters:{
+        disabledFilter(obj){
+            if( Object.prototype.toString.apply(obj) === '[object Number]' ) {
+
+            }else if( Object.prototype.toString.apply(obj) === '[object Array]' ) {
                 
+            }else if( Object.prototype.toString.apply(obj) === '[object String]' ) {
+                
+            }else if( Object.prototype.toString.apply(obj) === '[object Boolean]' ) {
+
+            }else{
+
             }
-        },
-        checkedIndex:Number,
-        effectKey:String,
-        effectText:String,
-        name:String
+        }
     }
 }
 </script>

src/packages/radio/radio.scss

@@ -101,6 +101,7 @@
 	height: 28px;	
 	position: relative;
 	font-size: 14px;	
+	padding:0 15px;
 	cursor: pointer;
 	label{
 		display: inline-block;		
@@ -143,6 +144,5 @@
 	input:checked +.text-box + .box-border{
 		background: rgba(255,239,235,1);
 		border: 1px solid rgba(225,37,27,1);
-	}
-	
+	}	
 }

src/packages/radio/radio.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="warper">
-  <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
+  <!-- <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
     <input
       type="radio"
       :value="currentValue"
@@ -13,9 +13,9 @@
       
       <slot></slot>
     </span>
-  </label>
+  </label> -->
   <div v-if="type === 'list'" class="nut-radio-list">
-      <label for="">
+     
           
           <input
             type="radio"
@@ -29,7 +29,7 @@
           />
           <div class="text-box">{{text}}<slot></slot></div>
           <div class="box-border"></div>
-      </label>
+      
   </div>
 </div>
   
@@ -69,7 +69,13 @@ export default {
     name:{
       type:String
     },
-    text:String
+    text:String,
+    radioData:{
+      type:Object,
+      default(){
+
+      }
+    }
   },
   data() {
     return {
@@ -107,12 +113,14 @@ export default {
       this.currentValue = this.label;
     },
     valChange(e){  
+
       // {
       //   el:e.target,
       //   value:e.target.value,
       //   name:e.target.name,
       // }   
-      this.$emit('input',e.target.value)
+      let radioData = this.radioData;      
+      this.$emit('radioChange',radioData)
     }
   }
 };