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

2019-11-19 12:19:39

字体：大中小

来源：转载

供稿：网友

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

  <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>

使用效果如下：