vue中使用 contenteditable 制作输入框并使用v-model做双向绑定

<template>
<div class="div-input"
:class="value.length > 0 ? 'placeholder_hide' : ''"
:style="{'min-width': minWidth}"
:contenteditable="input"
:placeholder="placeholder"
@focus="ischecked = true"
@blur="blurFn"
@input="inputFn"
v-html="text"></div>
</template><script>
export default {
name: 'DivInput',
props: {
input: {
type: Boolean,
default: true
},
minWidth: {
type: String,
default: '2.2em'
},
placeholder: {
type: String,
default: 'asdasdasda'
},
value: {
type: String,
default: ''
}
},
data () {
return {
ischecked: false,
text: this.value
}
},
mounted () {
},
watch: {
value () {
// 解决光标跳动BUG
if (!this.ischecked) {
this.text = this.value
}
}
},
methods: {
inputFn (e) {
const val = e.target.innerHTML
this.$emit('input', val)
},
blurFn (e) {
this.ischecked = false
this.text = this.value
e.view.blur()
}
}
}
</script><style lang="scss">
.div-input {
display: inline-block;
min-width: 4em;
border-bottom: 1px solid #ccc;
outline: none;
padding: 0 5px;
&:focus{
border-color: #333;
}
&:before {
content: attr(placeholder);
white-space: nowrap;
width: 100%;
color: #aaa;
z-index: 0;
cursor: text;
}
&.placeholder_hide {
&:before {
display: none;
}
}
}
</style>