基于vue封装一个带眼睛的密码子组件

    <el-input
        v-model="value"
        :type="flagType"
        ref="password"
        @input="emitInput"
    >
        <i
            slot="suffix"
            class="el-input__icon eye-wrapper"
            :class="[flag ? 'iconfont icon-yanjing_yincang_o': 'iconfont icon-yanjing_xianshi_o']"
            @click="toShowPassword">
        </i>
    </el-input>

```js
    data() {
        return {
            value: '',
            flag: true,
            flagType: 'password',
        }
    },
```
```js
    methods: {
        toShowPassword() {
            this.flag = !this.flag
            this.flagType = this.flag ? 'password' : 'text'
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        //提交数据
        emitInput() {
            this.$emit('input', this.value)
        },
    }
```

    <div style="width: 200px">
        <h1>密码组件</h1>
        <toggle-passowrd v-model="form.password"></toggle-passowrd>
        <el-button @click="getPassword">展示密码</el-button>
    </div>

<toggle-passowrd v-model="form.password"></toggle-passowrd>
// 原生
<toggle-passowrd @input="setPassword" :value="form.password"></toggle-passowrd>

    setPassword(val) {
        this.form.password = val
    },