Vuejs 3中的自定义指令是与先前版本的框架没有兼容的事物之一。

处理新版本的Inspector Frontend仪表板，我需要在应用程序的许多不同点上显示工具提示。

在输入VUEJS自定义工具提示指令的实施之前3，让我介绍VUEJS中的良好代码重用策略的基础。

在Vuejs中重复使用代码

，如果您编写组合api。

使用组件的好处是，您可以通过将它们分解为较小的可重复使用的零件来轻松地创建复杂的用户界面。这使您更容易维护您的代码并允许您逐步改进用户界面。

vuejs提供了代码重复使用的其他选项，例如Mixins，Discortives和插件，可以进一步改善代码的可维护性和可重用性。 Mixins是可重复使用的代码块，可以添加到组件中（Vuejs 3中不再建议使用），而指令用于将自定义行为添加到HTML元素中。另一方面，插件是可以在应用程序中的多个组件上安装和使用的软件包。

通过利用这些功能，您可以创建易于维护和扩展的功能可扩展的应用程序。

如果您想了解更多用于构建我们平台的策略

Vuejs 3中的自定义指令

文档中提到的：

自定义指令主要用于重复使用逻辑，涉及普通元素上的低级DOM访问。

添加“工具提示”，“ popover”和其他bootstrap组件之类的功能的理想工具。

vuejs中的指令本质上是一个对象，具有相同的属性和钩子。但是在这种情况下，挂钩将接收指令绑定到的DOM元素的实例。

export default {
    mounted(el) {
        el.focus();
    }
}

要注册指令并在模板中可用，必须将指令对象传递到应用程序实例：

const app = createApp({})

import tooltip from "./Directives/tooltip";

// make v-tooltip usable in all components
app.directive('tooltip', tooltip);

您可以在官方文档中查看所有可用的生命周期挂钩。

VUEJS的自定义工具提示指令3

为什么我们需要创建一个指令以显示工具提示？

如Bootstrap 5文档中所述

// HTML in your view
<a href="#" data-bs-toggle="tooltip" data-bs-title="Hello World!">Tooltip Example</a>

// Enable tooltip via Javascript 
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');

const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

但是此代码在静态HTML页面中起作用，其中可用DOM元素可用，但JavaScript代码运行以激活视图中所有工具提示的时间。

但是，反应性前端应用程序以相反的方式工作。组件通过用户交互动态加载。 因此，在第一个应用程序引导程序将不会被激活后，视图中包含的每个工具提示都将保持隐藏。

我们需要将工具提示连接到DOM元素，该元素附加到视图的时间。

vuejs自定义指令的完美用例。

import {Tooltip} from "bootstrap";

// Use "mounted" hook
export default {
    mounted(el, binding) {
        let tooltip = new Tooltip(el, {
            placement: binding.arg || 'top',
            title: binding.value
        });
    }
}

在App实例中注册该指令，以使其在组件中可用：

import tooltips from "./Directives/tooltips.js";
app.directive(tooltips);

如何使用工具提示指令

上面的代码允许您动态设置工具提示的行为。

默认用法：

<a href="#" v-tooltip="Hello World!">Tooltip Example</a>

如果要更改工具提示的位置，则可以作为参数传递：

<a href="#" v-tooltip:right="Hello World!">Tooltip Example</a>

对检查员的新手？现在免费尝试

我希望本文可以帮助您以更方便的方式设计软件产品。可以为弹出式和其他引导组件复制此实现。

您是否负责公司的应用程序开发？考虑尝试我的产品Inspector自动在代码中找出错误和瓶颈。在您的客户偶然发现问题之前。

检查员都可以由任何不需要任何复杂的IT领导者使用。如果您想要有效的自动化，深刻的见解以及将警报和通知转发到消息传递环境中的能力，请免费尝试检查器。 Register your account。

或在网站上了解更多信息：https://inspector.dev