fix: radio 样式调整

src/packages/radio/demo.vue

@@ -130,10 +130,28 @@
         </span>
       </nut-cell>
     </div> -->
+    <h4>基本样式</h4>
+    <nut-cell>
+      <span slot="title">
+        <radio-group 
+            :list="labelList"
+            :name="'test0'"
+            :styleType="'label'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="1"    
+            :reslout-attr="'value'"   
+            v-model="labelReslut0"                 
+          />
+      </span>
+    </nut-cell>
+    <nut-cell>
+        <span slot="title"> 选择结果 value: {{labelReslut0}}</span>
+      </nut-cell>
     <h4>按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
             :name="'test'"
             :styleType="'label'"
@@ -151,7 +169,7 @@
       <h4>按钮单选组输出属性为 text 的值</h4>
       <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
             :styleType="'label'"
             :name="'test2'"
@@ -169,9 +187,9 @@
       <h4>列表单选组输出属性为 value 的值</h4>
       <nut-cell>
         <span slot="title">        
-          <group 
+          <radio-group 
             :list="labelList"
-            :styletype="'list'"
+            :style-type="'list'"
             :name="'test3'"
             :effect-key = "'value'"
             :effect-text="'text'"
@@ -237,13 +255,14 @@ export default {
           text:'冰心'
         }
       ],
+      labelReslut0:"",
       labelReslut:"",
       labelReslut2:"",
       labelReslut3:""   
     };
   },
   components:{
-    group
+    'radio-group':group
   },
   watch:{
     test(val){

src/packages/radio/index.scss

@@ -1,10 +1,13 @@
 .nut-radio{
-    .nut-label{
+    .nut-radio-labels{
         width: 100%;
         display: flex;
         flex-wrap: wrap;        
-        .warper{
+        .nut-radio-list-label{
             margin: 5px;
         }
     }
+    .nut-radio-lists{
+        
+    }
 }

src/packages/radio/index.vue

@@ -1,10 +1,13 @@
 <template >
 <div class="nut-radio">
-    <div    class="nut-label" 
+    <div    :class="{
+                'nut-radio-labels':styleType ==='label',
+                'nut-radio-lists':styleType ==='list'
+            }"
             v-if="list&&list.length>0">
         <nut-radio   v-for="(item,index) in list" 
             :key="item[effectKey]"
-            :type="'list'"           
+            :type="styleType"           
             :name="name" 
             :text="item[effectText]"
             :value="item[effectKey]"  
@@ -19,7 +22,8 @@
 <script>
 export default {
     name:"radio-group",    
-    props:{     
+    props:{    
+        styleType:String,   // label
         type:String, // radio 展示    
         list:Array,  // radio 需要的数据信息 
         checkedIndex:Number, // 初始化选中数组第几个从 0 开始

src/packages/radio/radio.scss

@@ -1,7 +1,7 @@
 @import '../../styles/animation/pulse';
-.warper{
-	display: inline-block;
-}
+// .warper{
+// 	display: inline-block;
+// }
 .nut-radio {
 	margin-right: 10px;
 
@@ -94,7 +94,7 @@
 		}
 	}
 }
-.nut-radio-list{
+.nut-radio-list-label{
 	display: inline-block;
 	text-align: center;
 	line-height: 28px;
@@ -146,3 +146,22 @@
 		border: 1px solid rgba(225,37,27,1);
 	}	
 }
+.nut-radio-list-list{
+	height: 50px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #E6E6E6;
+	position: relative;
+	&:last-child{
+		border-bottom:	none;
+	}
+	input{
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 3;
+		opacity: 0;
+		position: absolute;
+	}
+}

src/packages/radio/radio.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="warper">
+<!-- <div class="warper"> -->
   <!-- <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
     <input
       type="radio"
@@ -14,24 +14,24 @@
       <slot></slot>
     </span>
   </label> -->
-  <div v-if="type === 'list'" class="nut-radio-list">
-     
-          
-          <input
-            type="radio"
-            :value="currentValue"
-            :class="{ 'nut-radio-ani': isAnimated }"
-            :checked="checked"
-            :disabled="isDisabled"
-            :label="label"
-            :name="name"
-            @input="valChange"
-          />
-          <div class="text-box">{{text}}<slot></slot></div>
-          <div class="box-border"></div>
-      
+  <div  :class="{
+      'nut-radio-list-label' : type === 'label',
+      'nut-radio-list-list' : type === 'list'
+     }">
+    <input
+      type="radio"
+      :value="currentValue"
+      :class="{ 'nut-radio-ani': isAnimated }"
+      :checked="checked"
+      :disabled="isDisabled"
+      :label="label"
+      :name="name"
+      @input="valChange"
+    />
+    <div class="text-box">{{text}}<slot></slot></div>
+    <div class="box-border"></div>      
   </div>
-</div>
+<!-- </div> -->
   
 </template>
 <script>