# vue-element-password-input

> password input component for Vue

Latest version **1.1.6** (published 2020-09-22) · 0 weekly downloads

## Install

```sh
npm install vue-element-password-input
pnpm add vue-element-password-input
yarn add vue-element-password-input
bun add vue-element-password-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-09-22 |
| First published | 2020-09-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 617.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | zhxi-timereview |
| Keywords | vue-element-password-input, password-input, password, input |

## Links

- npm: https://www.npmjs.com/package/vue-element-password-input
- Repository: https://github.com/HelloWoed/vue-element-password-input
- Homepage: https://github.com/HelloWoed/vue-element-password-input.git#readme
- Issues: https://github.com/HelloWoed/vue-element-password-input/issues
- npm.io page: https://npm.io/package/vue-element-password-input

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2

## Recent versions

- 1.1.6 (latest) — 2020-09-22
- 1.1.5 — 2020-09-22
- 1.1.4 — 2020-09-22
- 1.1.3 — 2020-09-22
- 1.1.2 — 2020-09-22
- 1.1.1 — 2020-09-21
- 1.1.0 — 2020-09-21

## README

# vue-element-password-input

## 安装
```
npm install vue-element-password-input
```

### 引入
```javascript
// main.js
import passwordInput from 'vue-element-password-input'

Vue.use(passwordInput);
```

### 使用
```html
<!-- 支持v-model绑定 -->
<el-form size="medium" :model="loginForm" ref="loginForm" :rules="loginRules">
    <el-form-item prop="username">
        <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            ></el-input>
    </el-form-item>
    <el-form-item prop="password">
    <vue-element-password-input 
        v-model="loginForm.password" 
        prefixIcon="el-icon-lock"
        placeholder="请输入密码" 
        inputSize="medium"
        :maxlength="16" />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" class="handleLogin" @click.native.prevent="handleLogin">登录</el-button>
    </el-form-item>
    <el-row type="flex" justify="end">
        <el-link :underline="false" type="primary" @click="jumpForgetPasswd">忘记密码</el-link>
    </el-row>
</el-form>
```
```javascript
...
data(){
  return {
    loginForm:{},
  }
},
computed:{
  loginRules(){
    return {
      password: [
        {required: true,message: '请输入密码', trigger: 'blur'},
        {validator: this.validPassword, trigger: "blur"}
      ]
    }
  }
},
methods:{
  validPassword(rule, value, callback){
    let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
    if(reg.test(value)){
      callback();
    }else{
      callback(new Error('密码包含大小写字母和数字！'));
    }
  },
  jumpForgetPasswd(){

  },
  handleLogin(){
    
  }
}
...
```

---
_Source: https://npm.io/package/vue-element-password-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._