对于vue的指令,有我们熟悉的v-model、v-show等,但我们也可以自己定义我们需要的指令,如比较常用的v-lazy懒加载
官方详细文档:https://cn.vuejs.org/v2/guide/custom-directive.html
通过directive就可以在Vue上注册指令
vue2.0
//引入main
如果出现报错使用第二种引入方法
// import directives from "./utils/directives";
import * as directives from "./utils/directives";
Vue.use(directives);
// 注册一个全局自定义指令 `v-focus`使用export default直接导出
export default Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 下拉列表 下拉加载获取分页
export default Vue.directive("loadMore", {
bind(el, binding, vnode) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector(
".el-select-dropdown .el-select-dropdown__wrap"
);
SELECTWRAP_DOM.addEventListener("scroll", function() {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (CONDITION) {
binding.value();
}
});
},
});
v-loadMore="事件名称"去使用自定义命令
vue3.0
常见的图片懒加载
// 图片懒加载,防抖,节流…
//引入main文件
因为返回的是一个directives 所以在main中遍历处理
import directives from "@/directives";
Object.keys(directives).forEach((key) => {
app.directive(key, directives[key]);
});
const LazyLoad = {
mounted(el, binding) {
let io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
let lazyImage = entry.target;
if (entry.intersectionRatio > 0) {
lazyImage.src = binding.value;
io.unobserve(lazyImage);
}
});
});
io.observe(el);
},
};
导出directives对象
const directives = {
LazyLoad,
};
export default directives;
注:自定义命令也可以用在权限按钮
列:
// 权限判断
function checkArray(key) {
let arr = ["admin", "edit"];
let has = arr.includes(key);
if (has) {
return true; // 有权限
} else {
return false; // 无权限
}
}
const permission = {
mounted(el, { value }) {
let permission = value.action || value; // 获取到 v-permission的值
let effect = value.effect;
// 是否禁用
if (effect == "disabled") {
el.disabled = true;
el.classList.add("is-disabled");
}
// 是否显示
if (permission) {
let hasPermission = checkArray(permission);
if (!hasPermission) {
// 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el);
}
}
},
};
或者使用permission.js 插件绑定按钮权限