mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 08:19:15 +08:00
feat: Remove Redundant Code (#7484)
This commit is contained in:
zhengkunwang
GitHub
parent
8d48640c1d
commit
ea7e92db84
@ -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<Element>) {
|
|
||||||
Object.keys(directivesList).forEach((key) => {
|
|
||||||
// 注册所有自定义指令
|
|
||||||
app.directive(key, directivesList[key]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default directives;
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
/**
|
|
||||||
* v-copy
|
|
||||||
* 复制某个值至剪贴板
|
|
||||||
* 接收参数：string类型/Ref<string>类型/Reactive<string>类型
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
@ -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;
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
/*
|
|
||||||
需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
|
|
||||||
|
|
||||||
思路：
|
|
||||||
1、设置需要拖拽的元素为absolute，其父元素为relative。
|
|
||||||
2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
|
|
||||||
3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值
|
|
||||||
4、鼠标松开(onmouseup)时完成一次拖拽
|
|
||||||
|
|
||||||
使用：在 Dom 上加上 v-draggable 即可
|
|
||||||
<div class="dialog-model" v-draggable></div>
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
/*
|
|
||||||
需求：实现一个drawer可拖拽指令。
|
|
||||||
使用：在 Dom 上加上 v-draggable 即可
|
|
||||||
<el-drawer v-drawerDrag />
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
@ -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;
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
/*
|
|
||||||
需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
|
|
||||||
|
|
||||||
思路：
|
|
||||||
1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
|
|
||||||
2、将需要触发的方法绑定在指令上
|
|
||||||
|
|
||||||
使用：给 Dom 加上 v-throttle 及回调函数即可
|
|
||||||
<button v-throttle="debounceClick">节流提交</button>
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
/*
|
|
||||||
需求：给整个页面添加背景水印。
|
|
||||||
|
|
||||||
思路：
|
|
||||||
1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
|
|
||||||
2、将其设置为背景图片，从而实现页面或组件水印效果
|
|
||||||
|
|
||||||
使用：设置水印文案，颜色，字体大小即可
|
|
||||||
<div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
|
|
||||||
*/
|
|
||||||
|
|
||||||
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;
|
|
||||||
@ -14,7 +14,6 @@ for (const path in styleModule) {
|
|||||||
styleModule[path]?.();
|
styleModule[path]?.();
|
||||||
}
|
}
|
||||||
|
|
||||||
import directives from '@/directives/index';
|
|
||||||
import router from '@/routers/index';
|
import router from '@/routers/index';
|
||||||
import i18n from '@/lang/index';
|
import i18n from '@/lang/index';
|
||||||
import pinia from '@/store/index';
|
import pinia from '@/store/index';
|
||||||
@ -39,6 +38,5 @@ Object.keys(Icons).forEach((key) => {
|
|||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(i18n);
|
app.use(i18n);
|
||||||
app.use(pinia);
|
app.use(pinia);
|
||||||
app.use(directives);
|
|
||||||
app.use(Components);
|
app.use(Components);
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user