Vue自定义指令 directive
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue自定义指令 directive相关的知识,希望对你有一定的参考价值。
参考技术A除了核心功能默认内置的指令,Vue 也允许注册自定义指令, 在你需要对普通 DOM 元素进行底层操作的情况下,这时候就会用到自定义指令 directive 。
directive 分为全局注册以及局部注册两种,注册后在标签上使用 v- 注册名 即可使用,在下例中,使用 v-name
我们在钩子函数中可以获取到以下参数:
举个例子,我们在项目中的按钮需要通过权限来控制是否渲染,那么我们可以做一个权限指令来判断是否渲染,
这样,就完成了一个按钮级别的权限管理, 自定义指令当然还有更多的用处,比如按钮的点击波纹,按钮点击请求返回前的禁用,某节点加载时loading,如开头所说的, 在你需要对普通 DOM 元素进行底层操作的情况下,这时候就会用到自定义指令 directive 。
vue 自定义指令directive
//自定义指令:directive 的传参——可以数据也可以是字符串 Vue.directive(‘scroll‘, function (binding) { window.addEventListener(‘scroll‘, function () { if (document.body.scrollTop + window.innerHeight >= document.body.clientHeight-20) { var fnc = binding; fnc(); } }) });
调用自定义指令:v-scroll="fn()"
<article class="library_list" v-scroll="getMore"> <a href="article_read.jsp?id={{value.id}}" target="_blank" v-for="value in myData.data"> <dl class="border_bottom1_gray"> <dt class="pic_box"><img :src="value.imgUrl" /></dt> <dd> <p class="library_txt" v-cloak>{{value.title}}</p> <p class="library_label"><span class="library_label_l " v-cloak>{{value.author}} {{value.ctime}}</span><span class="library_label_r" v-cloak>浏览量:{{value.pageView}}</span></p> </dd> </dl> </a> <!--<p class="nodata_hint" v-show="myData.length==0">暂无数据……</p>--> </article>
以上是关于Vue自定义指令 directive的主要内容,如果未能解决你的问题,请参考以下文章