vue自定义加载指令v-loading占位图指令v-showimg_vue.js_

//main.js文件中 Vue.directive("color", { 钩子函数 }) 

import Vue from 'vue' //引入加载动画组件 import LoadingCom from './LoadingCom.vue' const loadingDirectiive = { inserted(el, bing) { // el ==>表示被绑定了指令的那个元素，这个el是一个原生的js对象。 // bing ==> 指令相关的信息 // 得到一个组件的构造函数 const loadingCtor = Vue.extend(LoadingCom) // 得到实例loadingComp const loadingComp = new loadingCtor() // 获取实例的html const htmlLoading = loadingComp.$mount().$el // 将html放在el的实例上面去 el.myHtml = htmlLoading if (bing.value) { appendHtml(el) } }, update(el, bing) { // bing.value 是v-loading绑定的那个值； true 要显示加载动画 //新值 bing.value与旧值bing.oldValue是否相等 if (bing.value !== bing.oldValue ) { bing.value ? appendHtml(el) : removeHtml(el) } } } function appendHtml(el) { el.appendChild(el.myHtml) } function removeHtml(el) { el.removeChild(el.myHtml) } export default loadingDirectiive 

// 得到一个组件的构造函数 const loadingCtor = Vue.extend(LoadingCom) // 得到实例loadingComp const loadingComp = new loadingCtor() // 获取实例的html。将html放在el的实例上面去。 // 放在el实例上的优势是方便访问。 // $el是可以访问加载动画的html。 // 这样就可以将它添加到某一个节点上。同时也方便移除 const htmlLoading = loadingComp.$mount().$el el.myHtml = htmlLoading 

import loadingDirectiive from './components/loading/loading' Vue.directive('loading', loadingDirectiive) Vue.directive("color", { 钩子函数 }) 

import Vue from 'vue' import ShowImgCom from './ShowImgCom.vue' const showimgDirectiive = { inserted(el, bing) { const showimgCtor = Vue.extend(ShowImgCom) const showImgComp = new showimgCtor() const htmlSHowPic = showImgComp.$mount().$el el.myHtml = htmlSHowPic if (bing.value) { appendHtml(el) } }, update(el, bing) { if (bing.value !== bing.oldValue) { bing.value ? appendHtml(el) : removeHtml(el) } } } function appendHtml(el) { el.appendChild(el.myHtml) } function removeHtml(el) { el.removeChild(el.myHtml) } export default showimgDirectiive 

import showimgDirectiive from './components/ShowImg/showimg' Vue.directive('showimg', showimgDirectiive)