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

Gilbertat 发布于2019-08-23 14:05 / 2247人阅读

摘要：自定义指令是用来操作的。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的操作，并且是可复用的。于是我就想到了自己实现自定义指令。

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指令吧。代码如下：

    
        
            
                
                    
                        
                        展示商品：必须选择对应的展示位置，才知道你所对应的业务类型（B端还是C端？），展示商品会根据展示位置显示出对应的商品数据；

使用效果如下：

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

GPU云服务器云服务器自定义指令实例自定义指令使用自定义镜像创建实例通过实例创建自定义镜像

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100064.html

vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0