fix: radio 样式开发

src/packages/radio/demo.vue

@@ -136,7 +136,7 @@
         <radio-group 
             :list="labelList"
             :name="'test0'"
-            :styleType="'label'"
+            :styleType="'radio'"
             :effect-key = "'value'"
             :effect-text="'text'"
             :checkedIndex="1"    
@@ -184,7 +184,7 @@
       <nut-cell>
         <span slot="title"> 选择结果 text: {{labelReslut2}}</span>
       </nut-cell>
-      <h4>列表单选组输出属性为 value 的值</h4>
+      <h4>列表单选组输出属性为 text 的值</h4>
       <nut-cell>
         <span slot="title">        
           <radio-group 
@@ -193,8 +193,8 @@
             :name="'test3'"
             :effect-key = "'value'"
             :effect-text="'text'"
-            :checkedIndex="0"    
-            :reslout-attr="'text'"   
+            :reslout-attr="'text'"  
+            :checkedIndex="0"   
             v-model="labelReslut3"                 
           />
         </span>

src/packages/radio/index.vue

@@ -11,7 +11,7 @@
             :name="name" 
             :text="item[effectText]"
             :value="item[effectKey]"  
-            :radioData="item"          
+            :radio-data="item"          
             :checked="checkedIndex===index"    
             @radioChange="radioChange"
             :disabled="disabledValue | disabledFilter"          
@@ -40,7 +40,7 @@ export default {
         
     },
     methods:{
-        radioChange(obj){            
+        radioChange(obj){   
             this.$emit('input',obj[this.resloutAttr])
         }
     },
@@ -58,6 +58,11 @@ export default {
             }else if( Object.prototype.toString.apply(obj) === '[object Array]' ) {
                 
             }else if( Object.prototype.toString.apply(obj) === '[object String]' ) {
+                if(obj === 'all'){
+                    return true;
+                }else{
+
+                }
                 
             }else if( Object.prototype.toString.apply(obj) === '[object Boolean]' ) {
 

src/packages/radio/radio.scss

@@ -2,98 +2,137 @@
 // .warper{
 // 	display: inline-block;
 // }
-.nut-radio {
-	margin-right: 10px;
+// .nut-radio {
+// 	margin-right: 10px;
 
-	.nut-radio-label {
-		pointer-events: none;
-		vertical-align: middle;
-	}
+// 	.nut-radio-label {
+// 		pointer-events: none;
+// 		vertical-align: middle;
+// 	}
 
-	input {
-		position: relative;
-		-webkit-appearance: none;
-		border: 1px solid $border-color-base;
-		border-radius: 50%;
-		background-size: cover;
-		outline: 0;
-		opacity: 1;
-		vertical-align: middle;
-		margin-top: 0;
+// 	input {
+// 		position: relative;
+// 		-webkit-appearance: none;
+// 		border: 1px solid $border-color-base;
+// 		border-radius: 50%;
+// 		background-size: cover;
+// 		outline: 0;
+// 		opacity: 1;
+// 		vertical-align: middle;
+// 		margin-top: 0;
 
-		&::after {
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			content: '';
-			width: 0;
-			height: 0;
-			transform: translate(-50%, -50%);
-			background: $primary-color;
-			border-radius: 50%;
-			opacity: 0;
-			pointer-events: none;
-		}
+// 		&::after {
+// 			position: absolute;
+// 			left: 50%;
+// 			top: 50%;
+// 			content: '';
+// 			width: 0;
+// 			height: 0;
+// 			transform: translate(-50%, -50%);
+// 			background: $primary-color;
+// 			border-radius: 50%;
+// 			opacity: 0;
+// 			pointer-events: none;
+// 		}
 
-		&:checked {
-			@include nut-radio-bg('FFFFFF');
+// 		&:checked {
+// 			@include nut-radio-bg('FFFFFF');
 
-			background-color: $primary-color;
-			background-repeat: no-repeat;
-			background-position: center;
-			border-color: $primary-color;
-			background-size: 60%;
-			box-shadow: 0 4px 6px 0 rgba($primary-color, 0.15);
+// 			background-color: $primary-color;
+// 			background-repeat: no-repeat;
+// 			background-position: center;
+// 			border-color: $primary-color;
+// 			background-size: 60%;
+// 			box-shadow: 0 4px 6px 0 rgba($primary-color, 0.15);
 
-			&:not(:disabled).nut-radio-ani::after {
-				animation: nutPulse $animation-duration;
-			}
-		}
+// 			&:not(:disabled).nut-radio-ani::after {
+// 				animation: nutPulse $animation-duration;
+// 			}
+// 		}
 
-		&:disabled {
-			background-color: $disabled-bg;
-			border-color: $disabled-color;
-			box-shadow: none;
+// 		&:disabled {
+// 			background-color: $disabled-bg;
+// 			border-color: $disabled-color;
+// 			box-shadow: none;
 
-			&:checked {
-				@include nut-radio-bg('999999');
-			}
-		}
-	}
+// 			&:checked {
+// 				@include nut-radio-bg('999999');
+// 			}
+// 		}
+// 	}
 
-	&.nut-radio-size-base {
-		input {
-			width: 19px;
-			height: 19px;
-		}
+// 	&.nut-radio-size-base {
+// 		input {
+// 			width: 19px;
+// 			height: 19px;
+// 		}
 
-		.nut-radio-label {
-			font-size: $font-size-base;
-		}
-	}
+// 		.nut-radio-label {
+// 			font-size: $font-size-base;
+// 		}
+// 	}
 
-	&.nut-radio-size-small {
-		input {
-			width: 16px;
-			height: 16px;
-		}
+// 	&.nut-radio-size-small {
+// 		input {
+// 			width: 16px;
+// 			height: 16px;
+// 		}
 
-		.nut-radio-label {
-			font-size: $font-size-small;
-		}
-	}
+// 		.nut-radio-label {
+// 			font-size: $font-size-small;
+// 		}
+// 	}
 
-	&.nut-radio-size-large {
-		input {
-			width: 22px;
-			height: 22px;
-		}
+// 	&.nut-radio-size-large {
+// 		input {
+// 			width: 22px;
+// 			height: 22px;
+// 		}
 
-		.nut-radio-label {
-			font-size: $font-size-large;
-		}
+// 		.nut-radio-label {
+// 			font-size: $font-size-large;
+// 		}
+// 	}
+// }
+.nut-radio{
+	input{
+		position: absolute;
+		opacity: 0;
+		z-index: 3;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+		margin: 0;
+		padding:0;
 	}
 }
+.nut-radio-list-radio{
+	height: 50px;
+	display: flex;
+	align-items: center;
+	flex-direction:row-reverse;
+	justify-content: flex-end;
+	position: relative;
+	.box-border{
+		box-sizing: border-box;
+		width: 24px;
+		height: 24px;
+		border-radius: 12px;
+		border:1px solid #dcdcdc;
+	}
+	.text-box{
+		margin-left: 8px;
+	}
+	
+	input:checked~.box-border{
+		background: url(./../../assets/img/check-radio-on.png) no-repeat center;
+		background-size: 24px;
+		border:1px solid #f52805;
+	}
+	// dis #f7f7f7
+}
 .nut-radio-list-label{
 	display: inline-block;
 	text-align: center;
@@ -164,4 +203,20 @@
 		opacity: 0;
 		position: absolute;
 	}
+	.box-border{
+		margin-left: auto;
+	}
+	input:checked~.box-border{
+		width: 20px;
+		height: 21px;
+		background: url(./../../assets/img/checked-list.png) no-repeat center;
+		background-size: 20px;
+	}
+	input[disabled="disabled"]+.text-box{
+		color:#C8C8C8 ;
+	}
+	input[disabled="disabled"]~.box-border{
+		background: url(./../../assets/img/checked-list-ds.png) no-repeat center;
+		background-size: 20px;
+	}
 }

src/packages/radio/radio.vue

@@ -14,7 +14,8 @@
       <slot></slot>
     </span>
   </label> -->
-  <div  :class="{
+  <div class="nut-radio"  :class="{
+      'nut-radio-list-radio' : type === 'radio',
       'nut-radio-list-label' : type === 'label',
       'nut-radio-list-list' : type === 'list'
      }">
@@ -112,13 +113,7 @@ export default {
       }
       this.currentValue = this.label;
     },
-    valChange(e){  
-
-      // {
-      //   el:e.target,
-      //   value:e.target.value,
-      //   name:e.target.name,
-      // }   
+    valChange(e){        
       let radioData = this.radioData;      
       this.$emit('radioChange',radioData)
     }