vue-use应用自定义指令

vue-use应用

  相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？

  答案
  因为 axios 没有 install。
  什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。

1.自定义指令

  以自定义指令举例，也可以自定义组件。
  install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数

const Loading = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function(Vue) {
    Vue.directive(
      'loading', {
        inserted: function(el) {
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true;
              setTimeout(() => {
                el.disabled = false;
              }, 5000);
            }
          });
        }
      }
    );
  }
};
// 导出
export default Loading;

  main.js引入，并通过Vue.use() 使用指令

import Loading from './directive/loading/index';
Vue.use(Loading);

  vue页面引用自定义指令v-loading

<el-button class="submit-btn" type="primary" @click="handleLogin()"  :disabled="btnDisabled" v-loading >登 录</el-button>