1.自定义 modal

Modal.vue

<!-- 模态框 -->
<template>
<div class="modal-mask" v-show="value" transition="modal">
<div class="modal-wrapper">
<div class="modal-container">
<!-- 头部 -->
<div class="modal-header">
<slot name="header"></slot>
</div>
<!-- 内容部分 -->
<div class="modal-body">
<span>起床</span><mt-switch></mt-switch>
</div> <div class="modal-body">
<span>吃饭</span><mt-switch></mt-switch>
</div> <div class="modal-body">
<span>集合</span><mt-switch></mt-switch>
</div> <div class="modal-body">
<span>加工车间</span><mt-switch></mt-switch>
</div>
<!-- 底部 -->
<div class="modal-footer">
<mt-button type="danger" @click="cancel">取消</mt-button> <mt-button type="primary" @click="confirm">确定</mt-button>
</div>
</div>
</div>
</div>
</template> <script>
export default {
props: {
show: {
type: Boolean,
default: false
}
},
data(){
return{
value: false
}
},
mounted(){
this.value = this.show;
},
// 监听show数值的变化
watch:{
show:{
handler:function(val,oldval){
this.value = val;
}
}
},
methods:{
cancel(){
this.value = false;
// 向父组件传值
this.$emit('listenToChildEvent',this.value);
},
confirm(){
this.value = false;
// 向父组件传值
this.$emit('listenToChildEvent',this.value);
}
}
}
</script> <style lang="less" scoped>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
} .modal-wrapper {
display: table-cell;
vertical-align: middle;
} .modal-container {
width: 70%;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
} .modal-header h3 {
margin-top: 0;
color: #42b983;
} .modal-body {
margin: 20px 0;
border-bottom: 1px solid #ddd;
span{
display: inline-block;
height: 40px;
line-height: 40px;
width: 60%;
vertical-align: middle;
}
label{
width: 30%;
display: inline-block;
vertical-align: middle;
}
} .modal-footer{
text-align: center;
} .modal-default-button {
float: right;
} .modal-enter, .modal-leave {
opacity: 0;
} .modal-enter .modal-container,
.modal-leave .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>

解释:

(1)通过 watch 监听 子组件的数据变化

(2)通过 $emit 子组件 向 父组件 传值

2.父组件 调用

father.vue

<template>
<div>
<button @click="showType"></button>
<!-- 模态框 -->
<m-modal :show="showModal" v-on:listenToChildEvent="setModal">
<h3 slot="header">类型选择</h3>
</m-modal>
</div>
</template> <script>
// 引入 模态框组件
import mModal from '../../components/Modal' export default {
components: {
mModal
},
data(){
return{
// 默认值
showModal:false
}
},
methods: {
// 点击按钮
showType(){
this.showModal = true;
},
// 接收子组件的传值,并更改父组件的数据
setModal(data){
this.showModal = data;
}
}
}
</script> <style lang="less" scoped> </style>

解释:

(1)通过  :show="showModal"  父组件 向 子组件 传值

(2)通过  v-on:listenToChildEvent="setModal"  父组件 接收 子组件 的值

3.效果图

vue2.X 自定义 模态框 modal的更多相关文章

  1. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  2. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  3. 模态框 modal data-toggle data-target

    模态框 modal data-toggle data-target   1. Data-*属性 模态框(modal) 触发事件(data-toggle) 触发对象data-target(ID 或类) ...

  4. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  5. Bootstrap3模态框Modal垂直居中样式

    1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...

  6. 黄聪:bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  7. 模态框MODAL的一些事件捕捉

    下表列出了模态框中要用到事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.modal 在调用 show 方法后触发. $('#identifier').on('show.bs.m ...

  8. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  9. Bootstrap多层模态框modal嵌套问题

    一.问题 在项目里忽然新加了一个需求,在原本弹出的模态框里,点击模态框里面的按钮再弹出一个模态框,出来另个模态框来展示详细信息.此时就存在两个模态框在这个需求没加之前有一个弹出的模态框也是需要继续点击 ...

随机推荐

  1. [POJ2942][LA3523]Knights of the Round Table

    [POJ2942][LA3523]Knights of the Round Table 试题描述 Being a knight is a very attractive career: searchi ...

  2. 省选算法学习-插头dp

    插头dp?你说的是这个吗? 好吧显然不是...... 所谓插头dp,实际上是“基于连通性的状态压缩dp”的简称,最先出现在cdq的论文里面 本篇博客致力于通过几道小小的例题(大部分都比较浅显)来介绍一 ...

  3. LoadRunner中请求HTTPS页面。

    哎,真是服了.国内网站上写的解决方法如此的粗糙. 如果用loadrunner访问HTTPS网页时出现:shut connection during attempt to negotiate SSL s ...

  4. bzoj 4310 跳蚤 二分答案+后缀数组/后缀树

    题目大意 给定\(k\)和长度\(\le10^5\)的串S 把串分成不超过\(k\)个子串,然后对于每个子串\(s\),他会从\(s\)的所有子串中选择字典序最大的那一个,并在选出来的\(k\)个子串 ...

  5. wap提交表单

    原文发布时间为:2010-08-31 -- 来源于本人的百度文章 [由搬家工具导入] <%@ page contentType="text/vnd.wap.wml" page ...

  6. 网页制作教程:td也可以溢出隐藏显示【转】

    原文发布时间为:2010-02-05 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri ...

  7. O(∩_∩)O哈哈~

    原文发布时间为:2009-04-30 -- 来源于本人的百度文章 [由搬家工具导入]

  8. MVP MVVM MVC

    上一篇得到大家的关注,非常感谢.由于自己对于这些模式的理解也是有限,对于MVC,MVP,MVVM这些模式的比较,是结合自己的理解,一些地方不一定准确,需要的朋友可以参考下 上一篇得到大家的关注,非常感 ...

  9. java网络编程学习笔记(四):线程池的实现

    package QQ; import java.util.LinkedList; /** * Created by hu on 2015/11/9. */ public class ThreadPoo ...

  10. PE文件格式---节和节表

    17.1.4  节表和节 从排列位置来看,PE文件在DOS部分和PE文件头部分以后就是节表和多个不同的节(如图17.1中的③和④所示).要理解什么是节表,什么是节以及它们之间的关系,那就首先要了解Wi ...