直接看代码
<template>
<!-- 视频弹窗 -->
<div class="hover-div">
<video
class="hover-div-video"
v-drag:[office]
autoplay="autoplay"
controls="controls"
muted="muted"
controlsList="nodownload"
>
<source
src="http://127.0.0.1/test/video/test.mp4"
type="video/mp4"
/>
</video>
</div>
</template>
<script>
export default {
data() {
return {
office: {
right: 100,
top: 50,
},
};
},
directives: {
drag: {
inserted: function (el, binding) {
el.style.position = "absolute";
el.style.left = binding.arg.left + "px";
el.style.top = binding.arg.top + "px";
el.onmousedown = function (e) {
var x = e.clientX - el.offsetLeft;
var y = e.clientY - el.offsetTop;
document.onmousemove = function (eve) {
el.style.left = eve.clientX - x + "px";
el.style.top = eve.clientY - y + "px";
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
},
},
};
</script>
<style lang="scss" scoped>
.hover-div {
background: #ffffff;
width: 20%;
height: 26%;
position: fixed;
bottom: 5rem;
right: 2rem;
padding: 5px;
background-color: rgba(0, 0, 0, 0);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
.hover-div-video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
</style>