原文地址:https://blog.csdn.net/qq_34629352/article/details/81708024
聊天应用中怎么把DIV改造成输入框!
效果实现:
这个组件是一位大佬写的,效果不错,拿来即用,
组件代码如下:
<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,
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>
.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>
这里可以保存到项目中的任意位置,名字由自己命名,接下来引用的时候,就带上自定义的名字:
import editor from '@/components/view/editor'
然后再
components:{editor},
最后在html里面使用组件:
<editor id="editor-" v-model="input_content" class="editor-" ></editor>
感谢 包磊磊的这篇文章:
https://blog.csdn.net/qq_34629352/article/details/81708024
https://blog.csdn.net/qq_34629352