Vue自定义指令 之 elementUI中v-loading的源码分析
Vue自定义指令基础使用教程。https://cn.vuejs.org/v2/guide/custom-directive.html#ad钩子函数&&钩子函数参数el:操作DOM,binding:在元素上get你想读取的值,自定义指令使用实例:elementUIAPI文档中给出的使用教程:https://element.eleme.cn/2.6/#/zh-CN/...
·
Vue自定义指令基础
使用教程。
https://cn.vuejs.org/v2/guide/custom-directive.html#ad
钩子函数&&钩子函数参数
el:操作DOM,
binding:在元素上get你想读取的值,
自定义指令使用实例:
elementUIAPI文档中给出的使用教程:
https://element.eleme.cn/2.6/#/zh-CN/component/loading
elementUI中源码
Vue.directive('loading', {
bind: function(el, binding, vnode) {
// el :绑定 v-loading 的元素节点
const textExr = el.getAttribute('element-loading-text');
const spinnerExr = el.getAttribute('element-loading-spinner');
const backgroundExr = el.getAttribute('element-loading-background');
const customClassExr = el.getAttribute('element-loading-custom-class');
const vm = vnode.context;
const mask = new Mask({
el: document.createElement('div'), // 在loding.vue中添加元素div节点
data: {
text: vm && vm[textExr] || textExr,
spinner: vm && vm[spinnerExr] || spinnerExr,
background: vm && vm[backgroundExr] || backgroundExr,
customClass: vm && vm[customClassExr] || customClassExr,
fullscreen: !!binding.modifiers.fullscreen // 获取调用者在组件中的
}
});
el.instance = mask;
el.mask = mask.$el;
el.maskStyle = {};
binding.value && toggleLoading(el, binding);
},
update: function(el, binding) {
el.instance.setText(el.getAttribute('element-loading-text'));
if (binding.oldValue !== binding.value) {
toggleLoading(el, binding);
}
},
unbind: function(el, binding) {
if (el.domInserted) {
el.mask &&
el.mask.parentNode &&
el.mask.parentNode.removeChild(el.mask);
toggleLoading(el, { value: false, modifiers: binding.modifiers });
}
}
});
更多推荐
已为社区贡献2条内容
所有评论(0)