场景描述:

见:https://www.cnblogs.com/remly/p/12981582.html

具体实现:

<!-- 父组件 -->
<template>
<div class="q-mt-md">
<q-btn label="Login" @click="showLoginModal=true"/>
<Login v-model="showLoginModal"/>
</div>
</template> <script>
import Login from 'components/Login.vue'
export default {
components:{Register,Login},
data(){
return {
showLoginModal:false
}
}
}
</script> ----------------------------------------- <!-- 子组件 -->
<template>
<div>
<q-dialog :value="value" @input="$emit('input',$event)">
...
...
</q-dialog>
</div>
</template> <script>
export default {
props:{
value:Boolean
}
</script>

查看Quasar文档:q-dialog使用默认的value prop和默认的input事件,于是我重写了它的这个规则。

让q-dialog默认的value接受外面传进来的value

让q-dialog默认的input事件把内部的值抛出去

完成封装!(感觉是个俄罗斯套娃,不过封装完了很好用。)

注意:

子组件内要关闭弹出框怎么办?

答:用emit抛出false

this.$emit('input',false)

[ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭的更多相关文章

  1. Mint-ui 中 Popup 作为组件引入,控制弹出框的显示与隐藏遇到的问题。

    Popup组件的结构: <template>   <div>   <!--分享弹出窗 begin-->     <mt-popup class="s ...

  2. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  4. 弹出框插件——dialog

    基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...

  5. Vue自行封装常用组件-弹出框

    使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue";   2.在父组件中注册 popUpBo ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  8. vue弹出框的封装

    依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...

  9. ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭。

    ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭. 问题描述 今天,在做Element+Vue项目时发现:Di ...

随机推荐

  1. js实现点击不同按钮切换内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Python multiprocessing 基础使用和小trick

    最近进行数据预处理时(噪声插入),单进程严重影响实验周期,故学习了multiprocessing并发执行不同数据集的处理,加快执行效率.现于此进行一些简单记录以供日后参考. 1. 基础: From m ...

  3. win10 安装xmemcache及使用

    一.下载链接 链接:https://pan.baidu.com/s/14J6Vc8TBEZeRoMp2MgcydQ 提取码:3q8r 二.安装 安装: memcached -d  install 卸载 ...

  4. 使用Navicat Premium 15发送Excel附件至个人邮箱

    一.新建一个查询保存为user 二.右键查询导出向导为Excel文件并保存为user 三.点自动运行-添加查询-添加附件-高级配置邮件信息(qq邮箱需要先开启POP3/SMTP服务) 四.设置定时任务 ...

  5. KubeCon 2021|使用 eBPF 代替 iptables 优化服务网格数据面性能

    作者 刘旭,腾讯云高级工程师,专注容器云原生领域,有多年大规模 Kubernetes 集群管理及微服务治理经验,现负责腾讯云服务网格 TCM 数据面产品架构设计和研发工作. 引言 目前以 Istio[ ...

  6. AT5341 [ABC156D] Bouquet 题解

    Content 有一个人有 \(n\) 种不同的话可供选择,TA 可以选择至少一种花做花束,但是 TA 不喜欢花的种数为 \(a\) 或者 \(b\) 的花束.求选花的方案数对 \(10^9+7\) ...

  7. 使用IDEA开发的java compiler经常会自动变为1.5

    在maven的pom.xml文件里面 在profiles下 <profile> <id>jdk-1.8</id> <activation> <ac ...

  8. 【LeetCode】763. Partition Labels 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 日期 题目地址:https://leetcode.com/pr ...

  9. 【LeetCode】11. Container With Most Water 盛最多水的容器

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:盛水,容器,题解,leetcode, 力扣,python ...

  10. GCD (hdu 5726)

    GCD Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...