通过Vue自定义指令实现窗口拖拽

直接上代码

<template>
	<h1>这是背景</h1>
    <!-- 视频弹窗 -->
    <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 {
		      collapsed: false,
		      realName: "",
		      welcomeText: "",
		      imgStr: "",
		      // 视频弹窗拖拽初始位置
		      office: {
		        right: 100,
		        top: 50
		      }
		    };
	    },
	    computed: {},
	    methods: {},
	    mounted() {},
		// 自定义指令: drag,用于拖拽组件
		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: 17%;
  height: 20%;
  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>

在上述代码中，涉及到的各参数及样式效果如下：

1. <video> 标签的属性：

   • autoplay="autoplay"：该属性设置视频自动播放，当视频加载完成后会自动开始播放。
   • controls="controls"：该属性显示视频的控制条，让用户可以控制视频的播放、暂停、音量等。
   • muted="muted"：该属性将视频设置为静音播放，使得视频默认以静音方式进行播放。
   • controlsList="nodownload"：该属性隐藏下载按钮，防止用户通过视频控件下载视频。

2. v-drag:[office]：

   • v-drag：这是一个自定义指令，用于实现窗口拖拽功能。
   • :office：这是指令的参数，通过 v-drag:[office] 将 office 对象传递给拖拽指令，指定了视频弹窗的初始位置。

3. data 选项中的 office 对象：

   • office 对象包含 right 和 top 两个属性，分别表示视频弹窗的初始位置距离右侧和顶部的像素值。在本例中，设置为 right: 100 和 top: 50。

4. 模板中的样式：

   • .hover-div：这个类定义了视频弹窗的样式。具体样式包括白色背景、固定位置、底部距离为 5rem、右侧距离为 2rem、边框圆角等。
   • .hover-div-video：这个类定义了视频标签的样式，包括宽度和高度为 100%，object-fit: fill 设置了视频的填充方式，保持视频的宽高比并填充整个容器。

总结：

以上代码实现了一个视频弹窗，并通过自定义指令 v-drag 实现了视频窗口的拖拽功能。视频弹窗有固定的样式，包括白色背景、固定位置、底部距离、右侧距离和边框圆角等。视频的播放、暂停、音量控制等操作可以通过控制条进行。

参考文章