diff --git a/frontend/src/directives/index.ts b/frontend/src/directives/index.ts deleted file mode 100644 index 24bd09bd7..000000000 --- a/frontend/src/directives/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { App } from 'vue'; -import copy from './modules/copy'; -import waterMarker from './modules/water-marker'; -import draggable from './modules/draggable'; -import debounce from './modules/debounce'; -import throttle from './modules/throttle'; -import longpress from './modules/longpress'; -import drawerDrag from './modules/drawer-drag'; - -const directivesList: any = { - // Custom directives - copy, - waterMarker, - draggable, - debounce, - throttle, - longpress, - drawerDrag, -}; - -const directives = { - install: function (app: App) { - Object.keys(directivesList).forEach((key) => { - // 注册所有自定义指令 - app.directive(key, directivesList[key]); - }); - }, -}; - -export default directives; diff --git a/frontend/src/directives/modules/copy.ts b/frontend/src/directives/modules/copy.ts deleted file mode 100644 index 219a4d029..000000000 --- a/frontend/src/directives/modules/copy.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * v-copy - * 复制某个值至剪贴板 - * 接收参数：string类型/Ref类型/Reactive类型 - */ -import { MsgSuccess } from '@/utils/message'; -import type { Directive, DirectiveBinding } from 'vue'; -interface ElType extends HTMLElement { - copyData: string | number; - __handleClick__: any; -} -const copy: Directive = { - mounted(el: ElType, binding: DirectiveBinding) { - el.copyData = binding.value; - el.addEventListener('click', handleClick); - }, - updated(el: ElType, binding: DirectiveBinding) { - el.copyData = binding.value; - }, - beforeUnmount(el: ElType) { - el.removeEventListener('click', el.__handleClick__); - }, -}; - -function handleClick(this: any) { - const input = document.createElement('input'); - input.value = this.copyData.toLocaleString(); - document.body.appendChild(input); - input.select(); - document.execCommand('Copy'); - document.body.removeChild(input); - MsgSuccess('复制成功'); -} - -export default copy; diff --git a/frontend/src/directives/modules/debounce.ts b/frontend/src/directives/modules/debounce.ts deleted file mode 100644 index a9f81ac4c..000000000 --- a/frontend/src/directives/modules/debounce.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * v-debounce - * 按钮防抖指令，可自行扩展至input - * 接收参数：function类型 - */ -import type { Directive, DirectiveBinding } from 'vue'; -interface ElType extends HTMLElement { - __handleClick__: () => any; -} -const debounce: Directive = { - mounted(el: ElType, binding: DirectiveBinding) { - if (typeof binding.value !== 'function') { - throw 'callback must be a function'; - } - let timer: NodeJS.Timeout | null = null; - el.__handleClick__ = function () { - if (timer) { - clearInterval(timer); - } - timer = setTimeout(() => { - binding.value(); - }, 500); - }; - el.addEventListener('click', el.__handleClick__); - }, - beforeUnmount(el: ElType) { - el.removeEventListener('click', el.__handleClick__); - }, -}; - -export default debounce; diff --git a/frontend/src/directives/modules/draggable.ts b/frontend/src/directives/modules/draggable.ts deleted file mode 100644 index 2514e9859..000000000 --- a/frontend/src/directives/modules/draggable.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* - 需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。 - - 思路： - 1、设置需要拖拽的元素为absolute，其父元素为relative。 - 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 - 3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值 - 4、鼠标松开(onmouseup)时完成一次拖拽 - - 使用：在 Dom 上加上 v-draggable 即可 -
-*/ -import type { Directive } from 'vue'; -interface ElType extends HTMLElement { - parentNode: any; -} -const draggable: Directive = { - mounted: function (el: ElType) { - 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; diff --git a/frontend/src/directives/modules/drawer-drag.ts b/frontend/src/directives/modules/drawer-drag.ts deleted file mode 100644 index b93110855..000000000 --- a/frontend/src/directives/modules/drawer-drag.ts +++ /dev/null @@ -1,60 +0,0 @@ -/* - 需求：实现一个drawer可拖拽指令。 - 使用：在 Dom 上加上 v-draggable 即可 - -*/ -import type { Directive } from 'vue'; -interface ElType extends HTMLElement { - parentNode: any; -} -const drawerDrag: Directive = { - mounted: function (el: ElType) { - const minWidth = 400; - const maxWidth = document.body.clientWidth; - const dragDom = el.querySelector('.el-drawer'); - (dragDom as HTMLElement).style.overflow = 'auto'; - - const resizeElL = document.createElement('div'); - dragDom.appendChild(resizeElL); - resizeElL.style.cursor = 'w-resize'; - resizeElL.style.position = 'absolute'; - resizeElL.style.height = '100%'; - resizeElL.style.width = '10px'; - resizeElL.style.left = '0px'; - resizeElL.style.top = '0px'; - - resizeElL.onmousedown = (e) => { - const elW = dragDom.clientWidth; - const EloffsetLeft = (dragDom as HTMLElement).offsetLeft; - const clientX = e.clientX; - document.onmousemove = function (e) { - e.preventDefault(); - // 左侧鼠标拖拽位置 - if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) { - // 往左拖拽 - if (clientX > e.clientX) { - if (dragDom.clientWidth < maxWidth) { - (dragDom as HTMLElement).style.width = elW + (clientX - e.clientX) + 'px'; - } else { - (dragDom as HTMLElement).style.width = maxWidth + 'px'; - } - } - // 往右拖拽 - if (clientX < e.clientX) { - if (dragDom.clientWidth > minWidth) { - (dragDom as HTMLElement).style.width = elW - (e.clientX - clientX) + 'px'; - } else { - (dragDom as HTMLElement).style.width = minWidth + 'px'; - } - } - } - }; - // 拉伸结束 - document.onmouseup = function () { - document.onmousemove = null; - document.onmouseup = null; - }; - }; - }, -}; -export default drawerDrag; diff --git a/frontend/src/directives/modules/longpress.ts b/frontend/src/directives/modules/longpress.ts deleted file mode 100644 index 5edf1a1d4..000000000 --- a/frontend/src/directives/modules/longpress.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * v-longpress - * 长按指令，长按时触发事件 - */ -import type { Directive, DirectiveBinding } from 'vue'; - -const directive: Directive = { - mounted(el: HTMLElement, binding: DirectiveBinding) { - if (typeof binding.value !== 'function') { - throw 'callback must be a function'; - } - // 定义变量 - let pressTimer: any = null; - // 创建计时器（ 2秒后执行函数 ） - const start = (e: any) => { - if (e.button) { - if (e.type === 'click' && e.button !== 0) { - return; - } - } - if (pressTimer === null) { - pressTimer = setTimeout(() => { - handler(e); - }, 1000); - } - }; - // 取消计时器 - const cancel = () => { - if (pressTimer !== null) { - clearTimeout(pressTimer); - pressTimer = null; - } - }; - // 运行函数 - const handler = (e: MouseEvent | TouchEvent) => { - binding.value(e); - }; - // 添加事件监听器 - el.addEventListener('mousedown', start); - el.addEventListener('touchstart', start); - // 取消计时器 - el.addEventListener('click', cancel); - el.addEventListener('mouseout', cancel); - el.addEventListener('touchend', cancel); - el.addEventListener('touchcancel', cancel); - }, -}; - -export default directive; diff --git a/frontend/src/directives/modules/throttle.ts b/frontend/src/directives/modules/throttle.ts deleted file mode 100644 index 07fdc9446..000000000 --- a/frontend/src/directives/modules/throttle.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - 需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。 - - 思路： - 1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮 - 2、将需要触发的方法绑定在指令上 - - 使用：给 Dom 加上 v-throttle 及回调函数即可 - -*/ -import type { Directive, DirectiveBinding } from 'vue'; -interface ElType extends HTMLElement { - __handleClick__: () => any; - disabled: boolean; -} -const throttle: Directive = { - mounted(el: ElType, binding: DirectiveBinding) { - if (typeof binding.value !== 'function') { - throw 'callback must be a function'; - } - let timer: NodeJS.Timeout | null = null; - el.__handleClick__ = function () { - if (timer) { - clearTimeout(timer); - } - if (!el.disabled) { - el.disabled = true; - binding.value(); - timer = setTimeout(() => { - el.disabled = false; - }, 1000); - } - }; - el.addEventListener('click', el.__handleClick__); - }, - beforeUnmount(el: ElType) { - el.removeEventListener('click', el.__handleClick__); - }, -}; - -export default throttle; diff --git a/frontend/src/directives/modules/water-marker.ts b/frontend/src/directives/modules/water-marker.ts deleted file mode 100644 index 598d52bde..000000000 --- a/frontend/src/directives/modules/water-marker.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* - 需求：给整个页面添加背景水印。 - - 思路： - 1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。 - 2、将其设置为背景图片，从而实现页面或组件水印效果 - - 使用：设置水印文案，颜色，字体大小即可 -
-*/ - -import type { Directive, DirectiveBinding } from 'vue'; -const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => { - // 水印文字，父元素，字体，文字颜色 - let can: HTMLCanvasElement = document.createElement('canvas'); - parentNode.appendChild(can); - can.width = 200; - can.height = 150; - can.style.display = 'none'; - let cans = can.getContext('2d') as CanvasRenderingContext2D; - cans.rotate((-20 * Math.PI) / 180); - cans.font = font || '16px Microsoft JhengHei'; - cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'; - cans.textAlign = 'left'; - cans.textBaseline = 'Middle' as CanvasTextBaseline; - cans.fillText(str, can.width / 10, can.height / 2); - parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'; -}; - -const waterMarker = { - mounted(el: DirectiveBinding, binding: DirectiveBinding) { - addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor); - }, -}; - -export default waterMarker; diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 82848c072..aff4fdc17 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -14,7 +14,6 @@ for (const path in styleModule) { styleModule[path]?.(); } -import directives from '@/directives/index'; import router from '@/routers/index'; import i18n from '@/lang/index'; import pinia from '@/store/index'; @@ -39,6 +38,5 @@ Object.keys(Icons).forEach((key) => { app.use(router); app.use(i18n); app.use(pinia); -app.use(directives); app.use(Components); app.mount('#app');