input密码框输入后设置显示为星号或其他样式

预览效果

核心代码

    {{"*".repeat(text.length)}}
    
  

　　

watch: {
    value(val) {
      if(this.star && val){
        if(/.*[\u4e00-\u9fa5]+.*$/.test(val)){
          this.value = val.replace(/[\u4e00-\u9fa5]/gm,'')
          return ;
        }
        this.text += val
        if(this.star){
          this.value = ''
        }
      }
    }
  },
  methods: {
    handelKeyup(e){
      if(e.keyCode==8){
        this.text=this.text.slice(0,this.text.length-1)
      }
      this.$emit("input",this.star? this.text : this.value)
    }
  }

　　

 

源码地址：https://github.com/zuobaiquan/vue/tree/master/vueExercise/vue-component/src/components/myinput

预览地址: http://zuobaiquan.com/vue/vueExercise/vue-component/dist/index.html#/input

转载于:https://www.cnblogs.com/zuobaiquan01/p/10024435.html