fix(input): readonly 导致内容前移 #628

src/packages/__VUE/input/index.scss

@@ -5,9 +5,18 @@
   display: flex;
   background: $white;
   border-bottom: 1px solid $input-border-bottom;
-  font-size: 14px;
+  font-size: $input-font-size;
   box-sizing: border-box;
 
+  &.nut-input-require {
+    &::before {
+      position: absolute;
+      left: 14px;
+      color: $input-require-color;
+      content: '*';
+    }
+  }
+
   .input-text {
     width: 230px;
     flex: 1;
@@ -47,9 +56,4 @@
       -webkit-text-fill-color: $input-disabled-color;
     }
   }
-  &-require {
-    color: $primary-color;
-    display: inline-block;
-    margin-right: 5px;
-  }
 }

src/packages/__VUE/input/index.taro.vue

@@ -1,10 +1,9 @@
 <template>
   <view :class="classes">
     <view class="nut-input-label">
-      <view class="nut-input-require" v-if="requireShow">*</view>
       <view v-if="label" class="label-string">{{ label }}</view>
     </view>
-    <view v-if="readonly">
+    <view v-if="readonly" class="input-text">
       {{ modelValue }}
     </view>
     <input
@@ -124,7 +123,8 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}-disabled`]: props.disabled
+        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-require`]: props.requireShow
       };
     });
 

src/packages/__VUE/input/index.vue

@@ -1,7 +1,6 @@
 <template>
   <view :class="classes">
     <view class="nut-input-label">
-      <view class="nut-input-require" v-if="requireShow">*</view>
       <view v-if="label" class="label-string">{{ label }}</view>
     </view>
     <input
@@ -90,7 +89,8 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}-disabled`]: props.disabled
+        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-require`]: props.requireShow
       };
     });
 

src/packages/styles/variables.scss

@@ -19,8 +19,7 @@ $black: #000 !default;
 // padding
 $padding-xs: 12px !default;
 
-$font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun,
-  sans-serif !default;
+$font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
 
 // ---- Animation ----
 $animation-duration: 0.25s !default;
@@ -56,18 +55,10 @@ $button-default-font-size: $font-size-2 !default;
 $button-disabled-opacity: 0.68 !default;
 $button-primary-color: $white !default;
 $button-primary-border-color: $primary-color !default;
-$button-primary-background-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
+$button-primary-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $button-info-color: $white !default;
 $button-info-border-color: rgba(73, 106, 242, 1) !default;
-$button-info-background-color: linear-gradient(
-  315deg,
-  rgba(73, 143, 242, 1) 0%,
-  rgba(73, 101, 242, 1) 100%
-) !default;
+$button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%) !default;
 $button-success-color: $white !default;
 $button-success-border-color: rgba(38, 191, 38, 1) !default;
 $button-success-background-color: linear-gradient(
@@ -125,6 +116,8 @@ $uploader-background: #f7f8fa !default;
 //input
 $input-border-bottom: #eaf0fb !default;
 $input-disabled-color: #c8c9cc !default;
+$input-require-color: $primary-color !default;
+$input-font-size: $font-size-2 !default;
 
 // textarea
 
@@ -218,11 +211,7 @@ $notify-success-background-color: linear-gradient(
   rgba(41, 212, 70, 1) 100%
 ) !default;
 $notify-danger-background-color: rgba(250, 50, 25, 1) !default;
-$notify-warning-background-color: linear-gradient(
-  135deg,
-  rgba(255, 93, 13, 1) 0%,
-  rgba(255, 154, 13, 1) 100%
-) !default;
+$notify-warning-background-color: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%) !default;
 
 // rate
 
@@ -240,18 +229,10 @@ $infinite-bottom-color: #c8c8c8 !default;
 //range
 $range-max: #333333 !default;
 $rang-bg-color: rgba($primary-color, 0.5) !default;
-$rang-bar-bg-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
+$rang-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 
 //address
-$address-region-tab-line: linear-gradient(
-  90deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
+$address-region-tab-line: linear-gradient(90deg, $primary-color 0%, $primary-color-end 100%) !default;
 
 //steps
 $step-wait-bg-color: #959fb1 !default;
@@ -273,11 +254,7 @@ $radio-icon-disable-color: #d6d6d6 !default;
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
 $fixednav-index: 201 !default;
-$fixednav-btn-bg: linear-gradient(
-  135deg,
-  rgba(250, 25, 44, 1) 0%,
-  rgba(250, 63, 25, 1) 100%
-) !default;
+$fixednav-btn-bg: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 63, 25, 1) 100%) !default;
 
 // NoticeBar
 $noticeBar-font-size: 14px !default;

src/packages/utils/useTaroRect/index.ts

@@ -12,7 +12,7 @@ import { Ref, unref } from 'vue';
 function isWindow(val: unknown): val is Window {
   return val === window;
 }
-export const useTaroRect = (elementRef: (Element | Window) | Ref<Element | Window | undefined>, Taro: any): any => {
+export const useTaroRect = (elementRef: (Element | Window | any) | Ref<Element | Window | any>, Taro: any): any => {
   let element = unref(elementRef);
 
   return new Promise((resolve) => {