antd隐藏弹框确认按钮＜a-modal/＞

已于 2022-04-25 14:31:20 修改
阅读量3.3k 收藏 1
点赞数 8
文章标签： ant
于 2022-02-09 10:32:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffl886/article/details/122836860
版权 
<a-modal width="1100px" v-model="visible" title="医生信息" @ok="handleOk"
              :afterClose="afterCloseModel"  // 模态框关闭回调
              :ok-button-props="{ style: { display: 'none' } }"
              :cancel-button-props="{ style: { display: 'none' } }"
              >

ffl886
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' ...
antd中modal模态框隐藏下面不需要的按钮
Aom_yt的博客
07-21 5791
同样也是在a-modal上添加属性。在a-modal上加属性。
Vue之使用a-model隐藏按钮
09-24 3220
<a-modal v-model="visible" title="Title" centered width="1100px"> <template slot="footer"> <a-button key="back" v-show="false"> Return </a-button> <a-button key="submit" v-show="false"...
Ant Design Vue 中的确认框组件：使用指南与示例
最新发布
2402_85758936的博客
06-17 643
重要的操作确认，如删除操作。显示警告或成功消息。需要用户输入信息。你可以自定义确认框的标题和内容，以适应不同的使用场景。Ant Design Vue 的确认框组件是一个功能强大且灵活的工具，可以帮助开发者在需要时向用户展示重要的信息或请求确认。通过本文的指南，你应该能够掌握如何在 Ant Design Vue 中使用确认框组件，并根据项目需求进行定制。
a-modal
weixin_小白鼠的博客
06-09 7168
a-modal的样式调整 a-modal宽和高的设置 主要是通过a-modal自带的width和bodyStyle来设置 注意：a-modal的父盒子是body // 现在我要点击按钮，弹出对话框，对话框展示的是文本信息，我们也可以添加下载文本功能 <template> <div id="hello"> <div style="margin-top:50px"> <button @click="openDialog">打开对话框<
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
zyf971020的博客
10-29 4442
vue Antd单独隐藏Modal.confirm(this.$confirm方式)对话框的默认ok或cancel按钮
ant-design-vue模态框a-modal设置高度并可滑动问题
weixin_46808962的博客
11-23 1万+
先挂官方文档链接 ant-design-vue官网文档 文档中并没有说如何限制高度，百度了很多说是通过设置modal body的class来实现限制高度 :deep(.ant-modal-body) { height: 100px !important; } 这种方法我试了，不行。 下面是亲测可行的方法 官网里有个属性是body-style，这里可以设置modal的高度 <a-modal :body-style="bodystyle"></a-modal> const body
如何让antd的Modal组件的确认和取消不显示（或自定义按钮）
热门推荐
qq_36742720的博客
07-02 5万+
使用Modal中的footer属性，如下： <Modal title="更改成员" visible={visible} confirmLoading={confirmLoading} onCancel={this.handleCancel} footer={ ...
dt-react-component：基于antd包的React UI组件库
02-06
dtReact成分 English |基于React UI组件库。 主要用于中，后端产品。 我们的目标是满足更具体，更具体的业务场景组件。 当然，我们也有基于本机javascript的出色业务组件，例如ContextMenu ， KeyEventListener等。...
antd-mobile-vue:antd-mobile的vue实现
05-17
如有问题可添加个人微信（wuhao1200），欢迎共同交流该项目原本为公司内部项目，现放到github上开源，发布个时候项目名称改为antd-mobile-vueantd-mobile-vue基于 Vue 的组件库，代码由antd-mobile转为Vue版本，目前...
pro-layout:易于使用的“蚂蚁设计Vue”布局
05-13
import 'ant-design-vue/dist/antd.less' ; import { createApp } from 'vue' ; import ProLayout , { PageContainer } from '@ant-design-vue/pro-layout' ; const app = createApp ( ) ; app . use ( ProLayout )...
ant design vue a-modal实现弹窗拖拽功能
weixin_44161385的博客
06-01 3948
vue ant-design中a-modal实现拖拽功能
Ant Design Vue 的 Modal 属性 afterClose 无效
sinat_31773153的博客
09-07 483
Ant Design Vue 的 Modal 属性 afterClose 无效
Ant Design of Vue对话框a-model动态实现显示隐藏底部
qq_47648083的博客
01-11 3096
Ant Design of Vue对话框a-model动态实现显示隐藏底部
Antd单独隐藏Modal对话框的默认ok或cancel按钮
hoaxxcj的博客
04-13 1万+
有时候我们需要单独隐藏Modal对话框的默认确定或取消按钮，设置:footer="null"会把两个按钮都隐藏。 Antd有提供两个参数用于单独修改确定、取消按钮：对于确定按钮，设置:ok-button-props="{style:{display:'none'}}"；对于取消按钮，设置:cancel-button-props="{style:{display:'none'}}"。这样就能快速隐藏对应按钮了。 ...
antdVue中a-modal的拖拽移动功能
Sxyyy1的博客
04-20 1801
【代码】antdVue中a-modal的拖拽移动功能。
Ant Design Vue模态框modal去除确认或添加按钮
DOM曼珠沙华的博客
09-14 3万+
1.去除确认按钮 <template> <a-modal :title="title" :width="950" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <template slot="footer"> <a
a-modal关闭和重写确定、取消
qihangVIP4的博客
12-09 9425
a-modal对话框
<div class="taskDetail-body home"><div class="taskDetail-body-header"<basicInformation adataSynDescRes="dataSynDescRes" </div><div class="tabContainer"x <a-tabs v-model="activekey" @change="changeActivekey"><a-tab-pane key="taskInformation" tab="基本信息”name="taskInformation"》<taskInformation v-if="activeKey === 'taskInformation'. :tableReadSynCommonDto="tableReadSynComonDto" :tablewriteSynCommonDto="tablewriteSynCommonDto </a-tab-pane><a-tab-pane key="fieldapping” tab="字的映射信息" name="fieldMapping" force-render :id="taskId"<fieldMapping v-if="activeKey'fieldMapping"/> </a-tab-pane><a-tab-pane key="task(onfiguration” tab="任务配需信息 name="taskonfiguration" force-render)<taskConfiguration v-if="activekey=='taskConfiguration". :synConfiguration="synConfiguration"” /> </a-tab-pane><a-tab-pane key="operationHistory" tab="这行历史"name="operationHistory" force-render)"operationHistory"" :id="id" :key="id” /><operationHistory v-if="activekey</a-tab-pane> </a-tabs> </div> div>在这个页面中当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头将固定在顶部，切换标签页时保持选项卡头在顶部的状态，即当选项卡头固定在顶部时，切换标签页后选项卡头仍然固定在顶部，当选项卡头不固定在顶部时，切换标签页后页面回跳到顶部
07-15
要实现当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头固定在顶部，并且在切换标签页后保持固定状态，可以使用CSS的`position: sticky`属性和JavaScript来实现。 首先，在你的HTML文件中，给Tabs组件的选项卡头添加一个id，例如： ```html <a-tabs v-model="activekey" @change="changeActivekey" id="tabsContainer"> <!-- 选项卡内容 --> </a-tabs> ``` 然后，在你的CSS文件中添加以下样式： ```css #tabsContainer { position: sticky; top: 0; z-index: 1; } ``` 这将使选项卡头在页面滚动时固定在顶部。 接下来，在你的JavaScript文件中，添加以下代码： ```javascript // 监听标签页切换事件 document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('#tabsContainer a-tab-pane'); tabs.forEach(tab => { tab.addEventListener('click', function() { // 判断选项卡头是否固定在顶部 const tabsContainer = document.getElementById('tabsContainer'); const isSticky = tabsContainer.getBoundingClientRect().top === 0; // 如果固定在顶部，则让页面回跳到顶部 if (isSticky) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }); }); }); ``` 这段代码会在标签页切换时检查选项卡头是否固定在顶部，如果是，则通过`window.scrollTo`方法让页面回跳到顶部。 这样，当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头将固定在顶部，并且在切换标签页后仍然保持固定状态。当选项卡头不固定在顶部时，切换标签页后页面会回跳到顶部。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值