vue 密码输入组件（星号显示输入的内容）

组件代码

<template>
  <div class="text-input">
    <span class="starBox">
      <span class="starItem" v-for="(item,i) in '*'.repeat(text.length)" :key="i" unselectable="on">
        {{item}}
      </span>
    </span>
    <el-input
    class="valInput"
    onpaste="return false" 
    ondragenter="return false"
    type="text"
    ref="inputText"
    v-model="value"
    clearable
    @keyup.native="handelKeyup"
    @clear="clearVal"
    :placeholder="placeholder"
    :maxlength="maxlength" />
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type:String,
      default:'请输入'
    },
    maxlength: { // 最大长度
      type: Number,
      default: 255,
    }
  },
  data() {
    return{
      value:'',
      text: ''
    }
  },
  watch: {
    value(val) {
      if(val){
        if(/.*[\u4e00-\u9fa5]+.*$/.test(val)){
          this.value = val.replace(/[\u4e00-\u9fa5]/gm,'')
          return ;
        }
        this.text += val.replace(/\s*/g,"");
        if(this.text){
          this.value = ' ';
        }
      }
    }
  },
  methods: {
    setInputPaddingLeft(){
      let inputPaddingLeft = `${this.text.length * .5 + 1}rem`;
      // document.documentElement.style.setProperty('--inputPaddingLeft', inputPaddingLeft);
      this.$refs.inputText.$el.querySelector('input').style.paddingLeft = inputPaddingLeft;
      this.$emit("input", this.text);
    },
    clearVal(){
      this.text = '';
      this.setInputPaddingLeft();
    },
    handelKeyup(e){
      // let textVal = '';
      if(e.keyCode == 8){
        this.text = this.text.slice(0,this.text.length - 1);
      }
      if(this.text){
        this.value = ' ';
      }
      this.setInputPaddingLeft();
    }
  }
}
</script>
<style lang="scss" scoped>
  :root{
    --inputPaddingLeft: 1rem;
  }
  /deep/ .valInput{
    input{
      padding-left: var(--inputPaddingLeft,1rem);
    }
  }
  .text-input{
    display:flex;
    align-items:center;
    flex:1;
  }
  .text{
    flex: 1;
  }
  .starBox{
      padding-left: 20px;
      position: absolute;
      z-index: 100;
      .starItem{
        display: inline-block;
        width: .5rem;
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
      }
  }
</style>

　　使用：

可以结合form表单使用

1、引入组件并在components中注册

2、使用

<passWordInput 
                :placeholder="'请输入'" 
                :maxlength="16" 
                v-model="form.againUserPwd"/>