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>

　　

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