vue如何通过点击事件弹出弹窗页面详解

2024-10-28 17:32:35

步骤一

创建一个弹窗页面，我们给该页面命名为dialogComponent，弹窗页面中要设置以下内容：

<template>
<!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
<!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="弹窗" :visible.sync="detailVisible" width="35%">
    弹窗内容
  </el-dialog>
</template>

<script>
    export default {
        name: "dialogComponent",
        data(){
          return{
            detailVisible:false
          }
        },
      methods:{
      //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
        init(data){
          this.detailVisible=true;
          //data是父组件弹窗传递过来的值，我们可以打印看看
          console.log(data);
        }
      }
    }
</script>

步骤二

在父组件中引入弹窗组件，并通过点击事件弹出弹窗，父组件主要设置以下内容：

<template>
	<!-- 6.定义一个点击事件-->
	<button @click="handleClick('父组件')">点击</button>
	<!-- 3.在页面中使用dialog-component组件-->
	<!-- 4.设置v-if语句，通过动态改变Visiable值用来控制弹窗是否弹出-->
	<!-- 5.设置ref属性，相当于唯一标识dialog-component组件-->
	<dialog-component v-if="Visiable" ref="dialog"></dialog-component>
</template>

<script>
//	1.引入弹窗组件dialogComponent
import dialogComponent from "./dialogComponent";
    export default {
    //  2.在components中注册dialogComponent组件
    	components:{
          dialogComponent
      },
        data(){
          return{
            Visible:false
          }
        },
      methods:{
      // 7.实现点击事件，点击事件一定要包含以下内容
      	handleClick(data){
          this.Visible=true;
          this.$nextTick(()=>{
          //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
          //init调用的是dialog-component组件里面的init方法
          //data是传递给弹窗页面的值
            this.$refs.dialog.init(data);
          })
        },
      }
    }
</script>

注：vue组件在定义的时候使用驼峰命名，但是在使用的时候要转化为短横线命名！

总结

到此这篇关于vue如何通过点击事件弹出弹窗页面的文章就介绍到这了,更多相关vue弹出弹窗页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale">  </div> </template> <script&g
很棒的vue弹窗组件

弹窗是一个项目必备的复用利器,所以封装起来,保证项目ui一致,是很有必要的.学了一段时间vue,想想还是用vue写一下吧.用的很小白,但是会写出来了,说明我也有进步一丢丢了.继续加油-. 代码贴图如下,样式比较丑,不要介意- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-vue-modal-component
使用Vue组件实现一个简单弹窗效果

最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件. 本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式, props . $emit 传参,具体组件代码也传上去了.如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获. 组件最后实现的效果实现步骤先搭建组件的html和css样式,遮罩层和内
VUE实现可随意拖动的弹窗组件

背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用. 由于不是很难,就不做过多解释了,直接上代码: <template> <el-container v-bind:id="id" v-if="dialogVisible">
vue 实现一个简单的全局调用弹窗案例

1.实现效果图 2.第一步,新建一个.vue文件定义一个弹框的基本模板 style样式放在了文章的最底部,如果需要看效果,需要将样式放入这个vue文件里,样式是用less写的,需要你的项目引入less 注意:我这里的组件右上角关闭是一张图片需要换成你自己本地的路径 <template> <div id="tip_alertModal"> <div class="t-alert-mask"></div> <di
vue弹窗消息组件的使用方法

本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果.所以暂时算是半成品. 练习代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-alert-component</title> <style
vue如何通过点击事件弹出弹窗页面详解

目录步骤一步骤二总结步骤一创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template>   <el-dialog title="弹窗" :visible.syn
Android中点击事件的四种写法详解

Android中点击事件的四种写法使用内部类实现点击事件使用匿名内部类实现点击事件让MainActivity实现View.OnClickListener接口通过布局文件中控件的属性第一种方法:使用内部类基本步骤如下: 1. 新建一个MyOnClickListener类并实现View.OnClickListener接口 2. 重写View.OnClickListener接口中的OnClick(View view)方法 3. 给Button绑定一个监听器,并监听一个点击事件示例代码如下
js showModalDialog弹出窗口实例详解

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法. 使用方法: vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明: sURL-- 必选参数,类
Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡

一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu
vue点击input弹出带搜索键盘并监听该元素的方法

1.遇到问题: 需要做一个点击input弹出带搜索的键盘. 解决: input的type="search",可弹出带搜索的键盘.并监听搜索按钮,请求数据 <input @keyup.13="show()" type="search"> 2.但是又遇到一个新的问题: 点击搜索之后键盘没有收回. 解决: 通过$refs获取input 监听搜索按钮,添加.blur() <input @keyup.13=show() type=&quo
java实现点击按钮事件弹出子窗口

本文实例为大家分享了java实现点击按钮事件弹出子窗口的具体代码,供大家参考,具体内容如下要求: 1.在父窗口中添加一个按钮 2.点击按钮弹出子窗口注意:这是JDK1.7版本在JDK1.7之前,JFrame是不能直接添加子窗口的,要先将JInternalFrame添加到JDesktopPane中,再将JDesktopPane添加到父窗口内,完成这个操作. (一)建立父类JFrame package com.java.view; import java.awt.BorderLayout; i
jsp中点击图片弹出文件上传界面及实现预览实例详解

jsp中点击图片弹出文件上传界面及实现预览实例详解花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu
jsp中点击图片弹出文件上传界面及预览功能的实现

花了两天时间琢磨一下图片预览的功能任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
android使用PopupWindow实现页面点击顶部弹出下拉菜单

实现此功能没有太多的技术难点,主要通过PopupWindow方法,同时更进一步加深了PopupWindow的使用,实现点击弹出一个自定义的view,view里面可以自由设计,比较常用的可以放一个listview. demo中我只是一个点击展示,简单的使用了fade in out的动画效果,也没有精美的图片资源,看着也丑,不过这么短的时间,让你掌握一个很好用的技术,可以自己扩展,不很好么? 废话不说了,直接上代码: MainActivity.java public class MainActivi
Android仿微信右上角点击加号弹出PopupWindow

本文实例为大家分享了Android仿微信右上角点击加号弹出展示的具体代码,供大家参考,具体内容如下一.要弹出的布局,随便设计 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/my_ph

vue如何通过点击事件弹出弹窗页面详解

目录

步骤一

步骤二

总结

相关推荐

随机推荐