详细讲解Vue.js自定义tipOnce指令的使用示例

vuejs自定义指令用于操作DOM。虽然Vue提倡数据驱动视图的思想，但并不是所有的情况都适合数据驱动。自定义指令是一种有效的补充和扩展，它不仅可以用来定义任何DOM操作，而且可以重用。

最近遇到一个业务场景，如下图所示：

有操作提示可以点击显示，够了吗？如图所示：

不够！好的，产品说需要自动淡出！

复杂的后台操作需要一个明显的提示，让业务人员更好的操作，一个提示就够了。所以我想到了实现自己的自定义指令。

整个vuejs场景都是使用构建模式开发的，我的main.js代码如下：

let obj=new Vue({路由器，商店，render: h=h(App)})。$ mount(' # app-box ')；//注册全局自定义指令` v-tip once ` vue . directive(' tip once '，{bind:function (el，binding) {console.log (el，binding)}；物体。$ message({ type :“info”，message : binding . value })；}})通过指令注册v-tipOnce全局指令，并保证通过指令的bind hook函数只调用一次。当指令第一次绑定到元素时调用，在这里可以初始化一次。你在说明书里具体做什么？我只是想做个提示，一下子全部显示出来。所以我想到了美元。消息，所以我直接使用obj作为传输示例，不想再写另一个提示dom来创建它。我们可以试着打印el是什么，丁丙是什么，其中el是dom的一个实例。至于绑定，请看下面代码的用法所传递的参数。

好了，让我们对单页组件使用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 prompt operation tips/div/template div class=' dancer ' v-tiponce=' show goods:您必须选择相应的显示位置才能知道您对应的业务类型(b端还是c端？)，显示商品会根据显示位置显示相应的商品数据；展示商品：必须选择对应的展示位置才能知道自己对应的业务类型(B面还是C面？)，显示商品会根据显示位置显示相应的商品数据；/div/El-折叠-项目/El-折叠/div/El-列/El-行的使用效果如下：

说明就这么简单，可以根据自己的想法使用，甚至可以和第三方插件集成，达到预期的效果。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。