vue中的可编辑div
2019-02-14 本文已影响591人
晴空万里_d3c2
可编辑div可能很简单 contenteditable="true" 就能实现了
但是，，，输入一个字的时候，焦点会自动跳到文本开头，很烦的有木有
在网上看见一个大神写的，引用过来，很久了，忘记了出处
将可编辑div单独设置成一个组件
子组件中
<template>
<div class="edit" placeholder="11"
v-html="innerText"
:contenteditable="canEdit"
@focus="isLocked =true"
@blur="isLocked =false"
@input="changeText">
</template>
watch: {
'value'(){
if (!this.isLocked && !this.innerText) {
this.innerText =this.value;
}
}
},
methods: {
changeText(){
this.$emit('input', this.$el.innerHTML);
}
},
父组件中只要 v-model='你想要绑定的数据'
对vue不熟悉，，当然这位大神也说看下官方文档v-model这一块
大致是如果父组件的v-model会首先绑定子组件的emit的input方法
