vue输入密码组件_Vue.js密码输入组件，其中包括一个用于显示密码的切换开关

vue输入密码组件

Vue密码3.x (vue-password 3.x)

A Vue.js password input component that includes a toggle to show the password and a customizable strength meter.

Vue.js密码输入组件，包括一个用于显示密码的开关和一个可自定义的强度计。

Please note, VuePassword 3.x removes support for the zxcvbn library. The library appears to no longer be maintained. If you would still like to use it, you can still pull in the library and pass the VuePassword value to it to calculate the strength. Examples coming soon.

请注意，VuePassword 3.x删除了对zxcvbn库的支持。 该库似乎不再维护。 如果仍要使用它，您仍然可以拉入库并将VuePassword值传递给它以计算强度。 示例即将到来。

View Demo 查看演示 View Github 查看Github

安装 (Install)

Install the package using npm.

使用npm安装软件包。

npm install --save vue-password

The VuePassword component adds support for a toggle to hide and show the password as well as a meter to show the current strength of the password. This component does not automatically calculate the strength, however, a library like zxcvbn can be used to pass the strength values as props.

VuePassword组件增加了对用于隐藏和显示密码的切换开关以及显示密码当前强度的仪表的支持。 该组件不会自动计算强度，但是，可以使用像zxcvbn这样的库将强度值作为prop传递。

import VuePassword from 'vue-password';

export default {
    ...
    components: {
        VuePassword,
    },
    ...
};

用法 (Usage)

Use the props in your HTML and apply a v-model attribute for the password and any additional props for the desired configuration. The password input uses the $attrs attributes, so form validation props such as required, minlength, and maxlength will function on the input element. The following example shows how vue-password could be used in a registration form using Tailwind CSS.

在HTML中使用道具，并为密码设置v-model属性，并为所需配置应用其他道具。 密码输入使用$ attrs属性，因此表单验证道具(例如required，minlength和maxlength)将在输入元素上起作用。 以下示例显示了如何使用Tailwind CSS在注册表单中使用vue-password。

Java脚本 (Javascript)

import Vue from 'vue'
import VuePassword from 'vue-password'

new Vue({
  el: '#app',
  components: {
    VuePassword
  },
  data {
    user: {
      email: '',
      password: ''
    }
  }
})

HTML (HTML)

<form>
    <div class="mb-4">
        <label for="password">Password</label>
        <VuePassword
            v-model="password1"
            id="password1"
            :strength="strength"
            type="text"
        />
    </div>
</form>

道具 (Props)

Use the following props to configure the password input.

使用以下道具来配置密码输入。

Prop	Default	Description
classes	'form-control'	Set the classes for the input element. The default is the 'form-control' class used by Twitter Bootstrap. A string or array of classes can be passed in the prop.
disableStrength	false	Disable the password strength meter and messages.
disableToggle	false	Disable the password input toggle to show/hide the password.
strengthClasses	['VuePassword--very-weak', 'VuePassword--weak', 'VuePassword--medium', 'VuePassword--good', 'VuePassword--great']	Set the classes used to style the strength message and strength meter. This should be an array of five classes. The classes are applied depending on the current strength score of the password (0-4).
strengthMessages	['Very Weak Password', 'Weak Password', 'Medium Password', 'Strong Password' 'Very Strong Password']	Set the messages that appear depending on the strength score of the password. This should be an array of five messages.

Struts	默认	描述
类	“形式控制”	设置输入元素的类。 默认值为Twitter Bootstrap使用的“ form-control”类。 字符串或类数组可以在prop中传递。
disableStrength	假	禁用密码强度计和消息。
disableToggle	假	禁用密码输入切换按钮以显示/隐藏密码。
strengthClasses	[“ VuePassword –非常弱”，“ VuePassword –弱”，“ VuePassword –中”，“ VuePassword –好”，“ VuePassword –很好”]	设置用于设置强度消息和强度计样式的类。 这应该是五个类的数组。 根据密码的当前强度得分(0-4)应用类别。
strengthMessages	[“非常弱密码”，“弱密码”，“中等密码”，“强密码”，“非常强密码”]	根据密码强度得分设置显示的消息。 这应该是五个消息的数组。

大事记 (Events)

The password input emits an input event to use with v-model. Other events are binded use v-on="listeners".

密码输入发出一个输入事件以与v模型一起使用。 其他事件使用v-on =“ listeners”绑定。

插槽 (Slots)

Named slots can be used to change the layout of the password toggle, strength meter, and strength messages.

命名的插槽可用于更改密码切换器，强度计和强度消息的布局。

Slot	Scope	Description
password-input	strength: Strength value type: Current element type ('password or text') updatePassword: Method to update the password value. value: Current password value	Use this to replace the input element. The content provided by the slot must include an input field, preferably of type password.
password-toggle	toggle: Method to change the input type attribute from 'password' to 'type'	Use this named slot to change the layout of the password toggle.
password-hide		Use this named slot to change the password hide icon.
password-show		Use this named slot to change the password show icon.
strength-meter	strength: Strength value strength-class: Current strength class strength-classes: The array of strength classes strength-message: Current strength message strength-messages: The array of strength messages	Use this named slot to change the layout of the password strength meter.

插槽	范围	描述
密码输入	强度：强度值 类型：当前元素类型(“密码或文本”) updatePassword：更新密码值的方法。 值：当前密码值	使用它来替换输入元素。 插槽提供的内容必须包含一个输入字段，最好是password类型。
密码切换	toggle：将输入类型属性从“密码”更改为“类型”的方法	使用此命名插槽更改密码切换器的布局。
隐藏密码		使用此命名插槽更改密码隐藏图标。
密码显示		使用此命名插槽更改密码显示图标。
强度计	强度：强度值 强度等级：当前强度等级 强度等级：强度等级的数组 strength-message：当前强度信息 强度消息：强度消息的数组	使用此命名插槽更改密码强度计的布局。

示例：使用自定义输入 (Example: Use custom input)

<VuePassword
    v-model="user.password"
>
    <div
        v-slot:password-input="props"
        class="control has-icons-left"
    >
        <input
            class="input"
            type="password"
            placeholder="Text input"
            :value="props.value"
            @input="props.updatePassword"
        />
    </div>
</VuePassword>

自定义强度示例 (Custom Strength Example)

HTML (HTML)

<form>
    <label for="password">Password</label>
    <VuePassword
        v-model="user.password"
        :strength="score"
        @input="updateStrength"
    />
</form>

Java脚本 (Javascript)

import VuePassword from 'vue-password'

new Vue({
    el: '#app',
    components: {
        VuePassword,
    },
    data: {
        score: 0,
        user: {
            password: ''
        }
    },
    methods: {
        updateStrength(password) {
            /**
             * The input event sends the current password and
             * any included user inputs (email in this case).
             *
             * Calculate the score here either using a custom
             * javascript library or a request to the server.
             *
             * The strength must be an integer between 0 and 4.
             */
        }
    }
});

翻译自: https://vuejsexamples.com/a-vue-js-password-input-component-that-includes-a-toggle-to-show-the-password/

vue输入密码组件