Vue.js 3 的密码强度计

Question

我已经开始使用 Vue.js 第 3 版并制作一个简单的注册表单。我需要为我的密码字段实现一个密码强度计，但似乎没有任何与 Vue.js 3 版本兼容的此类组件。 我发现一些好的密码强度计组件可以与 Vue.js 一起使用，但它们似乎都与 Vue.js 2 兼容。

我已经尝试过了

https://awesomeopensource.com/project/skegel13/vue-password

它在 DEMO 中运行良好，但与我的 Vue.js 3 不兼容。 我被困在这里了。有什么帮助/建议吗？

Answer 1

您是否正在寻找可视化组件或实际计算密码强度的东西？

zxcvbn 是相当知名的强度计算器 - 它输出 0-4 之间的

score

来表示密码的强度。 然后，您可以滚动一个简单的 Vue 组件，根据该分数输出不同的值。

下面的示例使用 Tailwind CSS 类来设置视觉仪表的样式。 我在浏览器中编写了此代码，尚未测试 Vue，但它相当简单，您应该能够理解。

<!-- PasswordStrengthMeter.vue -->
<template>
  <div>
    <div class="w-full h-4 flex">
      <div :class="style"></div>
      <div class="flex-1"></div>
    </div>
    <div>{{ strength }}</div>
  </div>
</template>

<script>
  props: {
    score: {
      required: true,
      default: 0,
    }
  },

  computed: {
    strength() {
      return [
        'Very Weak',  // 0
        'Weak',       // 1
        'Moderate',   // 2
        'Strong',     // 3
        'Very Strong' // 4
      ][this.score];
    },

    style() {
      return [
        'w-1 bg-red-500',           // 0
        'w-1/4 bg-yellow-500',      // 1
        'w-1/2 bg-yellow-300',      // 2
        'w-3/4 bg-green-500',       // 3
        'w-full bg-blue-500'        // 4
      ][this.score];
    },
  },
</script>

这就是它可能的样子。

Answer 2

这个与 Vue3 配合得很好。

https://github.com/miladd3/vue-simple-password-meter/

存储库中的示例代码：

<template>
  <div id="app">
    <label>Password</label>
    <input type="password" v-model="password" />
    <password-meter :password="password" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import PasswordMeter from 'vue-simple-password-meter';

export default defineComponent({
  components: {
    PasswordMeter,
  },
  setup() {
    const password = ref('');

    return {
      password,
    };
  },
});
</script>