div contenteditable 代替Textarea，做成Vue属性动态绑定

前言

一般都是用Textarea 文本来编辑，但发现可以用 div contenteditable = “true”,这个属性来搞定

<div contenteditable=true placeholder="添加描述符" class="shut-down"></div>

css

.shut-down:empty:before{
    content:attr(placeholder);
    font-size: 13px;
    color: #999;
}
.shut-down:focus:before{
    content:none;

2.通过vue来实现双向绑定

input 的实现是这样的

input的双向绑定

<input v-model="something">

改变的双向绑定

<input :value="something" @input="somthing=$event.target.value"

参照上面的我们来实现div的可编辑和双向绑定

<div contenteditable="true" v-text="content" @input="handleInput" class="shut-down">

</div>

js 部分

export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    handleInput($event){
      this.content = $event.target.innerText;

      // 拓展 如果想要只需要前100位数据
      this.content = this.content.substring(0,100)
    }
  }
}

这样 就不用textarea 来绑定啦，H5新特性 ，完美