vuejs自定义指令是用来操纵DOM的。只管Vue推重数据驱动视图的理念,但并不是一切状况都合适数据驱动。自定义指令就是一种有用的补充和扩大,不仅可用于定义任何的DOM操纵,并且是可复用的。
近来遇到一种营业场景,营业场景如图:
有个操纵提醒点击能够显现,充足了吧?如图:
不够!好吧,产物说请求自动淡出提醒!
背景操纵庞杂须要有个显著提醒给营业人员更好地操纵,而且这类提醒,只须要一种提醒就充足。因而我就想到了本身完成自定义指令。
全部vuejs场景是利用了构建形式开辟,在我的main.js代码是如许鲁的:
let obj = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app-box');
//注册一个全局自定义指令 `v-tipOnce`
Vue.directive('tipOnce', {
bind: function (el,binding) {
console.log(el,binding);
obj.$message({
type: 'info',
message: binding.value
});
}
})
经由过程directive注册v-tipOnce 全局指令,经由过程指令的 bind钩子函数保证 只挪用一次,指令第一次绑到元素时挪用,在这里能够举行一次性的初始化设置。那详细在指令内里做什么呢? 我不过就是想做个提醒语一次性展现出来。因而想到了Elementui内里的$.message,因而直接用了 obj做个转接实例,不想别的写提醒语 dom创建了。我们能够尝试打印 el,和bingding是什么,个中el是dom实例,至于binding看下面代码的用法传的参数就晓得。
好了,我们在单页面组件用上v-tipOnce指令吧。代码以下:
<el-row>
<el-col :span="24">
<div>
<el-collapse>
<el-collapse-item>
<template slot="title">
<div class="danger"> <i class="header-icon el-icon-search"></i> 操纵提醒 Operation Tips </div>
</template>
<div class="danger" v-tipOnce="'展现商品:必需挑选对应的展现位置,才晓得你所对应的营业范例(B端照样C端?),展现商品会依据展现位置显现出对应的商品数据;'">展现商品:必需挑选对应的展现位置,才晓得你所对应的营业范例(B端照样C端?),展现商品会依据展现位置显现出对应的商品数据;</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
</el-row>
运用结果以下:
指令就那末简朴,能够依据你本身的头脑以至集成第三方插件运用,用出你想要的结果。