详解Vue.js自定义tipOnce指令用法实例
更新时间：2018年12月19日 14:28:33 作者：张炳
这篇文章主要介绍了详解Vue.js自定义tipOnce指令用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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>
使用效果如下：
指令就那么简单，可以根据你自己的思想甚至集成第三方插件使用，用出你想要的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出)
这篇文章主要介绍了vue如何导出文件流获取附件名称并下载(在response.headers里解析filename导出),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的2019-11-11
这篇文章主要介绍了vue之bus总线的简单使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
element-ui中this.$confirm提示文字中部分有颜色自定义方法
this.$confirm是一个Vue.js中的弹窗组件,其样式可以通过CSS进行自定义,下面这篇文章主要给大家介绍了关于element-ui中this.$confirm提示文字中部分有颜色的自定义方法,需要的朋友可以参考下2024-02-02![vue新手入门出现function () { [native code] }错误的解决方案](//img.jbzj.com/images/xgimg/bcimg5.png)
vue新手入门出现function () { [native code]&nbs
这篇文章主要介绍了vue新手入门出现function () { [native code] }错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue中使用event.target.value踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应,下面这篇文章主要给大家介绍了关于vue-create创建VUE3项目的相关资料,需要的朋友可以参考下2024-03-03
在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下2018-11-11
![vue新手入门出现function () { [native code] }错误的解决方案](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论