---

场景与思路

我们通常实现密码框的时候会直接使用 input ,设置它的 type 为 password，如果要实现明文和暗文的切换，实际上就是 type=“text” 和 type="password"的切换。

---

实现

样式上我们可以先找到明文和暗文的 icon，然后利用子绝父相将它定位到 input 的后面：

<div class="safecode-box relative"><input type="password" v-model="safecode" placeholder="请输入6位字符" maxlength="6" ref="safecode"><img v-if="isEyeOpen" class="eye_close absolute" src="@/assets/images/eye_close.png" @click="onInputTypeChange"><img v-else class="eye_open absolute" src="@/assets/images/eye_open.png" @click="onInputTypeChange">
</div>

js部分我们可以设置一个变量 isEyeOpen，然后根据这个变量对 input 设置 type：

  data() {return {safecode: '',isEyeOpen: false}},methods: {// 明文暗文切换：onInputTypeChange() {this.isEyeOpen = !this.isEyeOpen;if(this.isEyeOpen){this.$refs.safecode.type = 'text'}else{this.$refs.safecode.type = 'password'}}}

效果如下所示：