我们知道&＃xff0c;微信的聊天框是可以输入图片和文字并存的。其实很简单&＃xff0c;只要给div赋予 contenteditable&＃61;"true" 属性就可以编辑div的内容&＃xff0c;话不多说直接贴代码。
预览(样式较丑望忽略)&＃xff1a;
export default {
name: "chat",
data() {
return {
contents: []
}
},
methods: {
subShow(idx) {
this.contents.push({ idx: idx, content: this.$refs.is_rich.innerHTML })
this.$refs.is_rich.innerHTML &＃61; &＃39;&＃39;
}
}
}
.out-box {
display: flex;
justify-content: space-between;
}
.main {
width: auto;
height: auto;
}
.main span {
display: block;
padding: 10px 0;
}
.rich-box {
width: 600px;
height: 50vh;
position: relative;
overflow: scroll;
border: 1px solid black;
padding: 20px;
background: white;
}
.rich-box>>>img {
width: auto;
height: 100px;
object-fit: contain;
}
.btn-box {
width: 240px;
display: flex;
margin: 0 auto;
}
.button {
width: 100px;
height: 30px;
border-radius: 5px;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: all 300ms;
border: 1px solid black;
margin: 5px auto;
color: white;
}
.send {
background: #009aff;
}
.review {
background: darkorange;
}
.msg-box {
width: 600px;
height: 50vh;
overflow: scroll;
border: 1px solid black;
padding: 20px;
background: white;
}
.content-box {
display: flex;
margin: 5px;
}
.show-box {
width:fit-content;
height: auto;
position: relative;
padding: 10px 10px;
border-radius: 5px;
background: rgb(102, 215, 97);
}
.left {
background: rgb(102, 215, 97);
justify-content: left;
}
.right {
background: rgb(196, 196, 196);
justify-content: right;
}
.show-box>>>img {
width: auto;
height: 100px;
object-fit: contain;
padding: 5px;
}
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 