image.png

原理：

通過設(shè)置元素的data-* 屬性的值，再通過css屬性attr(data-*)獲取設(shè)置的值，然后再使用before再input前面添加一個偽類元素，再設(shè)置輸入框text-indent的值即可實現(xiàn)

html->input

<el-input  class='textarea-prepend'  v-model="messageDetail.content" placeholder="" type="textarea" :rows="3" ></el-input>

css 部分(重要)

.textarea-prepend::before {
    background-color: #f5f7fa;
    color: #909399;
    display: block;
    position: absolute;
    content: attr(data-content);    /* 極為重要，可獲取元素上攜帶的data-* 屬性的值*/
    top: 1px;
    left: 1px;
    border-radius: 4px;
    padding: 4px;
    white-space: nowrap;
    line-height: normal;
  }

js部分：

//因為此項目的需求導(dǎo)致輸入框的前置文本是不同的，前置文本的字數(shù)長度也是不同的所以使用js來動態(tài)設(shè)置data-content屬性的值和input輸入框css屬性text-indent的值
mounted() {
    const el = document.querySelector('.textarea-prepend')
    el.setAttribute('data-content', this.tenantMessageInfo.smsSign)
    const textArea = document.querySelector('.textarea-prepend .el-textarea__inner')
    textArea.style.textIndent = this.tenantMessageInfo.smsSign.length * 14 + 'px'
    this.totalContent = this.tenantMessageInfo.smsSign + this.messageDetail.content
  },

如果你的前置值是固定的就不需要js了
只需在input框上面加入data-*的屬性就可以了