[ 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 ...
随机推荐
- 【Java基础】transient关键字
1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过 ...
- axios使用步骤详解(附代码)
Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行.最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有 ...
- 通过静态分析和持续集成 保证代码的质量 (Helix QAC)1
前言 现代软件开发团队面临着很多挑战,这些挑战包括:产品交付期限越来越紧,团队的分布越来越广,软件的复杂度越来越高,而且对软件的质量要求越来越高. 本文分为两个章节.第一章讨论持续集成的原理,持续集成 ...
- mysqlslap基准测试
目录 简介 二.例子 三.其它选项 简介 mysqlslap是mysql自带的基准测试工具 优点:查询数据,语法简单,灵活容易使用.该工具可以模拟多个客户端同时并发的向服务器发出查询更新,给出了性能测 ...
- Tableau如何绘制凹凸图
一.把订单日期拖拽至列,把销售额拖拽至行,类别拖拽至标记,并把订单日期拖拽至筛选器选择2017年 二.创建计算字段销售排名 三.将刚刚创建的销售排名拖拽至行,计算依据-类别 四.销量排名拖拽成两个,图 ...
- c++和c中const的区别
const在c与c++的区别与使用 大学期间对c和c++的了解太少了,现在工作了导致自己来恶补,简单的const关键字里面的学问还是挺大的,越是基础的知识越是容易忘却,所以今天开始记录着自己每一天的学 ...
- SpringCloud (一) Eureka
Eureka Eureka 是一个服务治理组件,它主要包括服务注册和服务发现,主要用来搭建服务注册中心. Eureka 是一个基于 REST 的服务,用来定位服务,进行中间层服务器的负载均衡和故障转移 ...
- Windows 数据盘自动分区脚本
在CMD命令文本下执行,即可: diskpart //1.进入diskpart模式 list disk //2.查询磁盘 select disk 1 //3.选择磁盘 create partition ...
- Vue3 全家桶,从 0 到 1 实战项目,新手有福了
前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...
- axiso 高级封装
import axios from 'axios'; import qs from 'qs'; const Unit = { async getApi(ajaxCfg){ let data = a ...