<template>
<div class="edit-div"
v-html="innerText"
:contenteditable="canEdit"
@focus="isLocked = true"
@blur="isLocked = false"
@input="changeText">
</div>
</template>
<script>
export default {
name: 'EditDiv',
props: {
value: {
type: [String, Number],
default: ''
},
canEdit: {
type: [Boolean, String],
default: 'plaintext-only'
}
},
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">
.edit-div {
width: 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;
-webkit-user-modify: read-write-plaintext-only;
&:empty{
&:before {
content:'暂无';
display: block;
color: #ccc;
}
}
}
&[contenteditable='plaintext-only']{
user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
&:empty{
cursor: text;
&:before {
content:'暂无';
display: block;
color: #ccc;
}
}
}
}
</style>
|
