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

预览效果

核心代码

<div class="text-input" :class="right?textinput-right:">
    <span :style="right?{paddingRight:5px}:{paddingLeft:5px}" v-if="star">{
           
    {"*".repeat(text.length)}}</span>
    <input
    :type="type==number?tel:text"
    ref="inputText"
    :style="[star?:{paddingLeft:5px},right?{textAlign:right}:]"
    :class="[text,className]"
    v-model="value"
    @keyup="handelKeyup"
    :placeholder="text?:placeholder"
    :maxlength="maxlength" />
  </div>

{ {"*".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)
    }
  }

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) } }

预览地址:

预览效果 核心代码

{ {"*".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) } } 预览地址: