vue 点击切换图片小眼睛,input框显示数字或者加密

最新推荐文章于 2024-06-29 10:05:11 发布

熊xing

最新推荐文章于 2024-06-29 10:05:11 发布

阅读量1k

点赞数

文章标签： vue html js javascript

本文链接：https://blog.csdn.net/weixin_47239395/article/details/107488373

版权

// 首先两张图片,一张闭眼一张睁眼,放到项目里,图片路径放自己的路径
<template>
    <input :type='telphone' clearable/>
    <div @click.stop='smallEyes' class='_eyes'>
        <img src='~assets/images/biyan.png' alt='' v-show='eyetel'>
        <img src='~assets/images/zhengkai.png' alt='' v-show='!eyetel'>
    </div>
</template>

<script>
export default {
    data () {
       return {
          telphone: 'password' ,   // 默认数字加密
          eyetel: true             // 默认显示闭眼的图片
         }
     },
     mounted () {},
     methods: {
        // 切换图片显示数字
        smallEyes () {
           this.eyetel = !this.eyetel
           this.telphone = this.telphone == 'password' ? 'text' : 'password'
        }
     }
}
</script>
<style lang='less' scoped>
   // 给图片定位
   ._eyes {
      display: inline-block;
      position: absolute;
      right: 20px;
      img {
        height: 0.2rem;
        width: 0.3rem;
      }
   }
</style>