[ vue ] Quasar封装q-dialog组件,在外层实现弹出框的开启和关闭
场景描述:
见: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组件,在外层实现弹出框的开启和关闭的更多相关文章
- Mint-ui 中 Popup 作为组件引入,控制弹出框的显示与隐藏遇到的问题。
Popup组件的结构: <template> <div> <!--分享弹出窗 begin--> <mt-popup class="s ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- 弹出框插件——dialog
基于jquery和dot.js弹出框插件,兼容IE6+等其他浏览器. 思想:弹出框元素插入body节点中,并在页面垂直居中显示(fixed定位),触发确定和关闭事件绑定. 注意ie6包含两个问题:一. ...
- Vue自行封装常用组件-弹出框
使用方法: 1.在父组件中引入"box.vue" //import popUpBox from "./box.vue"; 2.在父组件中注册 popUpBo ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- vue弹出框的封装
依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...
- ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭。
ElementUI+Vue在使用el-dialog时,如何做到在弹出dialog时,外部呈锁定状态,而不是点击外部导致dialog直接关闭. 问题描述 今天,在做Element+Vue项目时发现:Di ...
随机推荐
- js实现点击不同按钮切换内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python multiprocessing 基础使用和小trick
最近进行数据预处理时(噪声插入),单进程严重影响实验周期,故学习了multiprocessing并发执行不同数据集的处理,加快执行效率.现于此进行一些简单记录以供日后参考. 1. 基础: From m ...
- win10 安装xmemcache及使用
一.下载链接 链接:https://pan.baidu.com/s/14J6Vc8TBEZeRoMp2MgcydQ 提取码:3q8r 二.安装 安装: memcached -d install 卸载 ...
- 使用Navicat Premium 15发送Excel附件至个人邮箱
一.新建一个查询保存为user 二.右键查询导出向导为Excel文件并保存为user 三.点自动运行-添加查询-添加附件-高级配置邮件信息(qq邮箱需要先开启POP3/SMTP服务) 四.设置定时任务 ...
- KubeCon 2021|使用 eBPF 代替 iptables 优化服务网格数据面性能
作者 刘旭,腾讯云高级工程师,专注容器云原生领域,有多年大规模 Kubernetes 集群管理及微服务治理经验,现负责腾讯云服务网格 TCM 数据面产品架构设计和研发工作. 引言 目前以 Istio[ ...
- AT5341 [ABC156D] Bouquet 题解
Content 有一个人有 \(n\) 种不同的话可供选择,TA 可以选择至少一种花做花束,但是 TA 不喜欢花的种数为 \(a\) 或者 \(b\) 的花束.求选花的方案数对 \(10^9+7\) ...
- 使用IDEA开发的java compiler经常会自动变为1.5
在maven的pom.xml文件里面 在profiles下 <profile> <id>jdk-1.8</id> <activation> <ac ...
- 【LeetCode】763. Partition Labels 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 日期 题目地址:https://leetcode.com/pr ...
- 【LeetCode】11. Container With Most Water 盛最多水的容器
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:盛水,容器,题解,leetcode, 力扣,python ...
- GCD (hdu 5726)
GCD Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submis ...