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

预览效果

核心代码

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

: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" />

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)

}

}