a-model点击空白处不关闭弹窗，不要自带的底部

最新推荐文章于 2024-04-20 11:53:06 发布
最新推荐文章于 2024-04-20 11:53:06 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： antd-design-vue 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49668076/article/details/120365593
版权

原先有自带的底部取消和确认按钮，我设置了 :footer=“null” ，改为自定义
然后没有取消按钮后我把取消的事件给取消了

再点击空白处或者点击右上角的关闭按钮都没有反应。
看代码没看出问题，重新翻文档才发现
在这里插入图片描述

  <a-modal
    title="xx清单"
    :width="800"
    centered
    :visible="visible"
    bodyStyle="padding: 0;"
    :footer="null"
    :zIndex="zIndex"
    @cancel="handleCancel"
  >

我把事件重新写上去之后，可以正常关闭了。
就是一个小乌龙事件

春晓_春眠花落
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui dialog弹窗 设置点击空白处不关闭
qq_33911541的博客
09-06 2818
element-ui dialog弹窗 设置点击空白处不关闭
Model模态框点击其他除了模态框区域不消失
博客
10-21 3232
问题: 相信许多的小伙伴在使用Model(模态框)的时候都遇到多一个问题，就是在使用模态框时，在模态框中编辑一些信息，点击黑色区域（就是除了×号和按钮的暗色区域），模态框会消失，而再次打开模态框是，原来编辑的信息还在，十分的烦恼，那么怎么解决这个问题呢？ 解决:data-backdrop="static"案例:<div class="modal fade" id="add" tabind
ant-design-vue 点击弹窗外的区域不关闭弹窗
weixin_41940856的博客
02-21 4746
1、官方组件自带点击弹窗区域外关闭弹窗 2、点击弹窗区域外关闭弹窗不关闭属性为：:maskClosable="false" 例如 <a-modal :title="title" :width="500" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading" :destroyOnClose="true" @cancel="handleCance
以v-model与promise两种方式实现vue弹窗组件
08-27
主要介绍了vue弹窗组件之两种方式v-model与promise,每种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
flask-admin-modal
05-18
flask-admin-modal 例如，针对此问题，使用Bootstrap模态弹出窗口更新Flask-Admin批处理操作中选择的多个记录。 安装 git clone https://github.com/pjcunningham/flask-admin-modal.git cd flask-admin-modal # (optional, create a virtual environment) virtualenv venv && source venv/bin/activate # fetch dependencies; add '--user' if not using a virtualenv pip install -r requirements.txt # launch app w/ optional port number (default: 5000) python
DrawerLayout去除内容阴影，点击内容不关闭抽屉，抽屉默认打开，抽屉滑动时内容区域跟随移动
03-20
DrawerLayout去除内容阴影，点击内容不关闭抽屉，抽屉默认打开，抽屉滑动时内容区域跟随移动
模态框点击空白处不消失
zcaixx的博客
06-05 1275
代码： <div class="modal" role="dialog" aria-hidden="true" data-backdrop="static"> </div> 主要运用的是这两个属性： aria-hidden="true" data-backdrop="static"
antd modal 弹出框点击空白处不关闭
what_ever_so_what的专栏
02-20 1万+
这里的空白处，对应的精准表述为遮罩 mask mask 是否展示遮罩 Boolean true maskClosable 点击蒙层是否允许关闭 boolean true maskStyle 遮罩样式 object {} 使用方法如下： const props = { mask={true} //...
model弹窗强制无法关闭
qq_41326295的博客
04-08 949
当我们需要强制出现弹窗，并让它无法关闭时，可以加上这样一条js代码。 $("#MyModal").modal({ keyboard: false,//点击esc处不关闭对话框 backdrop: "static",//点击空白处不关闭对话框 show:true }); 就完成了~！ ...
实现点击空白处关闭弹窗
lyn1772671980的博客
08-19 810
思路：给空白处元素绑定id，给父元素绑定点击时间，判断用户所点击的id为绑定id，则设置弹窗影藏。代码如下
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue.js 解决v-model让select默认选中不生效的问题
10-15
主要介绍了vue.js 解决v-model让select默认选中不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd Modal取消点击空白处， 关闭弹窗的情况
业余前端的职业经历
05-20 3738
有的业务是 点击空白处 关闭弹窗 有的可能不是这样的 业务 其实很简单的 就是在 modal 上 添加一个属性即可 默认是 ture 可以 关闭的 maskClosable={false} 关注我 持续更新 前端知识
angularJs模态框点击空白不隐藏
bing_JavaScript的博客
05-24 5445
view界面： aria-hidden="true" ng-click="cancel()">× 商户详细信息324534563 商户名称:{{object.busiName}} 商户编码:{{object.busiCode}} 商户状态:{{object.status}}
Ant Design of Vue对话框a-model动态实现显示隐藏底部
qq_47648083的博客
01-11 2852
Ant Design of Vue对话框a-model动态实现显示隐藏底部
Modal框的显示隐藏
零度flying
04-01 1305
/* * @Descripttion: * @version: * @Author: MingChenglong * @Date: 2021-03-17 11:44:22 * @LastEditors: MingChenglong * @LastEditTime: 2021-04-01 15:48:34 */ import React, { useState, useEffect } from 'react'; import { connect } from 'dva'; import { T
模态框默认情况，当点击遮罩层或者按下esc键时会关闭模态框，当点击遮罩层或者按下esc键时不关闭
qq_37916164的博客
01-08 2253
第一种：直接添加属性 data-backdrop=“static” data-keyboard=“false” 示例: &lt;div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="" aria- describedby="" data-backdrop="st
Ant Design Of Vue modal框动态控制footer展示或者隐藏
热门推荐
m0_46550764的博客
11-23 1万+
描述： 之前项目里有个table内单条记录对它查看详情，修改，由于用的页面类似，所以想办法单纯控制模态框页脚的展示 过程： 最开始看文档以及搜索查阅的时候，由于modal自带了按钮的prop设置，属性与button的prop属性一样，所以对其设置css设置，通过css的display的设置为none或者inline-block来控制按钮的隐藏与显示。参考：Antd单独隐藏Modal对话框的默认ok或cancel按钮_hoaxxcj的博客-CSDN博客 最后的效果如下： 代码也很少，仅.
用html画一个四叶草
最新发布
liulang68的博客
04-20 1729
以上是部分代码，需要请看主页加联系方式。
a-form-model-item点击事件
01-25
a-form-model-item是Ant Design Vue中的一个表单组件，用于生成表单项。它可以包含各种类型的表单控件，并提供了一些常用的校验功能。 在a-form-model-item中，可以通过设置trigger属性来指定触发校验的事件。默认情况下，trigger属性的值为'change'，即在表单项的值发生变化时触发校验。 要实现a-form-model-item的点击事件，可以使用@click事件绑定在a-form-model-item上。当点击a-form-model-item时，触发相应的点击事件处理函数。 以下是一个示例代码，演示了如何在a-form-model-item上绑定点击事件： ```vue <template> <a-form-model-item label="纵队名称"> <a-input v-model="teamName" @click="handleItemClick"></a-input> </a-form-model-item> </template> <script> export default { data() { return { teamName: '' } }, methods: { handleItemClick() { // 处理点击事件的逻辑 console.log('a-form-model-item被点击了') } } } </script> ``` 在上述代码中，通过@click事件将handleItemClick方法绑定到a-input的点击事件上。当a-input被点击时，handleItemClick方法会被调用，并在控制台输出'a-form-model-item被点击了'。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值