首页 > 其他分享 >vue中输入密码带图标可见不可见切换

vue中输入密码带图标可见不可见切换

时间:2023-05-21 09:55:50浏览次数:40  
标签:passwordIcon vue assets 可见 passwordType images password png 图标

data() {
    return {
      userName: "",
      pswd: "",
      loginDisabled: false,
      labelPosition: "top",
      passwordType: 'password',
      passwordIcon:require('@m/assets/images/bukejian.png'),
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
    };
  },

  

 <el-form-item label="用户密码">
              <el-input class="password" v-model="formLabelAlign.region" :type="passwordType" ref="password"></el-input>
              <img
                class="img_password"  @click ="showPwd"
                :src=passwordIcon
                alt=""
              />
            </el-form-item>

  

  methods: {
    ...mapActions(["submitUserInfo", "submitLoginStatus"]),
    showPwd(){
      // alert(111)
      if (this.passwordType === 'password') {
        this.passwordIcon=require('@m/assets/images/kejian.png')
        this.passwordType = ''
      } else {
        this.passwordIcon=require('@m/assets/images/bukejian.png')
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },

  路径请各位同学自动替换成自己的路径

标签:passwordIcon,vue,assets,可见,passwordType,images,password,png,图标
From: https://www.cnblogs.com/xiaobaizitaibai/p/17418243.html

相关文章

  • Ubuntu桌面下Vue开发环境搭建
    Ubuntu桌面下Vue开发环境搭建node环境node安装node官网下载node安装包:node-v18.16.0-linux-x64.tar.xz#解压sudotar-xvJfnode-v18.16.0-linux-x64.tar.xz-C/usr/local/cd/usr/local/sudomvnode-v18.16.0-linux-x64/nodejs#配置环境变量cd/etc/profile.d/......
  • vue3 +leaflet + 天地图
    vue3使用leafletnpminstallleaflet-D如果使用了tsnpmi--save-dev@types/leaflet//使用了ts需要下载声明类型//更具需要获取不通过类型的urlfunctiongetUrl(type:string){interfaceMyObject{[key:string]:Array<string>;}letobj:MyObject=......
  • springboot基于vue的MOBA类游戏攻略分享平台、游戏资讯分享平台,附源码+数据库+lw文档+
    1、项目介绍任何系统都要遵循系统设计的基本流程,本系统也不例外,同样需要经过市场调研,需求分析,概要设计,详细设计,编码,测试这些步骤,基于java语言设计并实现了MOBA类游戏攻略分享平台。该系统基于B/S即所谓浏览器/服务器模式,应用java技术,选择MySQL作为后台数据库。系统主要包括系统首......
  • 记录--Vue中如何导出excel表格
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、导出静态数据1、安装vue-json-excelnpm i vue-json-excel注意,此插件对node有版本要求,安装失败检查一下报错是否由于node版本造成!2、引入并注册组件(以全局为例)importVuefrom"vue";importJsonExce......
  • vue面试题汇总1
    Vue中什么是组件?答:在Vue中,组件是可重用的代码块,可以包含HTML、CSS和JavaScript,并具有自己的状态和生命周期。可以使用组件来构建UI界面并管理应用程序的状态。简要描述Vue的数据绑定方式。答:Vue使用双向数据绑定(two-waydatabinding)方式将模型数据和视图绑定在一起。当视图中的数......
  • Vue进阶(九十七):对象动态添加属性和值
    (文章目录)一、背景Vue规定不允许直接修改props或者data属性,必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的,该方法可以确保属性被创建后也是响应式的,同时触发视图更新。二、基础知识注:修改的对象必须为响应式对象,且操作响应式对象的属......
  • 【vue】div标签和template标签使用区别
       ......
  • ruoyi-vue接入钉钉,作为h5微应用
    ruoyi-vue接入钉钉,作为h5微应用https://blog.csdn.net/jiaodacailei/article/details/1247099141.安装依赖在ruoyi-ui目录,npm安装依赖:npminstalldingtalk-jsapi--save2.定义全局钉钉企业IDruoyi-ui/.env.developmentruoyi-ui/.env.productionruoyi-ui/.env.staging#......
  • java基于springboot+vue的漫画网站管理系统,附源码+数据库+lw文档+PPT,适合毕业设计、课
    1、项目介绍考虑到实际生活中在漫画网站方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。(a)管理员;管理员使用本系统涉到的功能主要有:首页、个人中心、用户管理、漫画分类管理、漫画投稿管理、分类管理、排行榜管理、交流论坛、系统管理等功能......
  • abp框架Excel导出——基于vue
    @@abp到处excel https://blog.51cto.com/u_15162069/2747885https://www.cnblogs.com/JerryMouseLi/p/13399027.html abp框架Excel导出——基于vue 目录abp框架Excel导出——基于vue1.技术栈1.1前端采用vue,官方提供1.2后台是abp——aspnetboilerplate2.E......