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

发布时间 2023-05-21 09:48:12作者: 小白字太白
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()
      })
    },

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