fix(short-password): 修复忘记密码文本对齐问题 (#393)

xiaohe0601 · web-flow · commit bb000ae7dc1a · 2024-08-06T15:56:58.000+08:00
diff --git a/example/src/pages/demo/dentry/shortpassword/index.vue b/example/src/pages/demo/dentry/shortpassword/index.vue
@@ -102,6 +102,7 @@ export default {
       msg="忘记密码"
       type="text"
       :cover="state.cover"
+      :z-index="5000"
     />
     <nut-short-password
       v-model="state.value4"
diff --git a/packages/nutui/components/shortpassword/index.scss b/packages/nutui/components/shortpassword/index.scss
@@ -1,98 +1,103 @@
-@import '../popup/index';
+@import "../popup/index";
 
 .nut-theme-dark {
-  .nut-short-password-title {
-    color: $dark-color;
-  }
+  .nut-short-password {
+    &-title {
+      color: $dark-color;
+    }
 
-  .nut-short-password-wrapper {
-    .nut-short-password__list {
+    &__list {
       background: $dark-background3;
       border: none;
+    }
 
-      .nut-short-password__item {
-        position: relative;
-
-        .nut-short-password__item-icon {
-          background: $dark-color;
-        }
+    &__item {
+      position: relative;
 
-        &::after {
-          position: absolute;
-          inset: -50%;
-          box-sizing: border-box;
-          pointer-events: none;
-          content: ' ';
-          outline: 1px solid #3a3a3c;
-          transform: scale(0.5);
-        }
+      &::after {
+        position: absolute;
+        inset: -50%;
+        box-sizing: border-box;
+        pointer-events: none;
+        content: "";
+        outline: 1px solid #3a3a3c;
+        transform: scale(0.5);
       }
     }
+
+    &__item-icon {
+      background: $dark-color;
+    }
   }
 }
 
-.nut-short-password-title {
-  font-size: $font-size-3;
-  line-height: 1;
-  color: $title-color;
-}
+.nut-short-password {
+  $block: &;
 
-.nut-short-password-subtitle {
-  display: block;
-  margin-top: 12px;
-  font-size: $font-size-1;
-  line-height: 1;
-  color: $text-color;
-}
-
-.nut-short-password-wrapper {
-  position: relative;
-  padding: 12px 0 10px;
-  text-align: center;
-}
+  &-title {
+    font-size: $font-size-3;
+    line-height: 1;
+    color: $title-color;
+  }
 
-.nut-short-password__list {
-  z-index: 10;
-  display: flex;
-  width: 100%;
-  height: 41px;
-  margin: 0 auto;
-  background: $shortpassword-background-color;
-  border: 1px solid $shortpassword-border-color;
-  border-radius: 4px;
-}
+  &-subtitle {
+    display: block;
+    margin-top: 12px;
+    font-size: $font-size-1;
+    line-height: 1;
+    color: $text-color;
+  }
 
-.nut-short-password__item {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-}
+  &-wrapper {
+    position: relative;
+    padding: 12px 0 10px;
+    text-align: center;
+  }
 
-.nut-short-password__item-icon {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: #000;
-  border-radius: 50%;
-}
+  &__list {
+    z-index: 10;
+    display: flex;
+    width: 100%;
+    height: 41px;
+    margin: 0 auto;
+    background: $shortpassword-background-color;
+    border: 1px solid $shortpassword-border-color;
+    border-radius: 4px;
+  }
 
-.nut-short-password__message {
-  display: flex;
-  justify-content: space-between;
-  width: 247px;
-  margin-top: 9px;
+  &__item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
 
-  .nut-short-password--error {
-    font-size: $font-size-0;
-    line-height: 1;
-    color: $shortpassword-error;
+  &__item-icon {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #000;
+    border-radius: 50%;
   }
 
-  .nut-short-password--forget {
+  &__message {
     display: flex;
-    font-size: $font-size-1;
-    line-height: 1;
-    color: $shortpassword-forget;
+    justify-content: space-between;
+    width: 247px;
+    margin-top: 9px;
+
+    #{$block}--error {
+      font-size: $font-size-0;
+      line-height: 1;
+      color: $shortpassword-error;
+    }
+
+    #{$block}--forget {
+      display: flex;
+      align-items: center;
+      font-size: $font-size-1;
+      line-height: 1;
+      color: $shortpassword-forget;
+    }
   }
 }
diff --git a/packages/nutui/components/shortpassword/shortpassword.vue b/packages/nutui/components/shortpassword/shortpassword.vue
@@ -1,111 +1,124 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
 import { computed, defineComponent, ref, watch } from 'vue'
-import { CLOSE_EVENT, FOCUS_EVENT, PREFIX, UPDATE_VISIBLE_EVENT } from '../_constants'
 import NutIcon from '../icon/icon.vue'
-import NutPopUp from '../popup/popup.vue'
+import NutPopup from '../popup/popup.vue'
+import { CLOSE_EVENT, FOCUS_EVENT, PREFIX, UPDATE_VISIBLE_EVENT } from '../_constants'
 import { useTranslate } from '../../locale'
 import { getMainClass } from '../_utils'
 import { shortpasswordEmits, shortpasswordProps } from './shortpassword'
 
 const props = defineProps(shortpasswordProps)
+
 const emit = defineEmits(shortpasswordEmits)
-// const instance = getCurrentInstance() as any
-// const eventChannel = instance?.ctx.getOpenerEventChannel()
-const realInput = ref(props.modelValue)
-const comLen = computed(() => range(Number(props.length)))
-const show = ref(props.visible)
+
+const innerVisible = ref(props.visible)
+const inputValue = ref(props.modelValue)
+
+const innerValue = computed(() => String(inputValue.value))
+
+const finalLength = computed(() => {
+  const numberLength = Number(props.length)
+
+  return Math.min(Math.max(4, numberLength), 6)
+})
+
 const classes = computed(() => {
   return getMainClass(props, componentName)
 })
-function focus(event: any) {
-  event.stopPropagation()
+
+const popupStyles: CSSProperties = {
+  top: '45%',
+  padding: '30px 24px 20px 24px',
+  textAlign: 'center',
+  borderRadius: '12px',
+}
+
+watch(() => props.visible, (value) => {
+  innerVisible.value = value
+})
+
+watch(() => props.modelValue, (value) => {
+  inputValue.value = value
+
+  if (String(value).length >= finalLength.value)
+    emit('complete', value!)
+})
+
+function focus() {
   emit(FOCUS_EVENT)
 }
-watch(
-  () => props.visible,
-  (value) => {
-    show.value = value
-  },
-)
-watch(
-  () => props.modelValue,
-  (value) => {
-    realInput.value = value
-
-    if (String(value).length === comLen.value)
-      emit('complete', value!)
-  },
-)
+
 function close() {
   emit(UPDATE_VISIBLE_EVENT, false)
   emit(CLOSE_EVENT)
 }
-function range(val: number) {
-  return Math.min(Math.max(4, val), 6)
-}
-function onTips() {
+
+function onTipsClick() {
   emit('tips')
 }
-// onMounted(() => {
-//   eventChannel.once((getCurrentInstance() as any).router.onReady, () => {})
-// })
 </script>
 
 <script lang="ts">
 const componentName = `${PREFIX}-short-password`
+
 const { translate } = useTranslate(componentName)
+
 export default defineComponent({
   name: componentName,
   options: {
     virtualHost: true,
     addGlobalClass: true,
     styleIsolation: 'shared',
-  }
-  ,
+  },
 })
 </script>
 
 <template>
-  <view :class="classes" :style="customStyle">
-    <NutPopUp
-      v-model:visible="show"
-      :custom-style="{
-        padding: '30px 24px 20px 24px',
-        borderRadius: '12px',
-        textAlign: 'center',
-        top: '45%',
-      }"
+  <view :class="classes" :style="props.customStyle">
+    <NutPopup
+      v-model:visible="innerVisible"
+      :custom-style="popupStyles"
       :closeable="true"
-      :close-on-click-overlay="closeOnClickOverlay"
+      :close-on-click-overlay="props.closeOnClickOverlay"
       @click-close-icon="close"
       @click-overlay="close"
     >
       <view class="nut-short-password-title">
-        {{ title || translate('title') }}
+        {{ props.title || translate('title') }}
       </view>
+
       <view class="nut-short-password-subtitle">
-        {{ desc || translate('desc') }}
+        {{ props.desc || translate('desc') }}
       </view>
+
       <view class="nut-short-password-wrapper">
-        <view class="nut-short-password__list" @touchstart="focus">
-          <view v-for="(sublen, index) in new Array(comLen)" :key="index" class="nut-short-password__item">
-            <view v-if="String(realInput).length > index" class="nut-short-password__item-icon" />
+        <view class="nut-short-password__list" @tap="focus">
+          <view v-for="it in finalLength" :key="it" class="nut-short-password__item">
+            <view v-if="it <= innerValue.length" class="nut-short-password__item-icon" />
           </view>
         </view>
       </view>
+
       <view class="nut-short-password__message">
         <view class="nut-short-password--error">
-          {{ errorMsg }}
+          {{ props.errorMsg }}
         </view>
-        <view v-if="tips || translate('tips')" class="nut-short-password--forget" @click="onTips">
-          <NutIcon name="tips" custom-class="icon" size="11px" />
-          <view>{{ tips || translate('tips') }}</view>
+
+        <view
+          v-if="props.tips || translate('tips')"
+          class="nut-short-password--forget"
+          @click="onTipsClick"
+        >
+          <NutIcon custom-class="icon" name="tips" size="11px" />
+
+          <view>{{ props.tips || translate('tips') }}</view>
         </view>
       </view>
-    </NutPopUp>
+    </NutPopup>
   </view>
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>
