摘要:自定义指令是用来操作的。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的操作,并且是可复用的。于是我就想到了自己实现自定义指令。
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指令吧。代码如下:
操作提示 Operation Tips展示商品:必须选择对应的展示位置,才知道你所对应的业务类型(B端还是C端?),展示商品会根据展示位置显示出对应的商品数据;
使用效果如下:
指令就那么简单,可以根据你自己的思想甚至集成第三方插件使用,用出你想要的效果。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100064.html
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
摘要:一介绍也称为,读音类似,错误读音,由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。还有一些其他键盘事件,具体参考官方文档。模板就是,用来进行数据绑定,显示在页面中,也称为语法。 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 Vue有以下特点: 是一个构建用户界面的框架 是一...
摘要:一介绍也称为,读音类似,错误读音,由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。还有一些其他键盘事件,具体参考官方文档。模板就是,用来进行数据绑定,显示在页面中,也称为语法。 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 Vue有以下特点: 是一个构建用户界面的框架 是一...
阅读 3123·2021-11-22 12:01
阅读 3746·2021-08-30 09:46
阅读 767·2019-08-30 13:48
阅读 3166·2019-08-29 16:43
阅读 1639·2019-08-29 16:33
阅读 1828·2019-08-29 13:44
阅读 1390·2019-08-26 13:45
阅读 2209·2019-08-26 11:44