浏览代码

fix(checkbox&radio): checkbox radio add variables style

suzigang 4 年之前
父节点
当前提交
a496ef00e8

+ 9 - 0
src/packages/__VUE/checkbox/index.scss

@@ -16,4 +16,13 @@
       color: $checkbox-label-disable-color;
     }
   }
+  &__icon {
+    color: $primary-color;
+  }
+  &__icon--unchecked {
+    color: $checkbox-icon-disable-color;
+  }
+  &__icon--disable {
+    color: $help-color;
+  }
 }

+ 4 - 4
src/packages/__VUE/checkbox/index.vue

@@ -63,9 +63,9 @@ export default create({
     const color = computed(() => {
       return !pDisabled.value
         ? !pValue.value
-          ? '#d6d6d6'
-          : '#fa2c19'
-        : '#f5f5f5';
+          ? 'nut-checkbox__icon--unchecked'
+          : 'nut-checkbox__icon'
+        : 'nut-checkbox__icon--disable';
     });
 
     const emitChange = (value: string | boolean, label?: string) => {
@@ -78,7 +78,7 @@ export default create({
       return h(nutIcon, {
         name: !pValue.value ? iconName : iconActiveName,
         size: iconSize,
-        color: color.value
+        class: color.value
       });
     };
 

+ 9 - 0
src/packages/__VUE/radio/index.scss

@@ -16,4 +16,13 @@
       color: $radio-label-disable-color;
     }
   }
+  &__icon {
+    color: $primary-color;
+  }
+  &__icon--unchecked {
+    color: $radio-icon-disable-color;
+  }
+  &__icon--disable {
+    color: $help-color;
+  }
 }

+ 4 - 4
src/packages/__VUE/radio/index.vue

@@ -39,9 +39,9 @@ export default create({
     const color = computed(() => {
       return !props.disabled
         ? isCurValue.value
-          ? '#fa2c19'
-          : '#d6d6d6'
-        : '#f5f5f5';
+          ? 'nut-radio__icon'
+          : 'nut-radio__icon--unchecked'
+        : 'nut-radio__icon--disable';
     });
 
     const position = computed(() => {
@@ -53,7 +53,7 @@ export default create({
       return h(nutIcon, {
         name: isCurValue.value ? iconActiveName : iconName,
         size: iconSize,
-        color: color.value
+        class: color.value
       });
     };
 

+ 2 - 0
src/packages/styles/variables.scss

@@ -262,10 +262,12 @@ $dialog-width: 296px !default;
 // checkbox
 $checkbox-label-color: #1d1e1e !default;
 $checkbox-label-disable-color: #999 !default;
+$checkbox-icon-disable-color: #d6d6d6 !default;
 
 //radio
 $radio-label-color: #1d1e1e !default;
 $radio-label-disable-color: #999 !default;
+$radio-icon-disable-color: #d6d6d6 !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;

+ 3 - 3
src/sites/mobile-taro/vue/src/app.ts

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
 import './app.scss';
-// import NutUI from '../../../../packages/nutui.taro.vue';
-import NutUI from '@nutui/nutui-taro';
-import '@nutui/nutui-taro/dist/style.css';
+import NutUI from '../../../../packages/nutui.taro.vue';
+// import NutUI from '@nutui/nutui-taro';
+// import '@nutui/nutui-taro/dist/style.css';
 const App = createApp({
   onShow(options) {}
   // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖