Vue 密码强度测试器(Password Strength Meter)
made with Vuejs

Vue 密码强度测试器(Password Strength Meter)

这是一个基于zxcvbn的交互式密码强度测试组件。

简介及使用教程

Vue 密码强度测试器(Password Strength Meter)是一个基于zxcvbn的交互式密码强度测试组件。

安装

Npm

npm i vue-password-strength-meter zxcvbn

Yarn

yarn add vue-password-strength-meter zxcvbn

使用

基础用法

<template>
  <password v-model="password"/>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

带事件的用法

<template>
  <password
    v-model="password"
    :toggle="true"
    @score="showScore"
    @feedback="showFeedback"
  />
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    }),
    methods: {
      showFeedback ({suggestions, warning}) {
        console.log('🙏', suggestions)
        console.log('⚠', warning)
      },
      showScore (score) {
        console.log('💯', score)
      }
    }
  }
</script>

带自定义输入的用法

<template>
  <div>
    <input type="password" v-model="password">
    <password v-model="password" :strength-meter-only="true"/>
  </div>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

示例

demo 1.gif

作者

Jakub

相关项目

这是一个基于SVG的星级评分组件。
这是一个基于Vue.js简单的开关组件。
这是一个高度可定制的评级控制组件。
这是一个基于Vue的emoji图标反馈组件。
这是一个具有自动完成功能的简单下拉组件。
这是一个可以显示行内Markdown的Quasar UI应用扩展组件。
这是一个用于格式化和验证电话号码输入框组件。