赞
踩
例子:
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
例子:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
el:指令所绑定的元素,可以用来直接操作 DOM 。
binding:一个对象,包含以下属性:
*除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
element.addEventListener(event, function, useCapture)
element.addEventListener("click", function(){ console("触发了"); })
//当点击element绑定的click事件时,会打印出【触发了】
main.js文件中:
(监听元素el的scroll事件,当滚动条的高度等于元素的可视高度加上滚动条卷去的高度时,就可以触发加载更多)
// 注册全局指令
Vue.directive('loadmore', {
bind (el, binding) {
el.addEventListener('scroll', () => {
if (el.scrollHeight === el.scrollTop + el.clientHeight) {
// 触发指令绑定的函数
binding.value()
}
})
}
})
在需要使用该指令的页面中绑定指令:
loadingMore方法:
// 业务处理
loadingMore () {
//this.loadSign 是否有更多数据(当前页数>总页数,即可加载更多数据)
if (this.loadSign) {
// 页数加1
this.pageData.currPage++
//进行接口请求,获取下一页数据
this.getQuota(this.id, this.unit)
} else {
console.log('到底了')
}
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。