(iView)View UI框架中的Modal对话框阻止点击确定按钮时关闭_iview modal关闭事件-程序员宅基地

技术标签: view design  

使用官方的代码,value(可用v-model双向绑定)控制modal框的显示隐藏,会出现只要点击了确定按钮,v-model绑定的值自动变为false,关闭modal框,想要的效果:点击确定按钮判断条件决定modal框是否关闭

解决方案一:

<template>
    <div>
        <button style="margin-left: 10px;" @click="btn">demo按钮</button>
        <Modal 
            :value="modalConfig.modalShow"
            title="新增"
            :transfer="false"
            :mask-closable="false"
            :width="400"
            @on-ok="Submit"
            @on-cancel="cancel"
            :loading="modalConfig.loading"
        >
            <Input v-model.trim="age"></Input>
        </Modal>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                age:'男',
                modalConfig:{
                    modalShow:false,
                    loading:true
                }
            }
        },
        methods:{
            btn(){
                this.modalConfig.modalShow = true
            },
            Submit(){
                if(this.age !== '男'){
                    this.modalConfig.loading = false;
                    this.$nextTick(() => {
                        this.modalConfig.loading = true;
                    })
                    this.$Message.error("输入框必须为男!");
                }else{
                    this.modalConfig.modalShow = false
                    this.$Message.error("成功");
                }
            },
            cancel(){
                this.modalConfig.modalShow = false
            }
        }
    }
</script>

<style>

</style>

解决方案二:

<template>
    <div>
        <button style="margin-left: 10px;" @click="btn">demo按钮</button>
        <Modal 
            v-model="modalConfig.modalShow"
            title="新增"
            :transfer="false"
            :mask-closable="false"
            :width="400"
        >
            <Input v-model.trim="age"></Input>
            <div slot="footer">
				<Button type="primary" @click="cancel">取消</Button>
				<Button type="primary" @click="submit">确定</Button>
			</div>
        </Modal>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                age:'男',
                modalConfig:{
                    modalShow:false,
                }
            }
        },
        methods:{
            btn(){
                this.modalConfig.modalShow = true
            },
            submit(){
                if(this.age !== '男'){
                    this.$Message.error("输入框必须为男!");
                }else{
                    this.modalConfig.modalShow = false
                    this.$Message.error("成功");
                }
            },
            cancel(){
                this.modalConfig.modalShow = false
            }
        }
    }
</script>

<style>

</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_51758070/article/details/134325870

智能推荐

PR导出错误怎么办?解决PR导出视频提示“编译影片时出错“ GPU渲染错误 错误代码:-1609629695-程序员宅基地

文章浏览阅读4.9w次,点赞7次,收藏11次。有位用户在使用PR模板制作视频时,遇到PR导出出错的问题,问题描述:编译影片时出错,加速渲染器错误”(如下图所示)编译影片时出错。GPU渲染错误无法处理帧。这部分因视频内容不同而出错提示不同,所以省略…组件EfedFillert类型 GPU视频滤镜选择器:9错误代码:-1609629695于是亲测该PR模板:PR模板 卖房售房租房酒店促销等产品幻灯片展示PR视频模板找到了解决办法。如果你也遇到同样问题,可以尝试下面的方法哦。1、点击菜单“文件”,选则“项目设置”,点击“常规”。如._-1609629695

window10 jupyter notebook 遇到‘ImportError: DLL load failed: 找不到指定的模块。’的问题_jupyter notebook 导入库 报错 importerror: dll load fail-程序员宅基地

文章浏览阅读4k次,点赞6次,收藏5次。将 Anaconda3 的路径添加到环境变量中,在cmd先运行activate root 在运行jupyter notebook。_jupyter notebook 导入库 报错 importerror: dll load failed while importing _a

Spring Cloud Stream App Starters-程序员宅基地

文章浏览阅读50次。Spring Cloud Stream Application Starters are standalone executable applications that communicate over messaging middleware such as Apache Kafka and RabbitMQ. These applications can run independently o...

手机专业名词详解_手机行业专业术语-程序员宅基地

文章浏览阅读1.5w次。 手机专业名词详解 专业名词详解... 11、 手机制式... 61.1 GSM.. 61.2 CDMA. 61.3 3G.. 71.4 W-CDMA. 71.5 CDMA2000. 71.6 TD-SCDMA. 71._手机行业专业术语

MediaPlayer+TextureView全屏播放视频_texttureview mediaplayer-程序员宅基地

文章浏览阅读1.3k次。项目需要做一个简单的播放视频功能demo,考虑到需求较简单(实现不超过2min的MP4格式短视频播放),所以就没考虑使用复杂的第三方视频库了。最初敲定使用系统原生的VideoView实现,后来发现不能在列表中使用普通的VideoView 。VideoView 继承自SurfaceView,而SurfaceView并没有UI同步缓冲区。这就导致了在列表滚动的时候,正在播放的视频可能无法跟上滚动的_texttureview mediaplayer

0/1 nodes are available: 1 node(s) had taints that the pod didn't tolerate.-程序员宅基地

文章浏览阅读2w次,点赞3次,收藏10次。允许master节点部署podkubectl taint nodes --all node-role.kubernetes.io/master-_0/1 nodes are available: 1 node(s) had taints that the pod didn't tolerate.

随便推点

jetson-tx2平台mttcan驱动分析-程序员宅基地

文章浏览阅读2.2k次。 tx2内部集成了can控制器,用的是Bosch的芯片。can的驱动在tx2内核中被注册为网络设备也就是socket can,说到这里相信很多人已经猜到了驱动的大致架构,下面记录了我分析驱动的过程。 首先该驱动还是遵循platform架构,所以我们这里就直接进入到probe函数了。static int mttcan_probe(struct platform_devic..._mttcan

turple list dict 互相转换-程序员宅基地

文章浏览阅读1k次。1. 字典(dict)dict = {‘name’: ‘Zara’, ‘age’: 7, ‘class’: ‘First’}1.1 字典---字符串print (type(str(dict)), str(dict))结果如下<class 'str'> {'name': 'Zara', 'age': 7, 'class': 'First'}1.2 字典---元组p..._tubles 转为 dict

22、springboot 的 Profile(通过yml配置文件配置 profile,快速切换项目的开发环境)_springboot profiles-程序员宅基地

文章浏览阅读3.4k次,点赞3次,收藏8次。springboot的Profile(用于快速切换开发环境),涉及到profile的加载顺序,list值的覆盖,map元素的添加_springboot profiles

机器学习方法篇(3)------决策树入门_决策树输出值只有0.0几,泛化能力怎么样-程序员宅基地

文章浏览阅读751次。决策树是一种树形分类模型,每个非叶子结点相当于if条件语句,通过逐个判定特征所属类别进行分类。那么,决策树模型具体是如何实现的?_决策树输出值只有0.0几,泛化能力怎么样

一休和尚 小布偶 晴天娃娃_放晴娘图片-程序员宅基地

文章浏览阅读2.3k次。http://baike.baidu.com/view/560845.htm释义  晴天娃娃,又称扫晴娘,扫天婆,放晴娘,晴天和尚。流行于中国农村和日本,是一种悬挂在屋檐上祈求晴天的布偶。  “晴天娃娃”的日文:照る照る坊主 (teru teru bouzu)   照る (てる teru)   坊主 (ぼうず bouzu)   日本的一部动画片《一休和尚_放晴娘图片

【LVM】系统重装后LVM分区挂载的坑_cannot process volume group pve-程序员宅基地

文章浏览阅读1.2w次,点赞4次,收藏13次。遇到的问题:系统重装前有个LVM 做过扩容。重装后后手动挂载是可以的。系统重启后挂载失败。 原ubuntu12.04 server 版本分区如下。磁盘配置 由于在升级glibc 导致系统重启后无法启动,做系统修复操作后还是错。于是重装系统。重装工程中对原 ext4分区进行格式化,LVM 未做改动。新系统磁盘分配 系统安装后安装完。执行以下命令后可以正常..._cannot process volume group pve