vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件

一、需求描述

有些项目会频繁用到下图这种类型的遮罩弹框，最好的方法是封装为公共的组件，直接复用。

image.png

二、方法：

1、子组件：遮罩弹框通过父组件传参，来显示组件内容和样式。且"返回"、"确定"显示的个数也是取决于父组件的传参决定。

2、父组件点击事件：传参，决定子组件样式，且监控子组件的 “返回”、“确定” 事件，决定遮罩弹框的显示还是取消显示，以及下一步操作。

三、上代码

这里主要写一些方法，具体GitHub 会放在文章末尾

1、子组件的动态样式显示。

class="btn-back flex-con"

v-if="alertDara.btn[0]"

:style="{color:alertDara.btnColor[0]}"

@click="alertBackFn"

>{{alertDara.btn[0]}}

class="btn-sure flex-con"

v-if="alertDara.btn[1]"

:style="{color:alertDara.btnColor[1]}"

@click="alertSureFn"

>{{alertDara.btn[1]}}

注：这里的 btn 和 btnColor 必须传两个值，否则会报错。不想显示的可以传 ""

data() {

return {

alertDara: {

title: "启动五谷模式",

titleColor: "pink",

content: "设备已经是启动模式，为了保障安全，请在设备机上点击启动按钮。",

contentColor: "gray",

btn: ["返回", ""],

btnColor: ["", ""]

}

};

2、父组件通过 props 传参，来决定子组件的样式

三、难点：父组件监控子组件事件

1、父组件

自定义事件属性：alertBack,事件名：alertBackFn

注意：主要是在父组件中通过 alertSure 定义监听参数，在子组件通过 this.$emit('alertBack') 传递子组件事件。对于父组件、子组件的事件名，可以随意。【我老是入这个坑】

:alertDara="alertDara" @alertBack="alertBackFn" @alertSure="alertSureFn">

2、子组件：

在事件中，用 this.$emit 方法，将自己的事件监听传给父亲。

alertBackFn:function(){

this.$emit('alertBack', '这是子组件传递的消息');

a.png

附：见下图

各位亲爱的客官们，我实在不知道如何在mackDown 上传图片的时候，将多个图片在一行显示，有知道方法的大神们，请告诉我哈。

image.png

vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件相关推荐

【CSS实现Loading遮罩】点击按钮，弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
html点击一个文字显示提示框,点击文字弹出一个DIV层窗口代码
点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; ...
php layui弹出修改功能,非常好用的弹出层 layer，常用功能demo，快速上手！
功能强大,实用,操作方便,文档齐全. 参数灵活,丰富.可以作为开发项目的公共模块,多处使用. 老文档地址:http://layer.layui.com/api.html 已经停止维护常用功能代码de ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
JS弹出可拖动层,并蒙住页面
2007年11月30日星期五上午 11:32 其实这个效果是很常见的,很多现在的网站上都有这个效果,它的主要部分都是用JS实现的,昨天注意看了一下,原理说通了还是很简单的,不过我一开始什么都不知道 ...
点击按钮弹出一个DIV层
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
java遮罩层_页面遮罩层 - javaalex的个人空间 - OSCHINA - 中文开源技术交流社区
一. 基于ajax请求的遮罩层: $.ajax({ type:'POST', url:url, data:obj, dataType:'json', beforeSend: function () { ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
开机弹出“今日看点”和屏幕右下角弹出小广告的解决方法
<开机弹出"今日看点"和屏幕右下角弹出小广告的解决方法!> 最近几天,我家电脑屏幕右下角经常弹出广告窗口.<腾讯QQ>和<迅雷看看>弹出来的广告 ...
遮罩层与被遮罩层的闪烁问题
目录在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替显示问题被遮罩层: 遮罩层: 原因在于: 解决方法可以为: 在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替 ...

vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件

vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件相关推荐

最新文章

热门文章