Browse Source

fix: radio 样式

lilinsen 5 years ago
parent
commit
7b8a0bdec6
2 changed files with 24 additions and 97 deletions
  1. 23 2
      src/packages/radio/demo.vue
  2. 1 95
      src/packages/radio/radio.scss

+ 23 - 2
src/packages/radio/demo.vue

@@ -17,7 +17,7 @@
     </nut-cell>
     <nut-cell>
         <span slot="title"> 选择结果 value: {{labelReslut0}}</span>
-      </nut-cell>
+    </nut-cell>
     <h4>2. 按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
         <span slot="title">        
@@ -72,6 +72,25 @@
       <nut-cell>
         <span slot="title"> 选择结果 text: {{labelReslut3}}</span>
       </nut-cell>
+       <h4>5. 全部禁用</h4>
+       <nut-cell>
+      <span slot="title">
+        <radio-group 
+            :list="labelList"
+            :name="'test5'"
+            :styleType="'radio'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'value'"  
+            :disabled-value="'all'" 
+            v-model="labelReslut5"                 
+          />
+      </span>
+    </nut-cell>
+    <nut-cell>
+        <span slot="title"> 选择结果 value: {{labelReslut0}}</span>
+    </nut-cell>
   </div>
 </template>
 
@@ -115,9 +134,11 @@ export default {
       labelReslut0:"",
       labelReslut:"",
       labelReslut2:"",
-      labelReslut3:""   
+      labelReslut3:"",
+      labelReslut5:""  
     };
   },
+  
   components:{
     'radio-group':group
   }

+ 1 - 95
src/packages/radio/radio.scss

@@ -1,99 +1,4 @@
 @import '../../styles/animation/pulse';
-// .warper{
-// 	display: inline-block;
-// }
-// .nut-radio {
-// 	margin-right: 10px;
-
-// 	.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;
-
-// 		&::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');
-
-// 			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;
-// 			}
-// 		}
-
-// 		&:disabled {
-// 			background-color: $disabled-bg;
-// 			border-color: $disabled-color;
-// 			box-shadow: none;
-
-// 			&:checked {
-// 				@include nut-radio-bg('999999');
-// 			}
-// 		}
-// 	}
-
-// 	&.nut-radio-size-base {
-// 		input {
-// 			width: 19px;
-// 			height: 19px;
-// 		}
-
-// 		.nut-radio-label {
-// 			font-size: $font-size-base;
-// 		}
-// 	}
-
-// 	&.nut-radio-size-small {
-// 		input {
-// 			width: 16px;
-// 			height: 16px;
-// 		}
-
-// 		.nut-radio-label {
-// 			font-size: $font-size-small;
-// 		}
-// 	}
-
-// 	&.nut-radio-size-large {
-// 		input {
-// 			width: 22px;
-// 			height: 22px;
-// 		}
-
-// 		.nut-radio-label {
-// 			font-size: $font-size-large;
-// 		}
-// 	}
-// }
 .nut-radio{
 	input{
 		position: absolute;
@@ -131,6 +36,7 @@
 		background-size: 24px;
 		border:1px solid #f52805;
 	}
+	// input disabled="disabled"
 	// dis #f7f7f7
 }
 .nut-radio-list-label{