directive目录下index.js
import store from "@/store";
const focus = (app) => {
app.directive("focus", {
mounted(el) {
el.focus();
},
});
};
const permission = (app) => {
app.directive("permission", {
mounted(el, binding) {
const { value } = binding;
const permissions = store.getters.permissions;
if (value) {
const hasPermission = permissions.some(
(permission) => permission == value
);
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error("需要指定权限");
}
},
});
};
const debounce = (app) => {
app.directive("debounce", {
mounted(el, binding) {
try {
let fn,
event = "click",
time = 500;
if (typeof binding.value == "function") {
fn = binding.value;
} else {
[fn, event, time] = binding.value;
}
let timer;
el.addEventListener(event, () => {
timer && clearTimeout(timer);
timer = setTimeout(() => fn(), time);
});
} catch (error) {
console.log("防抖指令错误", error);
}
},
});
};
const throttle = (app) => {
app.directive("throttle", {
mounted(el, binding) {
try {
let fn,
event = "click",
time = 1500;
if (typeof binding.value == "function") {
fn = binding.value;
} else {
[fn, event, time] = binding.value;
}
/**
* el.preTime 记录上次触发的时间
* 每次触发比较nowTime(当前时间) 和 el.preTime 的差是否大于指定的时间段!
*/
el.addEventListener(event, () => {
const nowTime = new Date().getTime();
if (!el.preTime || nowTime - el.preTime > time) {
console.log(
!el.preTime,
nowTime - el.preTime,
nowTime - el.preTime > time
);
el.preTime = nowTime;
fn();
}
});
} catch (error) {
console.log("节流指令错误", error);
}
},
});
};
export default (app) => {
focus(app);
permission(app);
debounce(app);
throttle(app);
};
main.js全局定义directive
...
import { createApp } from "vue";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";
import defineDirectives from "@/directive/index";
...
const app = createApp(App);
defineDirectives(app);
app.use(router).use(store).mount("#app");
在组件中使用:
<template>
<div v-permission="admin">
admin
</div>
<div v-permission="user">
user
</div>
<input type="text" v-focus />
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
setup() {
const permission = reactive({
admin: "admin",
user: "user"
})
return {
...toRefs(permission)
}
}
}
</script>
网友评论