Vue使用div模拟input框,并实现vue双向绑定
<template><div class="h-edit-head-content-title edit-div" contenteditable="true" v-text="content"@input="changeText"@focus="isLocked = true"@blur="isLocked = false"></div></templa
·
利用div的contenteditable属性,该属性设置为true可以使div可以进行编辑
<template>
<div class="h-edit-head-content-title edit-div" contenteditable="true" v-text="content"
@input="changeText"
@focus="isLocked = true"
@blur="isLocked = false"
>
</div>
</template>
<script>
module.exports ={
name: 'editor',
props: ['value'],
model: {
prop: 'value',
event: 'input',
},
data() {
return {
content: this.value, //编辑器内容
isLocked: false
}
},
methods: {
changeText(){
//this.content = this.$el.innerHTML;
this.$emit('input',this.$el.innerHTML);
}
}, watch: {
'value'(){
if (!this.isLocked || !this.content) {
this.content = this.value;
//console.log(this.content);
}
}
}
}
</script>
<style >
.params .el-form-item__content{
line-height: 0px !important;
position: relative;
font-size: 14px;
}
.edit-div {
width: 100%;
height: 100%;
overflow: auto;
word-break: break-all;
outline: none;
user-select: text;
white-space: pre-wrap;
text-align: left;
}
.edit-div[contenteditable=true] {
user-modify: read-write-plaintext-only;
}
.edit-div[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
color: #ccc;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)