当前位置: 代码网 > it编程>编程语言>Javascript > vue写一个全局弹窗组件通过js调用的方法

vue写一个全局弹窗组件通过js调用的方法

2024年07月02日 Javascript 我要评论
前言实际开发中有很多弹出通用窗口的场景,而并非路由跳转。比如打开百度的”文心一言“,当你没有登录时就会弹出登录窗口,而并非跳到登录页。一、上代码1 .先把弹窗封装成一个vue组

前言

实际开发中有很多弹出通用窗口的场景,而并非路由跳转。比如打开百度的”文心一言“,当你没有登录时就会弹出登录窗口,而并非跳到登录页。

一、上代码

1 .先把弹窗封装成一个vue组件

写一个vue组件 里面只有一个dialog

2、使用

在需要使用的地方导入刚才写的弹窗组件

使用以下这段js代码 把弹窗添加到页面中 就可实现效果

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

二、效果图

总结

到此这篇关于vue写一个全局弹窗组件通过js调用的文章就介绍到这了,更多相关vue全局弹窗组件js调用内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com