扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。
成都创新互联主要从事成都网站建设、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务歙县,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
最近碰到一种业务场景，业务场景如图：
有个操作提示点击可以显示，足够了吧？如图：
不够！好吧，产品说要求自动淡出提示！
后台操作复杂需要有个明显提示给业务人员更好地操作，而且这种提示，只需要一种提示就足够。于是我就想到了自己实现自定义指令。
整个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指令吧。代码如下：
使用效果如下：
指令就那么简单，可以根据你自己的思想甚至集成第三方插件使用，用出你想要的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网