[ 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 ...
随机推荐
- 【C/C++】01背包问题/动态规划
按小蓝书上写的大数据情况下没过,按解答区一个大佬的修改了过了 #include <bits/stdc++.h> using namespace std; class Solution { ...
- <转>git,github在windows上的搭建
http://www.cnblogs.com/yixiaoyang/archive/2012/01/06/2314190.html Git在源码管理领域目前占很大的比重了,而且开源的项目很多都转到Gi ...
- 【CF1591】【数组数组】【逆序对】#759(div2)D. Yet Another Sorting Problem
题目:Problem - D - Codeforces 题解 此题是给数组排序的题,操作是选取任意三个数,然后交换他们,确保他们的位置会发生改变. 可以交换无限次,最终可以形成一个不下降序列就输出&q ...
- 《Power Query数据清洗实战》捉虫……
先道歉,<Power Query数据清洗实战>里,有虫-- 谢谢大家帮忙捉虫了. 谢谢法叔,他捉了四只--(汗) 112页第倒第二行,[追加查询],应是[合并查询]. 151.154.15 ...
- CF507A Amr and Music 题解
Content 有一个容量为 \(k\) 的背包.有 \(n\) 个物品,第 \(i\) 个物品的体积为 \(c_i\).请求出背包最多能够装下的物品的个数,并输出任意一个方案. 数据范围:\(1\l ...
- pymysql-sqlalchemy-orm
sqlalchemy示例代码 多对多外键 场景:一个作者映射多个书籍,一个书籍有多个作者 作者表: id name email sex 1 Alex alex@.. M 2 Rail rail@.. ...
- 痞子衡嵌入式:把玩i.MXRT1062 TencentOS Tiny EVB_AIoT开发板(2) - 在Flash调试及离线启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT1062 TencentOS Tiny EVB_AIoT开发板在Flash调试与离线启动. 腾讯 TencentOS 团队于 ...
- Visual Studio Code常用快捷键
说明 以下快捷键适用于windows环境下, Mac请将ctrl替换为command按键: 部分快捷键或不一样. 查看VSCode快捷键定义: settings -> keymaps. 目前使用 ...
- cmake之Visual studio无法显示头文件
本文演示cmake版本:3.18 1. 问题 使用cmake创建的Visual Studio 项目都没有显示头文件, 比如: 可以清楚的看见,项目lib_pipe没有显示头文件 2. 配置CMakeL ...
- 1479 小Y的数论题
小Y喜欢研究数论,并且喜欢提一些奇怪的问题.这天他找了三个两两互质的数a, b, c,以及另一个数m, 现在他希望找到三个(0, m)范围内的整数x, y, z,使得 (xa+yb) Mod m=(z ...