写一个可编辑文本的小组件
<template>
<span class="edit-div" v-html="innerText" :contenteditable="canEdit" @focus="isLocked = true" @blur="isLocked = false" @input="changeText" :placeholder="placeholder" style="line-height:40px;cursor:pointer;color:teal;">
</span>
</template>
<script type="text/ecmascript-6">
export default {
name: "editSpan",
props: {
value: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "请输入"
},
canEdit: {
type: Boolean,
default: true
}
},
data() {
return {
innerText: this.value,
isLocked: false
};
},
watch: {
value() {
if (!this.isLocked) {
this.innerText = this.value;
}
}
},
methods: {
changeText() {
this.$emit("input", this.$el.innerHTML);
}
}
};
</script>
<style lang="scss" rel="stylesheet/scss">
.edit-div {
height: 100%;
word-break: break-all;
user-select: text;
white-space: pre-wrap;
&[contenteditable="true"] {
user-modify: read-write-plaintext-only;
&:empty:before {
content: attr(placeholder);
display: inline-block;
color: #ccc;
}
}
}
</style>
在需要编辑文本的地方引用这个组件
<edit-span :value="item.message" @input="val=>item.message=val"></edit-span>
即可