fix(radio): 修复 radio-group 的 text-position 属性响应式问题 (#2572)

jdf2e · Sep 21, 2023 · 5f56359 · 5f56359
1 parent 84058cd
commit 5f56359
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 28 deletions.
diff --git a/src/packages/__VUE/radio/index.scss b/src/packages/__VUE/radio/index.scss
@@ -2,20 +2,24 @@
   .nut-radio {
     &__label {
       color: $dark-color;
+
       &--disabled {
         color: $radio-label-disable-color;
       }
     }
+
     &__button {
       background: $dark-background;
       color: $dark-color;
+
       &--disabled {
         color: $radio-label-disable-color;
         border: 1px solid $radio-label-disable-color;
       }
     }
   }
 }
+
 .nut-radio {
   display: flex;
   align-items: center;
@@ -27,6 +31,8 @@
   }
 
   &--reverse {
+    flex-direction: row-reverse;
+
     .nut-radio__label {
       margin-right: $radio-label-margin-left;
       margin-left: 0;
@@ -43,11 +49,13 @@
     color: $radio-label-font-color;
     box-sizing: border-box;
     border: 1px solid #f6f7f9;
+
     &--active {
       background: transparent;
       color: $radio-label-font-active-color;
       border: 1px solid $radio-label-button-border-color;
       position: relative;
+
       &::after {
         position: absolute;
         top: 0;
@@ -61,6 +69,7 @@
         content: '';
       }
     }
+
     &--disabled {
       color: $radio-label-disable-color;
       border: none;
@@ -72,6 +81,7 @@
     margin-left: $radio-label-margin-left;
     font-size: $radio-label-font-size;
     color: $radio-label-font-color;
+
     &--disabled {
       color: $radio-label-disable-color;
     }
@@ -82,9 +92,11 @@
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }
+
   &__icon--unchecked {
     color: $radio-icon-disable-color;
   }
+
   &__icon--disable {
     color: $radio-icon-disable-color2;
   }

diff --git a/src/packages/__VUE/radio/index.taro.vue b/src/packages/__VUE/radio/index.taro.vue
@@ -43,10 +43,6 @@ export default create({
         : 'nut-radio__icon--disable';
     });
 
-    const position = computed(() => {
-      return parent.position;
-    });
-
     const renderIcon = () => {
       const { iconSize } = props;
       const iconNodeMap = {
@@ -89,22 +85,18 @@ export default create({
       parent.updateValue(props.label);
     };
 
-    let reverseState = position.value === 'left';
+    const reverseState = computed(() => parent.position.value === 'left');
 
     return () => {
       return h(
         'view',
         {
-          class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ''}`,
+          class: `${componentName} ${componentName}--${props.shape} ${
+            reverseState.value ? `${componentName}--reverse` : ''
+          }`,
           onClick: handleClick
         },
-        [
-          props.shape == 'button'
-            ? renderButton()
-            : reverseState
-            ? [renderLabel(), renderIcon()]
-            : [renderIcon(), renderLabel()]
-        ]
+        [props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
       );
     };
   }

diff --git a/src/packages/__VUE/radio/index.vue b/src/packages/__VUE/radio/index.vue
@@ -43,10 +43,6 @@ export default create({
         : 'nut-radio__icon--disable';
     });
 
-    const position = computed(() => {
-      return parent.position;
-    });
-
     const renderIcon = () => {
       const { iconSize } = props;
       const iconNodeMap = {
@@ -71,6 +67,7 @@ export default create({
         slots.default?.()
       );
     };
+
     const renderButton = () => {
       return h(
         'view',
@@ -88,22 +85,18 @@ export default create({
       parent.updateValue(props.label);
     };
 
-    let reverseState = position.value === 'left';
+    const reverseState = computed(() => parent.position.value === 'left');
 
     return () => {
       return h(
         'view',
         {
-          class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ''}`,
+          class: `${componentName} ${componentName}--${props.shape} ${
+            reverseState.value ? `${componentName}--reverse` : ''
+          }`,
           onClick: handleClick
         },
-        [
-          props.shape == 'button'
-            ? renderButton()
-            : reverseState
-            ? [renderLabel(), renderIcon()]
-            : [renderIcon(), renderLabel()]
-        ]
+        [props.shape === 'button' ? renderButton() : [renderIcon(), renderLabel()]]
       );
     };
   }

diff --git a/src/packages/__VUE/radiogroup/index.taro.vue b/src/packages/__VUE/radiogroup/index.taro.vue
@@ -24,7 +24,7 @@ export default create({
 
     provide('parent', {
       label: readonly(computed(() => props.modelValue)),
-      position: props.textPosition,
+      position: readonly(computed(() => props.textPosition)),
       updateValue
     });
 

diff --git a/src/packages/__VUE/radiogroup/index.vue b/src/packages/__VUE/radiogroup/index.vue
@@ -24,7 +24,7 @@ export default create({
 
     provide('parent', {
       label: readonly(computed(() => props.modelValue)),
-      position: props.textPosition,
+      position: readonly(computed(() => props.textPosition)),
       updateValue
     });