From 3c106c57438da3ecaa4f2c59820a38b5cb8e7ae7 Mon Sep 17 00:00:00 2001
From: fifteen <2329473004@qq.com>
Date: Thu, 25 Jan 2024 10:44:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=B9=E6=80=A7:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E8=BE=93=E5=85=A5=E5=BC=BA=E5=BA=A6=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routers/modules/other.ts           |  6 ++++
 src/views/other/passStrength/index.vue | 46 ++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/views/other/passStrength/index.vue

diff --git a/src/routers/modules/other.ts b/src/routers/modules/other.ts
index d628d8d..88b8d67 100644
--- a/src/routers/modules/other.ts
+++ b/src/routers/modules/other.ts
@@ -103,6 +103,12 @@ const othersRouter = [
         name: 'text-clamp',
         meta: { title: '多行文本省略', icon: 'MenuIcon' },
       },
+      {
+        path: '/other/pass-strength',
+        component: () => import('@/views/other/passStrength/index.vue'),
+        name: 'pass-strength',
+        meta: { title: '密码强度校验', icon: 'MenuIcon' },
+      },
     ],
   },
 ]
diff --git a/src/views/other/passStrength/index.vue b/src/views/other/passStrength/index.vue
new file mode 100644
index 0000000..3e3ef55
--- /dev/null
+++ b/src/views/other/passStrength/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <PageWrapLayout class="components-container">
+    <div class="m-pass-strength">
+      <el-card style="margin-bottom: 10px">
+        <template #header>
+          <span>密码强度示例</span>
+        </template>
+        <el-form :model="ruleForm" label-width="120px">
+          <el-form-item label="新的密码" prop="newPassword">
+            <inputStrength v-model="ruleForm.newPassword" strength placeholder="请输入新密码"></inputStrength>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <inputStrength v-model="ruleForm.confirmPassword" strength placeholder="请确认新密码"></inputStrength>
+          </el-form-item>
+        </el-form>
+      </el-card>
+      <el-descriptions title="配置项" :column="1" border class="descriptions">
+        <el-descriptions-item label="strength"> 是否显示密码强度，默认为 false </el-descriptions-item>
+        <el-descriptions-item label="value"> 双向绑定的 value 值，使用示例：v-model='passValue' </el-descriptions-item>
+        <el-descriptions-item label="常见场景">
+          <el-tag type="info">修改密码</el-tag> <el-tag type="info">用户注册</el-tag></el-descriptions-item
+        >
+        <el-descriptions-item label="参考地址">
+          <a href="https://github.com/zxcvbn-ts/zxcvbn" target="_blank">https://github.com/zxcvbn-ts/zxcvbn</a>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </PageWrapLayout>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue'
+  import inputStrength from '@/components/InputStrength/index.vue'
+  const ruleForm = reactive({
+    newPassword: '',
+    confirmPassword: '',
+  })
+</script>
+<style lang="scss">
+  .m-pass-strength {
+    width: 100%;
+    height: 100%;
+    .descriptions {
+      margin-top: 50px;
+    }
+  }
+</style>