场景描述:

见: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. 【Java基础】transient关键字

    1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过 ...

  2. axios使用步骤详解(附代码)

    Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行.最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有 ...

  3. 通过静态分析和持续集成 保证代码的质量 (Helix QAC)1

    前言 现代软件开发团队面临着很多挑战,这些挑战包括:产品交付期限越来越紧,团队的分布越来越广,软件的复杂度越来越高,而且对软件的质量要求越来越高. 本文分为两个章节.第一章讨论持续集成的原理,持续集成 ...

  4. mysqlslap基准测试

    目录 简介 二.例子 三.其它选项 简介 mysqlslap是mysql自带的基准测试工具 优点:查询数据,语法简单,灵活容易使用.该工具可以模拟多个客户端同时并发的向服务器发出查询更新,给出了性能测 ...

  5. Tableau如何绘制凹凸图

    一.把订单日期拖拽至列,把销售额拖拽至行,类别拖拽至标记,并把订单日期拖拽至筛选器选择2017年 二.创建计算字段销售排名 三.将刚刚创建的销售排名拖拽至行,计算依据-类别 四.销量排名拖拽成两个,图 ...

  6. c++和c中const的区别

    const在c与c++的区别与使用 大学期间对c和c++的了解太少了,现在工作了导致自己来恶补,简单的const关键字里面的学问还是挺大的,越是基础的知识越是容易忘却,所以今天开始记录着自己每一天的学 ...

  7. SpringCloud (一) Eureka

    Eureka Eureka 是一个服务治理组件,它主要包括服务注册和服务发现,主要用来搭建服务注册中心. Eureka 是一个基于 REST 的服务,用来定位服务,进行中间层服务器的负载均衡和故障转移 ...

  8. Windows 数据盘自动分区脚本

    在CMD命令文本下执行,即可: diskpart //1.进入diskpart模式 list disk //2.查询磁盘 select disk 1 //3.选择磁盘 create partition ...

  9. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  10. axiso 高级封装

    ​ import axios from 'axios'; import qs from 'qs'; const Unit = { async getApi(ajaxCfg){ let data = a ...