feat: ✨ 新增 PasswordInput 密码输入框

* feat: ✨ 增加 wd-password-input 输入框 * feat: ✨ 增加 wd-password-input 密码输入框（引入数字键盘） * feat: ✨ 增加 wd-password-input 密码输入框 * feat: ✨ 增加 wd-password-input 密码输入框 --------- Co-authored-by: pangzhaozhao <zhaozhao.pang@sincerecloud.com>
Moonofweisheng · Dec 23, 2023 · b8c68f9 · b8c68f9
1 parent bbe491e
commit b8c68f9
Show file tree

Hide file tree

Showing 9 changed files with 425 additions and 1 deletion.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -265,6 +265,9 @@ export default defineConfig({
           }, {
             link: "/component/upload",
             text: "Upload 上传"
+          }, {
+            link: "/component/password-input",
+            text: "PasswordInput 密码输入框"
           }]
         }, {
           text: "反馈",

diff --git a/docs/component/password-input.md b/docs/component/password-input.md
@@ -0,0 +1,145 @@
+<frame/>
+
+
+# PasswordInput 密码输入框
+
+带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](./number-keyboard.md)组件配合使用。
+
+## 基础用法
+
+搭配数字键盘组件来实现密码输入功能。
+
+```html
+<!-- 密码输入框 -->
+<wd-password-input
+  :value="value"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+<!-- 数字键盘 -->
+<wd-number-keyboard
+  v-model="value"
+  v-model:visible="showKeyboard" 
+  :maxlength="4"
+  @blur="showKeyboard = false"
+/>
+```
+```typescript
+import { ref } from 'vue';
+
+const value = ref<string>('123');
+const showKeyboard = ref<boolean>(true);
+```
+
+### 自定义长度
+
+通过`length`属性来设置密码长度。
+
+```html
+<!-- 密码输入框 -->
+<wd-password-input
+  :value="value"
+  :length="4"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+<wd-number-keyboard 
+  v-model="value"
+  v-model:visible="showKeyboard" 
+  :maxlength="4"
+  @blur="showKeyboard = false"
+  >
+</wd-number-keyboard>
+
+```
+
+
+### 格子间距
+
+通过`gutter`属性来设置格子之间的间距。
+
+```html
+<!-- 密码输入框 -->
+<wd-password-input
+  :value="value"
+  :gutter="10"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+```
+
+### 明文展示
+
+将`mask`设置为`false`可以明文展示输入的内容，适用于短信验证码等场景。
+
+```html
+<!-- 密码输入框 -->
+<wd-password-input
+  :value="value"
+  :mask="false"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+```
+
+### 提示信息
+
+通过`info`属性设置提示信息，通过`error-info`属性设置错误提示，例如当输入六位时提示密码错误。
+
+```html
+<!-- 密码输入框 -->
+<wd-password-input
+  :value="value"
+  info="密码为 6 位数字"
+  :error-info="errorInfo"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+<!-- 数字键盘 -->
+<wd-number-keyboard
+  v-model="value"
+  :show="showKeyboard"
+  :maxlength="6"
+  @blur="showKeyboard = false"
+/>
+```
+```typescript
+import { ref, watch } from 'vue';
+
+const value = ref('123');
+const errorInfo = ref('');
+const showKeyboard = ref(true);
+
+watch(value, (newVal) => {
+  if (newVal.length === 6 && newVal !== '123456') {
+    errorInfo.value = '密码错误';
+  } else {
+    errorInfo.value = '';
+  }
+});
+```
+
+
+
+## Attributes
+
+| 参数       | 说明                                            | 类型             | 可选值 | 默认值 | 最低版本 |
+| ---------- | ----------------------------------------------- | --------------- | ------ | ------ | ------ |
+| value      | 密码值                                          | string           | -      | ''     | -      |
+| info       | 输入框下方文字提示                               | string           | -      | -      | -      |
+| error-info | 输入框下方错误提示                               | string           | -      | -      | -      |
+| length     | 密码最大长度                                    | number  \| string | -      | 6      | -      |
+| gutter     | 输入框格子之间的间距，如 20px 2em，默认单位为px   | number  \| string | -      | 0      | -      |
+| mask       | 是否隐藏密码内容                                | boolean           | -      | true   | -      |
+| focused    | 是否已聚焦，聚焦时会显示光标                     | boolean           | -      | false  | -      |
+
+
+
+## Events
+
+| 事件名 | 说明             | 参数 | 最低版本 |
+| ------ | ---------------- | ---- | -------- |
+| focus  | 输入框聚焦时触发 |      | -        |
+
+
+
diff --git a/src/pages.json b/src/pages.json
@@ -711,6 +711,16 @@
         },
         "navigationBarTitleText": "Gap 间隔槽"
       }
+    },
+    {
+      "path": "pages/passwordInput/Index",
+      "name": "passwordInput",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "PasswordInput 密码输入框"
+      }
     }
   ],
   // "tabBar": {

diff --git a/src/pages/index/Index.vue b/src/pages/index/Index.vue
@@ -194,6 +194,10 @@ const list = ref([
       {
         id: 'upload',
         name: 'Upload 上传'
+      },
+      {
+        id: 'passwordInput',
+        name: 'PasswordInput 密码输入框'
       }
     ]
   },

diff --git a/src/pages/passwordInput/Index.vue b/src/pages/passwordInput/Index.vue
@@ -0,0 +1,61 @@
+<template>
+  <page-wraper>
+    <view class="password-input">
+      <demo-block title="基本用法" transparent>
+        <wd-password-input v-model="value1" :focused="visible1" @focus="showKeyBoard(1)" />
+        <wd-number-keyboard v-model:visible="visible1" v-model="value1" :maxlength="6"></wd-number-keyboard>
+      </demo-block>
+      <demo-block title="自定义长度" transparent>
+        <wd-password-input v-model="value2" :length="4" :focused="visible2" @focus="showKeyBoard(2)" />
+        <wd-number-keyboard v-model:visible="visible2" v-model="value2" :maxlength="4"></wd-number-keyboard>
+      </demo-block>
+      <demo-block title="限制最大最小值" transparent>
+        <wd-password-input v-model="value3" :gutter="10" :focused="visible3" @focus="showKeyBoard(3)" />
+        <wd-number-keyboard v-model:visible="visible3" v-model="value3" :maxlength="6"></wd-number-keyboard>
+      </demo-block>
+      <demo-block title="明文展示" transparent>
+        <wd-password-input v-model="value4" :mask="false" :focused="visible4" @focus="showKeyBoard(4)" />
+        <wd-number-keyboard v-model:visible="visible4" v-model="value4" :maxlength="6"></wd-number-keyboard>
+      </demo-block>
+      <demo-block title="提示信息" transparent>
+        <wd-password-input v-model="value5" info="密码为 6 位数字" :error-info="errorInfo" :focused="visible5" @focus="showKeyBoard(5)" />
+        <wd-number-keyboard v-model:visible="visible5" v-model="value5" :maxlength="6"></wd-number-keyboard>
+      </demo-block>
+    </view>
+  </page-wraper>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+const value1 = ref<string>('123')
+const value2 = ref<string>('123')
+const value3 = ref<string>('123')
+const value4 = ref<string>('123')
+const value5 = ref<string>('123')
+const errorInfo = ref<string>('')
+
+const visible1 = ref<boolean>(true)
+const visible2 = ref<boolean>(false)
+const visible3 = ref<boolean>(false)
+const visible4 = ref<boolean>(false)
+const visible5 = ref<boolean>(false)
+
+const visibleArr = [visible1, visible2, visible3, visible4, visible5]
+
+function showKeyBoard(index: number) {
+  visibleArr.forEach((item, i) => (i === index - 1 ? (item.value = true) : (item.value = false)))
+}
+
+watch(value5, (newVal) => {
+  if (newVal.length === 6 && newVal !== '123456') {
+    errorInfo.value = '密码错误'
+  } else {
+    errorInfo.value = ''
+  }
+})
+</script>
+<style lang="scss" scoped>
+.password-input {
+  padding-bottom: 240px;
+}
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -863,4 +863,9 @@ $-number-keyboard-title-color: var(--wot-number-keyboard-title-color, $-color-gr
 $-number-keyboard-title-font-size: var(--wot-number-keyboard-title-font-size, 16px) !default;
 $-number-keyboard-close-padding: var(--wot-number-keyboard-title-font-size, 0 16px) !default;
 $-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-theme) !default;
-$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
+$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
+
+// passwod-input
+$-password-input-color: var(--wd-password-input-color, #323233);
+$-password-input-border-color: var(--wd-password-border-color, #ebedf0);
+$-password-input-background-color: var(--wd-password-input-background-color, #fff);
diff --git a/src/uni_modules/wot-design-uni/components/wd-password-input/index.scss b/src/uni_modules/wot-design-uni/components/wd-password-input/index.scss
@@ -0,0 +1,124 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(password-input) {
+    @include e(item) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      @include when(border) {
+        border-color: $-dark-border-color;
+      }
+    }
+
+    @include e(mask) {
+      background-color: $-dark-color;
+    }
+
+    @include e(cursor) {
+      background-color: $-dark-color;
+    }
+
+    @include e(info) {
+      color: $-dark-color;
+
+      @include when(border) {
+        color: $-dark-color2;
+      }
+    }
+  }
+}
+
+@include b(password-input) {
+  position: relative;
+  margin: 0 16px;
+  user-select: none;
+
+  @include e(security) {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    cursor: pointer;
+  }
+
+  @include e(item) {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: $-password-input-color;
+    font-size: 20px;
+    line-height: 1.2;
+    background: $-password-input-background-color;
+
+    @include when(border) {
+      border: 1px solid $-password-input-border-color;
+
+      &:not(:last-child) {
+        border-right: none;
+      }
+
+      &:first-child {
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: $-password-input-color;
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+    visibility: hidden;
+  }
+
+  @include e(cursor) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1px;
+    height: 40%;
+    background: $-password-input-color;
+    transform: translate(-50%, -50%);
+    animation: 1s van-cursor-flicker infinite;
+  }
+
+  @include e(info) {
+    margin-top: 16px;
+    font-size: $-fs-content;
+    text-align: center;
+    color: $-color-info;
+
+    @include when(error) {
+      color: $-color-danger;
+    }
+
+  }
+}
+
+@keyframes van-cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}