vue 组件化开发（四）mixin 全局混入自定义下拉刷新指令

首先我们要明确一下自定义指令以及mixin 的注册方法

自定义指令

bind：每当指令绑定到元素上的时候,会立即执行这个 bind 函数，只执行一次。
注意：在每个函数中第一个参数，永远是el,表示被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象。
inserted：元素插入到DOM中的时候，会执行inserted函数[触发一次]
updated：当VNode 更新的时候，会执行 updated，可能会触发多次。

自定义指令可以在组件内注册也可以在全局注册（main.js）

1.组件内注册的方法：

实例1：自动获取焦点的自定义指令

  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.querySelector("input").focus();
      }
    }
  }

组件中使用：

         <el-input
            class="nodeInput"
            v-focus
          ></el-input>

实例2：定义调用时可传参的指令

  Vue.directive('color',{
    bind:function(el,binding){
      el.style.color = binding.value;
    },
  })

组件中使用：

<h3 v-color="'orange'"></h3>

binding对象包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1+1”，value的值是2.
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中使用。无论值是否改变都可用。
expression：绑定值的字符串形式。例如 v-my-directive=“1+1”，expression的值是 “1+1”.
arg：传给指令的参数。例如 v-my-directive:foo，arg的值是"foo".

2.全局注册的方法：

Vue.directive('mfocus',{
	inserted(el){
		el.focus()
	}
});

组件使用：

<input type='text'  v-mfocus />

mixin 的全局混入和组件内混入方式

混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
在我们项目中 mixin 作为一种混入已达到方法，数据的可复用。但是一个组件内建议不要混入太多mixin，这样代码的维护性会很差。一般我们会把一些通用的数据模板，钩子函数还有一些公共的方法，

1. 组件内混入的方式

定义：

// 定义mixin
export default {
  data() {
    return {};
  },
  methods: {},
    doQuery() {}
  }
};

使用：
在组件内：

import myMixin from './mixin.js';
  export default {
    name: 'myVue',
    mixins: [myMixin]
  }

2. 全局混入

在main.js中

Vue.mixin({
  created() {
    console.log('全局混入的钩子函数');
  }
});

3.模块化全局注册

案例： 全局注册滚动加载事件

export default {
  install(Vue) {
    Vue.mixin({
      directives: {
        loadmore: {
          bind(el, binding) {
            const selectWrap = el.querySelector(".el-table__body-wrapper");
            var lastScrollTop = 0;
            selectWrap.addEventListener("scroll", function() {
              let sign = 100;
              if (lastScrollTop != this.scrollTop) {
                lastScrollTop = this.scrollTop;
                const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
                if (scrollDistance <= sign) {
                  binding.value();
                }
              }
            });
          }
        },
        mouseleave: {
          bind(el, binding) {
            const elTbody = el.querySelector(".el-table__body");
            elTbody.addEventListener("mouseleave", function() {
              binding.value();
            });
          }
        }
      }
    });
  }
};

使用： 在main.js中 全局注册

import mymixin from "@/common/mixins/table-scroller.js";
Vue.use(mymixin);