fix(shortpassword): 修复部分安卓机value值倒序问题 #679

src/packages/__VUE/shortpassword/index.scss

@@ -47,16 +47,20 @@
     border-radius: 4px;
   }
   .nut-input-real {
-    padding: 0 1200px 0 0;
-    width: 0;
+    // padding: 0 1200px 0 0; // ios必需
     position: absolute;
     right: 0;
     width: 247px;
     height: 41px;
+    // opacity: 0; // 安卓必需
+    // z-index: 11; // 安卓必需
   }
   .nut-shortpsd-fake {
     top: 5%;
   }
+  .nut-shortpsd-fake-taro {
+    top: 5%;
+  }
 }
 
 .nut-input-real-taro {
@@ -82,6 +86,18 @@
   position: absolute;
   left: 0;
   top: 29%;
+}
+.nut-shortpsd-fake-taro {
+  width: 100%;
+  height: 41px;
+  margin: 0 auto;
+  background: $shortpsd-background-color;
+  border-radius: 4px;
+  border: 1px solid $shortpsd-border-color;
+  display: flex;
+  position: absolute;
+  left: 0;
+  top: 29%;
   z-index: 10;
 }
 
@@ -136,11 +152,7 @@
   }
 
   .nut-shortpsd-sure {
-    background: linear-gradient(
-      135deg,
-      $primary-color 0%,
-      $primary-color-end 100%
-    );
+    background: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%);
     border-radius: 15px;
     padding: 8px 38px;
     line-height: 1;

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

@@ -33,16 +33,9 @@
           @input="changeValue"
         />
         <view class="nut-input-site"></view>
-        <view class="nut-shortpsd-fake" @click="focus">
-          <view
-            class="nut-shortpsd-li"
-            v-for="(sublen, index) in new Array(comLen)"
-            v-bind:key="index"
-          >
-            <view
-              class="nut-shortpsd-icon"
-              v-if="String(realInput).length > index"
-            ></view>
+        <view class="nut-shortpsd-fake-taro" @click="focus">
+          <view class="nut-shortpsd-li" v-for="(sublen, index) in new Array(comLen)" v-bind:key="index">
+            <view class="nut-shortpsd-icon" v-if="String(realInput).length > index"></view>
           </view>
         </view>
       </view>
@@ -104,16 +97,7 @@ export default create({
       default: 6
     }
   },
-  emits: [
-    'update:modelValue',
-    'update:visible',
-    'complete',
-    'change',
-    'ok',
-    'tips',
-    'close',
-    'cancel'
-  ],
+  emits: ['update:modelValue', 'update:visible', 'complete', 'change', 'ok', 'tips', 'close', 'cancel'],
   setup(props, { emit }) {
     const realInput = ref(props.modelValue);
     const realpwd = ref();
@@ -129,9 +113,7 @@ export default create({
       let dom: any = '';
       if (isWx.value) {
         setTimeout(() => {
-          dom = document.getElementsByClassName(
-            'nut-input-real-taro'
-          )[0] as any;
+          dom = document.getElementsByClassName('nut-input-real-taro')[0] as any;
           if (!dom) return;
           dom.focus();
         }, 100);

src/packages/__VUE/shortpassword/index.vue

@@ -21,20 +21,14 @@
           class="nut-input-real"
           type="number"
           maxlength="6"
+          :style="systemStyle()"
           v-model="realInput"
           @input="changeValue"
         />
         <div class="nut-input-site"></div>
         <view class="nut-shortpsd-fake" @click="focus">
-          <view
-            class="nut-shortpsd-li"
-            v-for="(sublen, index) in new Array(comLen)"
-            v-bind:key="index"
-          >
-            <view
-              class="nut-shortpsd-icon"
-              v-if="String(realInput).length > index"
-            ></view>
+          <view class="nut-shortpsd-li" v-for="(sublen, index) in new Array(comLen)" v-bind:key="index">
+            <view class="nut-shortpsd-icon" v-if="String(realInput).length > index"></view>
           </view>
         </view>
       </div>
@@ -53,7 +47,7 @@
   </view>
 </template>
 <script lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('shortpassword');
 export default create({
@@ -95,16 +89,7 @@ export default create({
       default: 6
     }
   },
-  emits: [
-    'update:modelValue',
-    'update:visible',
-    'complete',
-    'change',
-    'ok',
-    'tips',
-    'close',
-    'cancel'
-  ],
+  emits: ['update:modelValue', 'update:visible', 'complete', 'change', 'ok', 'tips', 'close', 'cancel'],
   setup(props, { emit }) {
     const realInput = ref(props.modelValue);
     const realpwd = ref();
@@ -157,6 +142,22 @@ export default create({
     function onTips() {
       emit('tips');
     }
+    function systemStyle() {
+      let u = navigator.userAgent;
+      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
+      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        return {
+          paddingRight: '1200px'
+        };
+      }
+      if (isAndroid) {
+        return {
+          opacity: 0,
+          zindex: 10
+        };
+      }
+    }
     return {
       comLen,
       sureClick,
@@ -168,6 +169,7 @@ export default create({
       close,
       onTips,
       show,
+      systemStyle,
       closeIcon
     };
   }