vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue全局弹窗组件js调用

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

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

您可能感兴趣的文章:
阅读全文