详解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自动显示最后更新时间
Mar 15 Javascript
刷新时清空文本框内容的js代码
Apr 23 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
Node.js文件操作详解
Aug 16 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
django框架ModelForm组件用法详解
2019/12/11 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
高校教师自荐信范文
2014/03/13 职场文书
个人贷款担保书
2014/04/01 职场文书
商场父亲节活动方案
2014/08/27 职场文书
体育运动会广播稿
2014/10/05 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
大学校园招聘会感想
2015/08/10 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js