vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏

本文主要是介绍vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><div class="login-container"><el-inputv-model="pwd":type="type"class="pwd-input"placeholder="请输入密码"><islot="suffix"class="icon-style":class="elIcon"autocomplete="auto"@click="flag = !flag"/></el-input></div>
</template>
<script>
export default {data() {return {flag: false};},computed: {type() {return this.flag ? "text" : "password";},elIcon() {return this.flag ? "el-icon-minus" : "el-icon-view";}}
};
</script>
<style>
.icon-style {margin-top: 8px;font-size: 18px;
}
.pwd-input {border: 1px solid #fff;width: 250px;
}
</style>

 参考文档

vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏_input设置输入密码效果-CSDN博客

【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果（阿里巴巴iconfront图标库vue项目本地引用）_element密码图标-CSDN博客

这篇关于vue给input密码框设置眼睛睁开闭合对于密码显示与隐藏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---