详解Vue.js自定义tipOnce指令用法实例


Posted in Javascript onDecember 19, 2018

vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。

最近碰到一种业务场景,业务场景如图:

详解Vue.js自定义tipOnce指令用法实例

有个操作提示点击可以显示,足够了吧?如图:

详解Vue.js自定义tipOnce指令用法实例

不够!好吧,产品说要求自动淡出提示!

后台操作复杂需要有个明显提示给业务人员更好地操作,而且这种提示,只需要一种提示就足够。于是我就想到了自己实现自定义指令。

整个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.js自定义tipOnce指令用法实例

指令就那么简单,可以根据你自己的思想甚至集成第三方插件使用,用出你想要的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 #Javascript
如何为vue的项目添加单元测试
Dec 19 #Javascript
浅谈Angular7 项目开发总结
Dec 19 #Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 #Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
You might like
php4的彩蛋
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
原生js实现验证码功能
2017/03/16 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
全国道德模范事迹
2014/02/01 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
合理化建议书范文
2015/09/14 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android