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

您可能感兴趣的文章:

vuejs使用axios异步访问时用get和post的实例讲解
今天小编就为大家分享一篇vuejs使用axios异步访问时用get和post的实例讲解，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue通过ref获取dom元素属性的方法
这篇文章主要介绍了Vue通过ref获取dom元素属性的方法,文中有详细的方法介绍,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-11-11
Vue代码整洁之去重方法整理
在本篇文章里小编给大家整理的是关于Vue代码整洁之去重的相关知识点内容，需要的朋友们学习下。
2019-08-08
vue3如何通过ref获取元素离顶部的距离
这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
使用 Element UI Table 的 slot-scope方法
这篇文章主要介绍了使用 Element UI Table 的 slot-scope方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
详解Vue 非父子组件通信方法（非Vuex）
本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
详解vue项目中实现图片裁剪功能
这篇文章主要介绍了vue项目中实现图片裁剪功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
vue源码nextTick使用及原理解析
这篇文章主要介绍了vue源码nextTick使用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
vue动态绑定组件子父组件多表单验证功能的实现代码
这篇文章主要介绍了vue动态绑定组件子父组件多表单验证功能的实现代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11