im 管理后台
This commit is contained in:
richjohnrambo
@@ -0,0 +1,86 @@
|
||||
import { on } from '@/utils/domUtils';
|
||||
import { isServer } from '@/utils/is';
|
||||
import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
|
||||
|
||||
type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
|
||||
|
||||
type FlushList = Map<
|
||||
HTMLElement,
|
||||
{
|
||||
documentHandler: DocumentHandler;
|
||||
bindingFn: (...args: unknown[]) => unknown;
|
||||
}
|
||||
>;
|
||||
|
||||
const nodeList: FlushList = new Map();
|
||||
|
||||
let startClick: MouseEvent;
|
||||
|
||||
if (!isServer) {
|
||||
on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
|
||||
on(document, 'mouseup', (e: MouseEvent) => {
|
||||
for (const { documentHandler } of nodeList.values()) {
|
||||
documentHandler(e, startClick);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
|
||||
let excludes: HTMLElement[] = [];
|
||||
if (Array.isArray(binding.arg)) {
|
||||
excludes = binding.arg;
|
||||
} else {
|
||||
// due to current implementation on binding type is wrong the type casting is necessary here
|
||||
excludes.push(binding.arg as unknown as HTMLElement);
|
||||
}
|
||||
return function (mouseup, mousedown) {
|
||||
const popperRef = (
|
||||
binding.instance as ComponentPublicInstance<{
|
||||
popperRef: Nullable<HTMLElement>;
|
||||
}>
|
||||
).popperRef;
|
||||
const mouseUpTarget = mouseup.target as Node;
|
||||
const mouseDownTarget = mousedown.target as Node;
|
||||
const isBound = !binding || !binding.instance;
|
||||
const isTargetExists = !mouseUpTarget || !mouseDownTarget;
|
||||
const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
|
||||
const isSelf = el === mouseUpTarget;
|
||||
|
||||
const isTargetExcluded =
|
||||
(excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
|
||||
(excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
|
||||
const isContainedByPopper =
|
||||
popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
|
||||
if (
|
||||
isBound ||
|
||||
isTargetExists ||
|
||||
isContainedByEl ||
|
||||
isSelf ||
|
||||
isTargetExcluded ||
|
||||
isContainedByPopper
|
||||
) {
|
||||
return;
|
||||
}
|
||||
binding.value();
|
||||
};
|
||||
}
|
||||
|
||||
const ClickOutside: ObjectDirective = {
|
||||
beforeMount(el, binding) {
|
||||
nodeList.set(el, {
|
||||
documentHandler: createDocumentHandler(el, binding),
|
||||
bindingFn: binding.value,
|
||||
});
|
||||
},
|
||||
updated(el, binding) {
|
||||
nodeList.set(el, {
|
||||
documentHandler: createDocumentHandler(el, binding),
|
||||
bindingFn: binding.value,
|
||||
});
|
||||
},
|
||||
unmounted(el) {
|
||||
nodeList.delete(el);
|
||||
},
|
||||
};
|
||||
|
||||
export default ClickOutside;
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* v-copy
|
||||
* 复制某个值至剪贴板
|
||||
* 接收参数：string类型/Ref<string>类型/Reactive<string>类型
|
||||
*/
|
||||
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);
|
||||
console.log('复制成功', this.copyData);
|
||||
}
|
||||
|
||||
export default copy;
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 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;
|
||||
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。
|
||||
|
||||
思路：
|
||||
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) {
|
||||
const disX = e.pageX - el.offsetLeft;
|
||||
const disY = e.pageY - el.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
let x = e.pageX - disX;
|
||||
let y = e.pageY - disY;
|
||||
const maxX = el.parentNode.offsetWidth - el.offsetWidth;
|
||||
const 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;
|
||||
@@ -0,0 +1,19 @@
|
||||
import { ObjectDirective } from 'vue';
|
||||
import { usePermission } from '@/hooks/web/usePermission';
|
||||
|
||||
export const permission: ObjectDirective = {
|
||||
mounted(el: HTMLButtonElement, binding) {
|
||||
if (binding.value == undefined) return;
|
||||
const { action, effect } = binding.value;
|
||||
const { hasPermission } = usePermission();
|
||||
if (!hasPermission(action)) {
|
||||
if (effect == 'disabled') {
|
||||
el.disabled = true;
|
||||
el.style['disabled'] = 'disabled';
|
||||
el.classList.add('n-button--disabled');
|
||||
} else {
|
||||
el.remove();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
|
||||
|
||||
思路：
|
||||
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;
|
||||
Reference in New Issue
Block a user