在Vue中实现密码框可见与隐藏的切换

话不多说，最终的效果图如下：

实现原理如下：

（1）定义一个flag，初始值设置为false，密码框其实是在

type='text'

type='password'

之间在切换而已；

（2）在密码框后面添加一个图标，这个图标的范围很广，可是是ElementUI的icon，可以是Bootstrap的icon，也可以是下载的图片，格式包括png、svg等等，当然了，图片和icon的引用是不一样的，一个是<img>，一个是<i>，这个其实不重要；重要的是有两个图表，也是根据flag进行切换的；

（3）将图标或者图片放置在文本框/密码框的内部末尾，这就需要使用到css样式了；

具体代码如下，我们就使用Vue的ElementUI来制作：

1.绘制表单，最主要的部分肯定是密码框部分了，所以这里只是单纯的显示样式，不管输入：

<el-input :type="showPass ? 'text' : 'password'" prefix-icon="el-icon-lock" v-model="form.password" ></el-input>

这里的showPass的值在下面的data中，读者自行设定，初始值设置为false即可

2.在密码框后面添加图标：

<el-input :type="showPass ? 'text' : 'password'" prefix-icon="el-icon-lock" v-model="form.password" ></el-input>
<i :class="showPass? icon1: icon2" style="position: absolute; right: 1rem; top: 1rem;" @click="showPass=!showPass"></i>

这里的icon1和icon2分别是data中的两个属性，值的话，当然就是icon的样式值了，如el-icon-view，不过本人觉得ElementUI自带的图标太low了，所以这里引用的是Boostrap的样式，分别是

icon1: 'glyphicon glyphicon-eye-open',
icon2: 'glyphicon glyphicon-eye-close',

然后最重要的部分在于style样式的设计，position必须是absolute，right:1rem表示将图标向左移动，移动多少就看客户需求了。

@click是用来切换showPass的值，每次切换都变成相反的值