在input输入框中可以添加小眼睛图标,点击小眼睛即可设置密码可见性
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input
:type="passwordVisible ? 'text' : 'password'"
v-model="form.password"
autocomplete="off"
>
<template slot="suffix">
<span
class="el-icon-view"
@click="togglePasswordVisibility()"
></span>
</template>
</el-input>
</el-form-item>
export default {
data() {
return {
form: {
password: ''
},
formLabelWidth: '100px',
passwordVisible: false
};
},
methods: {
togglePasswordVisibility() {
this.passwordVisible = !this.passwordVisible;
}
}
};