使用组件
单独声明一个组件,在组件内部处理数据(也就是innerHTML),并将数据返回给父组件。
代码如下:
<template>
<div class="edit-div"
v-html="innerText"
:contenteditable="canEdit"
@focus="isLocked = true"
@blur="isLocked = false"
@input="changeText">
</div>
</template>
<script type="text/ecmascript-6">
export default{
name: 'editDiv',
props: {
value: {
type: String,
default: ''
},
canEdit: {
type: Boolean,
default: true
}
},
data(){
return {
innerText: this.value,
isLocked: false
}
},
watch: {
'value'(){
if (!this.isLocked || !this.innerText) {
this.innerText = this.value;
}
}
},
methods: {
changeText(){
this.$emit('input', this.$el.innerHTML);
}
}
}
</script>
<style lang="scss" rel="stylesheet/scss">
.edit-div {
width: 100%;
height: 100%;
overflow: auto;
word-break: break-all;
outline: none;
user-select: text;
white-space: pre-wrap;
text-align: left;
&[contenteditable=true]{
user-modify: read-write-plaintext-only;
&:empty:before {
content: attr(placeholder);
display: block;
color: #ccc;
}
}
}
</style>
然后在父组件中直接使用 v-model 就可以了(这里我把组件名称定义成了 v-edit-div)。
<template>
<div>
<v-edit-div v-model='text'></v-edit-div>
<span>{{text}}</span>
</div>
</template>
<script>
export default {
data(){
return {
text:'改一下试一试',
}
}
}
</script>
这个版本是在项目中最终使用的版本,需要用的直接拿走用即可。
注:
canEdit 标志这个div是否是可编辑的,在父组件直接使用 v-model 即可。
该组件应该是一个div元素(也不一定非要是div)的子元素,父元素的大小即为子元素的大小。
感谢分享https://segmentfault.com/a/1190000008261449