使用插件:popper.js
HTML
<div id="popper" class="popper-box" v-show="showPopper">{{ popperString }}
<div class="arrow" v-show="showPopper"></div>
</div>
CSS
.popper-box {
pointer-events: none;
display: none;
}
.popper-box:not(:empty) {
z-index: 200;
background: #333;
color: white;
// font-weight: bold;
padding: 4px 8px;
font-size: 12px;
border-radius: 4px;
display: block;
.arrow, .arrow::before {
position: absolute;
left: 8px;
width: 8px;
height: 8px;
background: inherit;
}
.arrow {
visibility: hidden;
}
.arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
}
JS
popperCreate () {
const virtualElement = {
getBoundingClientRect: this.generateGetBoundingClientRect()
}
const instance = createPopper(virtualElement, document.getElementById('popper'), {
placement: 'right',
modifiers: [
{
name: 'offset',
options: {
offset: [-24, -20]
}
}
]
})
this.virtualElement = virtualElement
this.popperInstance = instance
const scheduleConatiner = document.getElementById('scheduleConatiner')
scheduleConatiner.addEventListener('mousemove', ({ clientX: x, clientY: y }) => {
virtualElement.getBoundingClientRect = generateGetBoundingClientRect(x, y);
instance.update();
});
scheduleConatiner.addEventListener('mouseleave', () => {
this.showPopper = false
})
},
generateGetBoundingClientRect (x = 0, y = 0) {
return () => ({
width: 0,
height: 0,
top: y,
right: x,
bottom: y,
left: x
})
},