refactor: shortPassword代码优化

src/packages/shortpassword/demo.vue

@@ -27,26 +27,28 @@
       v-model:value="state.value1"
       v-model:is-visible="state.dialogShow1"
       :no-button="false"
-      @sureClick="sureClick"
+      @sure-click="sureClick"
     >
     </nut-shortpassword>
     <nut-shortpassword
       v-model:value="state.value2"
       v-model:is-visible="state.dialogShow2"
-      :length="5"
+      :length="4"
     >
     </nut-shortpassword>
     <nut-shortpassword
       v-model:value="state.value3"
       v-model:is-visible="state.dialogShow3"
-      :errorMsg="state.errorMsg"
+      :error-msg="state.errorMsg"
+      @complete="complete"
+      link="http://m.jd.com"
     >
     </nut-shortpassword>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, reactive, toRefs, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('shortpassword');
 export default createDemo({
@@ -63,24 +65,23 @@ export default createDemo({
       errorMsg: ''
     });
     // 方法
-    function switchActionSheet(param) {
-      state[`${param}`] = !state[`${param}`];
+    function switchActionSheet(
+      param: 'dialogShow' | 'dialogShow1' | 'dialogShow2' | 'dialogShow3'
+    ) {
+      state[param] = !state[param];
     }
-    function sureClick() {
+    function sureClick(val: string) {
+      console.log(val);
       state.dialogShow1 = false;
     }
-    watch(
-      () => state.value3,
-      val => {
-        if (val.length == 6) {
-          state.errorMsg = '请输入正确密码';
-        }
-      }
-    );
+    function complete() {
+      state.errorMsg = '请输入正确密码';
+    }
     return {
       state,
       switchActionSheet,
-      sureClick
+      sureClick,
+      complete
     };
   }
 });

src/packages/shortpassword/doc.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-XXXXXX
+短密码输入框，可用于输入密码、短信验证码等
 ### 安装
 
 ``` javascript
@@ -48,7 +48,7 @@ app.use(ShortPassword);
     v-model:value="state.value" 
     v-model:is-visible="state.dialogShow"
     :no-button="false"
-    @sureClick='sureClick'
+    @sure-click='sureClick'
     >
 </nut-shortpassword>
 ```
@@ -109,7 +109,7 @@ setup() {
 <nut-shortpassword 
     v-model:value="state.value" 
     v-model:is-visible="state.dialogShow"
-    :errorMsg = state.errorMsg
+    :error-msg = state.errorMsg
     >
 </nut-shortpassword>
 ```
@@ -144,19 +144,23 @@ setup() {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| isVisible | 是否展示短密码框| Booble | false
+| title | 标题| Boolean | '请输入密码'
+| is-visible | 是否展示短密码框| Boolean | false
 | value | 密码值 | string | ''
-| noButton | 是否隐藏底部按钮 |Booble|true|
-| length | 密码长度 |string||Number|6|
-| errorMsg | 错误信息提示 |string|''|
+| no-button | 是否隐藏底部按钮 |Boolean|true|
+| length | 密码长度，取值为4，5，6 |string||Number|6|
+| error-msg | 错误信息提示 |string|''|
+| show-password-tips | 忘记密码提示信息 |string|'忘记密码'|
+| link | 忘记密码跳转链接 |string|''|
 
 
 ### Event
 
-| 事件名称 | 说明 | 回调参数 
+| 事件名称 | 说明 | 回调参数
 |----- | ----- | ----- 
 | input | 输入密码时触发事件 | --
-| sureClick | 点击确实时触发事件 | --
+| sure-click | 点击确实时触发事件 | value
+| complete | 输入完成的回调 | value
 
 
 

src/packages/shortpassword/index.scss

@@ -11,7 +11,6 @@
   input {
     width: 247px;
     height: 41px;
-    background: rgba(245, 245, 245, 1);
     border-radius: 4px;
   }
 
@@ -29,12 +28,11 @@
   width: 100%;
   height: 41px;
   margin: 0 auto;
-  background: rgba(245, 245, 245, 1);
+  background: $shortpsd-background-color;
   border-radius: 4px;
-  border: 1px solid #ddd;
+  border: 1px solid $shortpsd-border-color;
   display: flex;
-  justify-content: space-between;
-  cursor: pointer;
+  // justify-content: space-between;
   position: absolute;
   left: 0;
   top: 29%;
@@ -42,7 +40,8 @@
 }
 
 .nut-shortpsd-li {
-  width: 16.5%;
+  // width: 16.5%;
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -62,19 +61,15 @@
   display: flex;
   justify-content: space-between;
   width: 247px;
-
   .nut-shortpsd-error {
     line-height: 10px;
-    font-family: PingFangSC-Regular;
     font-size: 10px;
-    color: rgba(242, 39, 12, 1);
+    color: $shortpsd-error;
   }
-
   .nut-shortpsd-forget {
     line-height: 12px;
-    font-family: PingFangSC-Regular;
-    font-size: 12px;
-    color: rgba(128, 128, 128, 1);
+    font-size: $font-size-1;
+    color: $shortpsd-forget;
   }
 }
 .nut-dialog-content {

src/packages/shortpassword/index.vue

@@ -1,12 +1,12 @@
 <template>
   <view>
     <nut-dialog
-      title="请输入密码"
-      :visible="dialogShow"
+      :title="title"
+      :visible="isVisible"
       @ok-btn-click="sureClick"
-      @cancel-btn-click="dialogShow = false"
+      @cancel-btn-click="close"
       @close="close"
-      :noFooter="noButton"
+      :no-footer="noButton"
     >
       <view class="nut-shortpsd-subtitle">您使用了虚拟资产，请进行验证</view>
       <view class="nut-input-w">
@@ -19,43 +19,39 @@
           @input="changeValue"
         />
         <view class="nut-shortpsd-fake" @click="focus">
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 0"></view
-          ></view>
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 1"></view
-          ></view>
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 2"></view
-          ></view>
-          <view class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 3"></view
-          ></view>
-          <view v-if="length >= 5" class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 4"></view
-          ></view>
-          <view v-if="length == 6" class="nut-shortpsd-li"
-            ><view class="nut-shortpsd-icon" v-if="realInput.length > 5"></view
-          ></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="realInput.length > index"
+            ></view>
+          </view>
         </view>
       </view>
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
-        <view class="nut-shortpsd-forget">
-          <nut-icon class="icon" size="11px" name="tips"></nut-icon
-          >忘记密码</view
-        >
+        <view class="nut-shortpsd-forget" v-if="showPasswordTips">
+          <nut-icon class="icon" size="11px" name="tips"></nut-icon>
+          <view @click="link">忘记密码</view>
+        </view>
       </view>
     </nut-dialog>
   </view>
 </template>
 
 <script lang="ts">
-import { ref, onMounted, watch, reactive, watchEffect } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('shortpassword');
 export default create({
   props: {
+    title: {
+      type: String,
+      default: '请输入密码'
+    },
     isVisible: {
       type: Boolean,
       default: false
@@ -73,17 +69,33 @@ export default create({
       default: true
     },
     length: {
-      type: String || Number,
+      type: [String, Number], //4～6
       default: 6
+    },
+    showPasswordTips: {
+      type: Boolean,
+      default: true
+    },
+    link: {
+      type: String,
+      default: ''
     }
   },
+  emits: [
+    'sure-click',
+    'update:value',
+    'update:is-visible',
+    'complete',
+    'input'
+  ],
   setup(props, { emit }) {
-    const dialogShow = ref(false);
     const realInput = ref(props.value);
     const realpwd = ref();
+    const comLen = computed(() => range(Number(props.length)));
+
     // 方法
     function sureClick() {
-      emit('sureClick');
+      emit('sure-click', realInput.value);
     }
     function focus() {
       realpwd.value.focus();
@@ -91,36 +103,35 @@ export default create({
     function changeValue(e: Event) {
       const input = e.target as HTMLInputElement;
       let val = input.value;
-      if (val.length > Number(props.length)) {
-        val = val.slice(0, Number(props.length));
+      if (val.length > comLen.value) {
+        val = val.slice(0, comLen.value);
+        realInput.value = val;
       }
-      if (realInput.value.length > Number(props.length)) {
-        realInput.value = realInput.value.slice(0, Number(props.length));
+      if (realInput.value.length === comLen.value) {
+        emit('complete', val);
       }
       emit('input', val);
       emit('update:value', val);
     }
     function close() {
-      emit('update:isVisible', false);
+      emit('update:is-visible', false);
+    }
+    function range(val: number) {
+      return Math.min(Math.max(4, val), 6);
+    }
+    function link() {
+      if (props.link) window.location.href = props.link;
     }
-    watch(
-      () => props.isVisible,
-      val => {
-        if (val) {
-          dialogShow.value = true;
-        } else {
-          dialogShow.value = false;
-        }
-      }
-    );
     return {
-      dialogShow,
+      comLen,
       sureClick,
       realInput,
       realpwd,
       focus,
+      range,
       changeValue,
-      close
+      close,
+      link
     };
   }
 });

src/packages/tabbar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-tabbar" :class="{ bottom: bottom }">
+  <view class="nut-tabbar" :class="{ bottom }">
     <view
       class="tabbar-nav"
       v-for="(item, index) in tabbarList"
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, Ref } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('tabbar');
 type obj = {
@@ -69,7 +69,7 @@ export default create({
   components: {},
   emits: ['tab-switch'],
   setup(props, { emit }) {
-    const currIndex: any = ref(0);
+    const currIndex: Ref<number> = ref(0);
     const { tabbarList } = props;
     function initbar() {
       tabbarList.forEach((item: any, index) => {

src/styles/variables.scss

@@ -122,6 +122,13 @@ $body-background: #f6f6f6 !default;
 $light-color: #f6f6f6 !default;
 $font-size-base: 14px !default;
 $font-size-small: 12px !default;
+
+//shortpassword
+$shortpsd-background-color: rgba(245, 245, 245, 1);
+$shortpsd-border-color: #ddd;
+$shortpsd-error: rgba(242, 39, 12, 1);
+$shortpsd-forget: rgba(128, 128, 128, 1);
+
 // calendar
 $calendar-primary-color: $primary-color;
 $calendar-choose-color: #fef6f6;
@@ -182,8 +189,6 @@ $notify-warning-background-color: linear-gradient(
   rgba(255, 154, 13, 1) 100%
 );
 
-view {
-}
 view-block {
   display: block;
 }