feat: 🚀 父级拖拽框

src/directives/modules/draggable.ts

@@ -0,0 +1,66 @@
+import type { Directive } from 'vue';
+interface ELType extends HTMLElement {
+	parentNode: any;
+}
+
+/*
+	需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
+
+	思路：
+		1、设置需要拖拽的元素为absolute，其父元素为relative。
+		2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
+		3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
+		4、鼠标松开(onmouseup)时完成一次拖拽
+
+	使用：在 Dom 上加上 v-draggable 即可
+	<div class="dialog-model" v-draggable></div>
+*/
+const draggable: Directive = {
+	mounted(el: ELType) {
+		// 将光标设置为“move”，将位置设置为“absolute”
+		el.style.cursor = 'move';
+		el.style.position = 'absolute';
+		// 当元素被点击时
+		el.onmousedown = function (e) {
+			// 计算鼠标点击位置与元素左上角之间的距离
+			let disX = e.pageX - el.offsetLeft;
+			let disY = e.pageY - el.offsetTop;
+
+			// 当鼠标移动时
+			document.onmousemove = function (e) {
+				// 计算元素的新位置
+				let x = e.pageX - disX;
+				let y = e.pageY - disY;
+
+				// 计算元素可以移动到的最大位置
+				let maxX = el.parentNode.offsetWidth - el.offsetWidth;
+				let maxY = el.parentNode.offsetHeight - el.offsetHeight;
+
+				// 确保元素不会超出其父元素的边界
+				if (x < 0) {
+					x = 0;
+				} else if (x > maxX) {
+					x = maxX;
+				}
+
+				if (y < 0) {
+					y = 0;
+				} else if (y > maxY) {
+					y = maxY;
+				}
+
+				// 设置元素的新位置
+				el.style.left = x + 'px';
+				el.style.top = y + 'px';
+			};
+
+			// 当鼠标释放时
+			document.onmouseup = function () {
+				// 停止跟踪鼠标移动
+				document.onmousemove = document.onmouseup = null;
+			};
+		};
+	},
+};
+
+export default draggable;

src/directives/modules/waterMarker.ts

@@ -1,5 +1,15 @@
 import type { Directive, DirectiveBinding } from 'vue';
 
+/*
+  需求：给整个页面添加背景水印。
+
+  思路：
+    1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
+    2、将其设置为背景图片，从而实现页面或组件水印效果
+  
+  使用：设置水印文案，颜色，字体大小即可
+  <div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
+*/
 const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {
 	// 创建一个canvas元素
 	let can: HTMLCanvasElement = document.createElement('canvas');