vue弹出框消息重置问题---一个投机取巧的方法

不知道大家对v-if与v-show是否了解

v-if 只加载符合条件的，不符合条件的会消亡

v-show 全部加载，只显示符合条件的

利用v-if的特性我们就可以用一个比较投机取巧的方式重置弹出框表单的初始化

<el-dialog title="XXX" :visible.sync="dialogOpen" top="5%" size="large">    <CheckPage v-if="pageShow==true"></CheckPage></el-dialog>

在要弹出的那个组件设一个属性，然后在用watch函数监听dialogOpen（初始时可定设为false），再点击弹出按钮后会设为true，然后在关闭弹出框时

dialogOpen会自动变为false，这时会监听到，将pageshow设为false，这样下次再打开CheckPage这个组件，里面表单填写的内容就会重置了。

 watch:{            dialogOpen: function (curVal, oldVal) {                if (curVal == true) {//弹窗打开                    this.checkPageShow = true;                } else {//弹窗关闭                    this.checkPageShow = false;                }            },        }

转载于:https://www.cnblogs.com/missxiaojun/p/6867612.html

vue弹出框消息重置问题---一个投机取巧的方法相关推荐

vue弹出框组件封装
新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue<template><div class="mack" ...
vue弹出框遮罩层_1、VUE - 遮罩弹框公共组件
一.需求描述有些项目会频繁用到下图这种类型的遮罩弹框,最好的方法是封装为公共的组件,直接复用. image.png image.png 二.方法: 1.子组件:遮罩弹框通过父组件传参,来显示组件内容 ...
modal vue 关闭_Vue弹出框的优雅实践
引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端. @cl ...
vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里 ...
android tv 悬浮窗口,android TV的自定义关机弹出框
关机的时候会走power的相关部分首先我们监听power键的文件是在frameworks\base\services\core\java\com\android\server\policy\Phon ...
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
lhgdialog弹出框组件参数详解(自己曾经开发的fuzz项目中用到过)
lhgdialog弹出框组件参数详解鸣谢:http://blog.csdn.net/hurryjiang/article/details/7657623 同文:http://wjch-111.it ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
轻量级的 JavaScript 弹出框脚本：TinyBox
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容. 要使用 ThickBox,需要下载三个文件: J ...

vue弹出框消息重置问题---一个投机取巧的方法

vue弹出框消息重置问题---一个投机取巧的方法相关推荐

最新文章

热门文章