1.权限指令：
单个权限验证
多个权限验证，满足一个则显示
多个权限验证，全部满足则显示
import type {
App} from 'vue';
import {
useUserInfo} from '/@/stores/userInfo';
import {
judementSameArr} from '/@/utils/arrayOperation';
export function authDirective(app:App){
app.directive('auth',{
mounted(el,binding){
const stores = useUserInfo();
if(!stores.userInfos.authBtnList.some((v:string)=>v===binding.value))
el.parentNode.removeChild(el);
}
})
app.directive('auths',{
mounted(el,binding){
let flag = false;
const stores = useUserInfo();
stores.userInfos.authBtnList.map((val:string)=>{
binding.value.map((v:string)=>{
if(val===v) flag = true;
})
})
if(!flag) el.parentNode.removeChild(el);
}
})
app.directive('auth-all',{
mounted(el,binding){
const stores = useUserInfo();
const flag = judementSameArr(binding.value,stores.userInfos.authBtnList);
if(!flag) el.parentNode.removeChild(el);
}
})
}
2.按钮波浪指令：
默认方式：v-waves ，如<div v-waves></div>
参数方式：v-waves=" |light|red|orange|purple|green|teal"，如<div v-waves="'light'"></div>
export functio wavesDirective(app:App){
app.directive('waves',{
mounted(el,binding){
el.classList.add('waves-effect')l
binding.value&&el.classList.add(`waves-${
binding.value}`);
function setConvertStyle(obj:{
[key:string]:unknown}){
let style:string = '';
for(let i in obj){
if(obj.hasOwnProperty(i)) style+=`${
i}:${
obj[i]};`;
}
return style;
}
function onCurrentClick(e:{
[key:string]:unknown}){
let elDiv = document.createElement('div');
elDiv.classList.add('waves-ripple');
el.appednChild(elDiv);
let styles = {
left:`${
e.layerX}px`,
top:`${
e.layerY}px`,
opacity:1,
transform:`scale(${
el.clientWidth/100}*10)`,
'transition-duration':'750ms',
'transition-timing-function':'cubic-bezier(0.250,0.460,0.450,0.940)'
}
elDiv.setAttribute('style',setConvertStyle(styles));
setTimeout(()=>{
elDiv.setAttribute(
'style',
setConvertStyle({
opacity:0,
transform:styles.transform,
left:styles.left,
top:styles.top,
})
)
setTimeout(()=>{
elDiv&&el.removeChild(elDiv);
},750)
},450)
}
el.addEventListener('mousedown',onCurrentClick,false);
},
unmounted(el){
el.addEventListener('mousedown',()=>{
});
}
})
}
3.自定义拖动指令
使用方式 v-drag="[dragDom,dragHeader]"，如<div v-drag="['.drag-container .el-dialog','.drag-container .el-dialog__header']"></div>
dragDom要拖动的元素，dragHeader要拖动的header位置
export function dragDirective(app:App){
app.directive('drag',{
mounted(el,binding){
if(!binding.value) return false;
const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
dragHeader.onmouseover = ()=>(dragHeader.style.cursor='move')
function down(e:any,type:string){
const disX = type==='pc'?e.clientX - dragHeader.offsetLeft:e.touches[0].clientX - dragHeader.offsetLeft;
const disY = type==='pc'?e.clientY - dragHeader.offsetTop:e.touches[0].clientY - dragHeader.offsetTop;
const screenWidth = document.body.clientWidth;
const screenHeight = document.documentElement.clientHeight;
const dragDomWidth = dragDom.offsetWidth;
const dragDomheight = dragDom.offsetHeight;
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
let styL:any = getComputedStyle(dragDom).left;
let styT:any = getComputedStyle(dragDom).top;
if(styL.includes('%')){
styL = +document.body.clientWidth * (+styL.replace(/\%/g,'')/100);
styT = +document.body.clientHeight * (+styT.replace(/\%/g,'')/100);
}else{
styL = +styL.replace(/\px/g,'');
styT = +styT.replace(/\px/g,'');
}
return{
disX,
disY,
minDragDomLeft,
maxDragDomLeft,
minDragDomTop,
maxDragDomTop,
styL,
styT,
}
}
function move(e:any,type:string,obj:any){
let {
disX,disY,minDragDomLeft,maxDragDomLeft,minDragDomTop,maxDragDomTop,styL,styT} = obj;
let left = type ==='pc'?e.clientX - disX:e.touches[0].clientX - disX;
let top = type==='pc'?e.clientY - disY:e.touches[0].clientY - disY;
if(-left>minDragDomLeft){
left = -minDragDomLeft;
}else if(left<maxDragDomLeft){
left = maxDragDomLeft;
}
if(-top>minDragDomTop){
top = -minDragDomTop;
}else if(top>maxDragDomTop){
top = maxDragDomTop;
}
dragDom.style.cssText += `;left:${
left+styL}px;top:${
top+styT}px`;
}
dragHeader.onmousedown = e=>{
const obj = down(e,'pc');
document.onmousemove = e=>{
move(e,'pc',obj);
}
document.onmouseup = ()=>{
document.onmousemove = null;
document.onmouseup = null;
}
}
dragHeader.ontouchstart = e=>{
const obj = down(e,'app')
document.ontouchmove = e=>{
move(e,'app',obj);
}
document.ontouchend = ()=>{
document.ontouchmove = null;
document.ontouchend = null;
}
}
}
})
}