首先我们要明确一下自定义指令以及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);