介绍 <李> & lt; div 类=癴ather", ref=癴ather"比;
,& lt; div 类=癱hild", ref=癱hild"祝辞& lt;/div>
& lt;/div>//,若为真说明触底
father.clientHeight +, father.scrollTop 祝辞=,孩子。scrollHeight //,注册一个全局自定义指令,“v-focus”
Vue.directive(& # 39;关注# 39;,,{
,绑定(){
,//只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
},//大敌;当被绑定的元素插入到,DOM 中时……
,插入:function (el), {
,//聚焦元素
,el.focus ()
},
,更新(){
,//所在组件的,VNode 更新时调用
},
,componentUpdated () {
,//指令所在组件的,VNode 及其子,VNode 全部更新后调用。
},
,解放(){
,//只调用一次,指令与元素解绑时调用。
,}
}) <李> //,通过,binding.value 接收
& lt; div v-test=皌itle"在这里是测试& lt;/div>//,通过,binding.arg 接收
& lt; div v-test: id1>测试2 & lt;/div> //,在单独一个文件中单独管理所有,directive
import Vue 得到& # 39;vue # 39;
import inputClear 得到& # 39;。/input-clear& # 39;
import forNested 得到& # 39;。/picker-item-for-nested& # 39;
import copy 得到“。/copy";
const directives =, {
,复制,
,& # 39;input-clear& # 39;: inputClear,
,& # 39;for-nested& # 39;: forNested
}
种(指令).forEach(关键=祝辞{
,Vue.directive(关键、指示(例子))
}) export default {
,指令:{
,//自定义指令的名字
,自动对焦:{
插入才能(el) {
el.focus才能()
console.log才能(,& # 39;插入# 39;,);
,,}
,}
,}
} //, directive.js
export default {
,安装(Vue) {
,种(指令).forEach(关键=祝辞{
Vue.directive才能(关键、指示(例子))
,})
,}
}//main.js
import Directives 得到“。/指令/index";//,Vue.use 通过注册插件的方式来注册指令,“Vue 插件中,install 函数接受,Vue构造函数作为第一入参的
Vue.use(指令);
小编给大家分享一下Vue。指令如何实现元素滚动逻辑复用,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
继上篇Vue滚动触底mixin,将对于文档滚动触底的逻辑迁移到某个dom上,将会用到Vue。指令来实现代码逻辑复用。
<强>元素滚动
<>强如何实现滚动
元素实现滚动的条件有两个:
有父子两个元素
<李>子元素的高度比;父元素的高度,并且父元素设置溢出:滚动/汽车;
<李>
不符合滚动条件,scrollTop为0
<李>符合滚动条件,可以通过元素。scrollTop来获取它的子元素的顶部到父级元素顶部的距离,不包括(边界,填充)。
<>强判断触底
为了简单起见,假设父亲和孩子都只设置了宽高。
<>强抽离成Vue-directive
<>强基本语法
参数1
指令名称,如集中使用的时候就通过v-focus去绑定指定dom
参数2
选项配置项,包含以下的钩子函数,分别在对应的生命周期触发
<>强钩子函数的回调参数
上面的钩子函数都接受厄尔,绑定,vnode和oldVnode这些回调参数,对常用的参数做下解释
el:指令所绑定的元素,可以用来直接操作DOM。
<李>绑定:{名称、值参数}
是绑定组件的数据中的变量名
来说下值和参数的区别,假设我们想向指令传递特定的数据,可以通过下面的方式参数传递值,和价值绑定值只能使用一种
<>强如何注册指令
全局注册
局部注册,通过指令选项来注册
Vue。安装的方式来安装
