问题描述

输入框输入文本前有默认前置值，只能在默认值之后增加，不能删除默认值。

问题分析

输入框有默认值，可以使用监听 input 方法，判断当前字符串的长度，如果小于等于默认字符串的长度，就等于默认的字符串，否则就自由编辑。

问题解决

• 通过设置元素的data-* 属性的值，再通过css属性attr(data-*)获取设置的值，然后再使用before再input前面添加一个伪类元素，再设置输入框text-indent的值即可实现

.input-prepend::before {
    display: block;
    content: attr(data-content); // 获取data-*的值
    
    position: absolute;
    top: 1px;
    left: 1px;
    padding: 4px;
  }

// 如果默认值是固定的只用css就可以了，但是如果默认值长度是变化的就需要通过js计算伪元素的宽度和input的左padding

• 通过 input 方法监听输入值的变化，再根据默认值的长度判断，当输入框中的值等于默认值的长度时设置输入框的value等于默认值。（推荐）

<el-input v-model="form1.code" @input="handleInput" />

handleInput(val) {
      let def = '100102'
      if (val.length <= def.length) {
        this.form1.code = def
      }
},