需求

实现标签页(Tabs)上的标签可编辑的功能

实现

可编辑采用H5的contenteditable属性，数据的双向绑带使用blur事件

<el-tab-pane
                :label="index+1"
                :name="item.name"
              >
              <span slot="label" v-html="item.title" contenteditable="true" @blur="item.title=$event.target.innerText;saveVideoGroupTab($event.target.innerText)" v-on:keydown.delete.stop v-on:keyup.delete.stop></span>
              <div> content {{index+1}}</div>
</el-tab-pane>            

总结

开始想通过修改input标签样式来实现，后来发现还是h5的新属性好用