Vue自定义指令 directive

Posted 2023-04-27

参考技术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}}&nbsp;&nbsp;{{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>