Vue实现全局弹窗组件并通过JS动态调用

前言

在实际项目开发中，经常遇到需要展示通用弹出窗口的场景，这类交互通常不需要进行页面路由跳转。例如访问某些平台（如百度“文心一言”）时，若用户未登录，系统会直接弹出登录窗口，而非跳转至独立的登录页面。

一、上代码

1. 将弹窗封装为独立的Vue组件

首先编写一个基础的Vue组件，该组件内部仅包含一个Dialog（对话框）元素。

2、使用方式

在需要触发弹窗的业务逻辑中，导入上述编写的弹窗组件。

执行以下JavaScript代码，将弹窗实例添加到页面DOM中，即可实现弹窗效果。

const constructor =Vue.extend(login);
      const instance = new constructor();
      instance.$mount();
      document.body.appendChild(instance.$el);

二、效果图

总结

至此，关于如何在Vue中编写全局弹窗组件并通过JS调用的介绍已完成。如需了解更多Vue全局弹窗组件JS调用的相关内容，建议搜索本站过往文章或继续浏览后续系列文章，感谢大家的支持！