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

更新时间：2024年06月20日 15:09:40 作者：hjj2019

弹窗效果是在Web开发中经常用到的一种交互效果,它可以在用户点击某个按钮或者触发某个事件时显示一个悬浮框,提供用户与页面进行交互的机会,这篇文章主要给大家介绍了关于vue写一个全局弹窗组件通过js调用的方法,需要的朋友可以参考下

前言

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

一、上代码

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调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue开发微信H5微信分享签名失败问题解决方案
这篇文章主要介绍了详解Vue开发微信H5微信分享签名失败问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue项目首屏性能优化组件实战指南
Vue众所周知是一个轻量级的框架,源码仅仅为72.9KB,但是也有它自己的缺点,就是首屏加载会比较慢,这篇文章主要给大家介绍了关于Vue项目首屏性能优化组件的相关资料,需要的朋友可以参考下
2021-11-11
vue刷新后瞬间闪烁,无法解析的问题
这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
Vue3中按需引入ECharts详细步骤(一看就会)
新项目采用Vue3作为前端项目框架,避免不了要使用echarts,这篇文章主要给大家介绍了关于Vue3中按需引入ECharts的相关资料,需要的朋友可以参考下
2023-09-09
在vue中nextTick用法及nextTick 的原理是什么
这篇文章主要介绍了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一个流行的前端框架，它提供了一种响应式的数据绑定机制，使得页面的数据与页面的 UI 组件之间能够自动同步，需要的朋友可以参考下
2023-04-04
element-ui多文件上传的实现示例
这篇文章主要介绍了element-ui多文件上传的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
这篇文章主要介绍了Vue中登录验证成功后保存token,并每次请求携带并验证token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue之自定义事件内容分发详解
这篇文章主要为大家介绍了Vue的自定义事件内容分发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
webpack+vue.js构建前端工程化的详细教程
这篇文章主要介绍了webpack+vue.js构建前端工程化的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
教你三分钟掌握Vue过滤器filters及时间戳转换
这篇文章教你三分钟掌握Vue过滤器filters及时间戳转换,本文将结合时间戳转换的例子带你快速了解filters的用法,需要的朋友可以参考下
2023-03-03