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

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指令用法实例》

指令就那末简朴,能够依据你本身的头脑以至集成第三方插件运用,用出你想要的结果。

    原文作者:张炳
    原文地址: https://segmentfault.com/a/1190000017389435
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞