详解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 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 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
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
8个必备的PHP功能开发
2015/10/02 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Django中几种重定向方法
2015/04/28 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
大一自我鉴定范文
2013/10/04 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
产品质量承诺范本
2014/03/31 职场文书
爱护花草树木的标语
2014/06/11 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python