demo
contenteditable // 指定元素内容是否可编辑
例子:
<template>
<div class="interactBubbleBox">
<el-scrollbar style="height: 100%; overflow: hidden">
<div>
<p v-for="item in bubbleList" :key="item.value" @mousedown="(e) => selectTemp(e, item)">{{item.label}}</p>
</div>
</el-scrollbar>
</div>
</template>
<script>
const bubbleList = [
{value: '1', label: '方案一'},
{value: '2', label: '方案二'},
{value: '3', label: '方案三'},
]
export default {
data() {
return {
bubbleList
}
},
methods: {
selectTemp(e, temp) {
let dom = this.getElement(temp)
dom.style.left = (e.clientX-5) + 'px'
dom.style.top = (e.clientY-5) + 'px'
dom.onclick = () => this.saveBubble()
document.onmousemove = e => {
dom.style.left = (e.clientX-5) + 'px'
dom.style.top = (e.clientY-5) + 'px'
}
},
saveBubble() {
document.onmousemove = null
},
getElement(temp) {
const type = temp.value
if (type === '1') { // 方案一
let dom = document.createElement('div')
dom.className = 'interactBubbleBox_temp'+type
dom.setAttribute('contenteditable', true)
document.body.appendChild(dom)
dom.onmousedown = function (e) {
let disX = e.clientX - dom.offsetLeft;
let disY = e.clientY - dom.offsetTop;
document.onmousemove = e => {
let left = e.clientX - disX;
let top = e.clientY - disY;
this.style.left = (left) + 'px'
this.style.top = (top) + 'px'
}
}
return dom
}
},
setStyle(dom, style) {
for(let i in style) {
dom.style[i] = style[i]
}
},
}
}
</script>
<style lang="scss">
.interactBubbleBox {
border: 2px #35a5ed solid;
width: 160px;
height: 120px;
background: rgba(255, 255, 255, 0.9);
position: absolute;
top: 357px;
right: 56px;
padding: 6px 0px 6px 10px;
border-radius: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
&::before {
content: "";
width: 0;
height: 0;
border: 8px solid;
position: absolute;
top: 7px;
right: -18px;
border-color: transparent transparent transparent #35a5ed;
}
&::after {
content: "";
width: 0;
height: 0;
border: 8px solid;
position: absolute;
top: 7px;
right: -15px;
border-color: transparent transparent transparent white;
}
}
.interactBubbleBox_temp1 {
min-width: 100px;
min-height: 30px;
position: absolute;
background: #fff;
padding: 10px;
border-radius: 5px;
border: 1px #999 solid;
}
</style>
