vue2.0 全局挂载自定义指令和组件

一、在src>components下新建index.js

 二、在这个 index.js 里引入组件及自定义指令

// 引入自定义分页组件
import paging from "@/components/common/paging.vue";

export default {
    // 全局挂载
  install(Vue) {
    //   挂载为全局组件
    Vue.component("paging", paging);
    // 自定义拖拽指令
    Vue.directive('drag', {
      inserted:function(el){
        // 设置样式
        el.style.position = 'absolute';
        el.style['-webkit-user-select'] = 'none';
        el.style['-ms-user-select'] = 'none';
        el.style['-moz-user-select'] = '-moz-none';
        el.style.cursor = 'pointer';
        // 事件监听
        el.onmousedown=function(e){
            let l=e.clientX-el.offsetLeft;
            let t=e.clientY-el.offsetTop;
            document.onmousemove=function(e){
                el.style.left=e.clientX-l+'px';
                el.style.top=e.clientY-t+'px';
            };
            el.onmouseup=function(){
                document.onmousemove=null;
                el.onmouseup=null;
            }
        }
      }
    });
    // 自定义节流按钮指令
    Vue.directive('pre4',{
			inserted(button,bind){
                // 事件监听
				button.addEventListener('click',()=>{
					if(!button.disabled){
						button.disabled = true;
						setTimeout(()=>{
							button.disabled = false
						},1000)
					}
				})
			}
		});

  }
};

三、在 main.js 里安装这个插件

1、导入

import plugin from "@/components/index.js";  // 自定义插件

2、安装（要放在new Vue() 之前）

Vue.use(plugin)

main.js 代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import plugin from "@/components/index.js"; // 自定义插件

Vue.config.productionTip = false;

Vue.use(plugin) // 安装插件


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

四、开始使用

<paging></paging

<div v-drag></div>

<button v-pre4></button>