install与directive

install(Vue,option)

• Vue.js提供install方法，可用于开发新插件以及全局注册组件等

export default {
//vue的构造器，option可选的选项对象
  install(Vue,option){ 
    组件
    指令
    混入
    挂载vue原型
  }
}

• 全局注册组件

// components.js文件中
import ScreenFull from './ScreenFull'
import TagsView from './TagsView'
export default {
  install(Vue) {
    Vue.component('ScreenFull', ScreenFull)
    Vue.component('TagsView', TagsView)
  }
}
// main.js文件中
import Component from '@/components'
Vue.use(Component)

Vue.directive("指令名",ƒunction)

Vue.directive("指令名",function(el,binding,vnode,oldVnode){})
/* 参数
* @el 指令绑定的元素，可以直接操作DOM
* @binding 一个对象，包含属性
* @vnode vue编译的生成虚拟节点
* @oldVnode 上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
* */
Vue.directive('pin', function(el,binding,vnode,oldvnode) {
  el.style.background = binding.value //背景颜色
})
/* 钩子函数
* @bind 只调用一次，指令第一次绑定到元素时调用
* @inserted 被绑定元素插入父节点时调用
* @update 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
* @componentUpdated 被绑定元素所在模板完成一次更新周期时调用
* @unbind 只调用一次， 指令与元素解绑时调用
* */
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    el.focus();    // 聚焦元素
    el.value = '初始值'
  },
});

• 权限字符指令

// 创建directive文件，包含index.js、hasPermi.js
//index.js中
import hasPermi from './hasPermi'
const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
}
export default install

// hasPermi.js中
import store from '@/store'
export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    //const permissions = store.getters && store.getters.permissions // 登录后获取的当前登录用户的权限字符数组
    const permissions = ["but"]  
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

// main.js 
import directive from './directive'
Vue.use(directive)

// 使用
v-hasPermi="['but']"

• 弹窗拖拽指令

/**
 * v-dialogDrag 弹窗拖拽
 * Copyright (c) 2019 ruoyi
 */

export default {
   bind(el, binding, vnode, oldVnode) {
      const value = binding.value
      if (value == false) return
      // 获取拖拽内容头部
      const dialogHeaderEl = el.querySelector('.el-dialog__header');
      const dragDom = el.querySelector('.el-dialog');
      dialogHeaderEl.style.cursor = 'move';

      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
      dragDom.style.position = 'absolute';
      dragDom.style.marginTop = 0;
      let width = dragDom.style.width;

      if (width.includes('%')) {
         width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
      } else {
         width = +width.replace(/\px/g, '');
      }
      dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
      // 鼠标按下事件
      dialogHeaderEl.onmousedown = (e) => {
         // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
         const disX = e.clientX - dialogHeaderEl.offsetLeft;
         const disY = e.clientY - dialogHeaderEl.offsetTop;

         // 获取到的值带px 正则匹配替换
         let styL, styT;

         // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
         if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
         } else {
            styL = +sty.left.replace(/\px/g, '');
            styT = +sty.top.replace(/\px/g, '');
         };

         // 鼠标拖拽事件
         document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
            const l = e.clientX - disX;
            const t = e.clientY - disY;

            let finallyL = l + styL
            let finallyT = t + styT

            // 移动当前元素
            dragDom.style.left = `${finallyL}px`;
            dragDom.style.top = `${finallyT}px`;

         };

         document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
         };
      }
   }
};

待续。。。