antd vue Modal 弹窗位置调整

最新推荐文章于 2024-10-14 15:01:11 发布

原创最新推荐文章于 2024-10-14 15:01:11 发布 · 1.3w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#antd #modal #ant design vue #antd vue modal #modal 位置

本文介绍如何使用Ant Design Vue中的modal组件，实现弹窗相对于默认位置稍微提升的设置，通过dialogStyle属性实现个性化布局。

ant design vue 默认的modal弹窗组件，收到的要求是弹窗能比默认的位置高一点

在这里插入图片描述

用官方文档的属性
在这里插入图片描述

写法如下：

 <a-modal title="新增" :visible="visible" :footer="null" @cancel="handleCancel" width="70%" :dialogStyle="dialogStyle">
      <front-computer-add-tab :school-codes="options" v-on:notify="initTable"></front-computer-add-tab>
    </a-modal>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

十夫长

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue二次封装ant-design-vue中的Modal弹窗组件，实现拖拽，全屏两种功能，原有参数属性不变

m0_57071129的博客

01-17

4445

在我们的项目的有的地方需要用弹框的拖拽，以及弹窗自定义全屏显示的需求，所以再次将二次合一，同时弹框里面内容自适应屏幕高度在ant-design-vue中，已经实现了拖拽，全屏的功能，下面是ant官网的示例。

antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽

weixin_43056561的博客

04-09

1659

项目需要使用antd-vue的modal可以拖拽,然后在网上搜了一下方法, 有一个老哥写了个方法链接在这: https://blog.youkuaiyun.com/baidu_20264113/article/details/113058067 由于老哥写的是表头可拖拽, 我就稍加改了一下, 可以表体表头都拖拽,任君选择先建一个js文件 import Vue from 'vue' // v-drag-modal: 弹窗拖拽 Vue.directive('drag-modal', (el, bindings, vn

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

WCF向光而行 2023.07.24
谢谢分享

春晓_春眠花落 2021.07.15
真不错，解决了我的问题

修改ant-design-vue的a-modal弹框的定位位置

qq_36877078的博客

10-14

1615

a-modal弹框的默认垂直位置不是上下居中的，如需上下居中，可以如下设置。

Vue3 + Ant Design Vue Modal 对话框拖拽+缩放指令

weixin_50651687的博客

11-18

4996

Vue3 + Ant Design Vue Modal 对话框可拖拽+缩放指令

vue3 a-modal对话框样式问题

m0_61134931的博客

06-09

1015

global类似于把样式全局化(没有作用域了)，也会影响其他a-modal组件得样式，:global更适用于button,input的使用。1. :global(选择器){css}只需在 a-modal加上style即可。2. 默认情况下会加一个行内样式。

Ant Design Vue Modal 模态框位置调整

WCF向光而行的技术分享

07-24

1892

有一个功能已经实现的需求，是点击了一个按钮，弹出了如下模态框：这里看到的就是点击按钮之后用户看到的效果，了保持模态框在用户视野范围内，我钻研如何调整显示的位置。

antd React--如何修改Modal弹出位置

聆听。。花开雨落的博客

07-19

2481

antd React--如何修改Modal弹出位置

vue3+antd封装modal弹窗

09-06

首先，用户的问题是：“我想查找使用Vue 3和Ant Design封装Modal弹窗的方法请问如何使用Vue 3和Ant Design封装Modal弹窗”。我需要基于提供的站内引用来回答这个问题。提供的引用如下： - 引用[1]：讨论了封装...

vue3+antd封装modal弹窗父组件

09-06

用户提到了参考站内引用，引用[1]讨论了封装命令式组件，以Modal弹窗为例，引用[2]展示了二次封装ant-design-vue中的Modal弹窗组件，添加拖拽和全屏功能。用户说这些引用仅供参考，不是真正的需求，我需要参考用户...

vue3+antd封装modal弹窗父组件打开方式

最新发布

09-06

首先，用户的问题是：“我想查找在Vue 3中使用Ant Design封装Modal弹窗父组件的打开方式”。用户关注的是在Vue 3中，结合Ant Design（应该是ant-design-vue），如何封装Modal弹窗组件的父组件打开方式。用户提供了...

iview -- vue modal 显示到最顶层层级

weixin_30240349的博客

05-18

4329

给想要显示到顶层的modal 设置class属性 .my-modal-parent { position: fixed; // 浮动 z-index: 999999; } 转载于:https://www.cnblogs.com/mafeng/p/10885471.html

【vue】深入理解 vue model 属性：用于弹框

jiongshaopeng的博客

03-03

2094

帮助理解 model 用法，额外提到 computed 的 set 方法；弹框写法。

Ant Design of Vue对话框a-model动态实现显示隐藏底部

qq_47648083的博客

01-11

3832

Ant Design of Vue对话框a-model动态实现显示隐藏底部

Homework-06, Modal模态框

mantou_riji的博客

11-09

561

Homework-06, Modal模态框 Modal模态框是一种更灵活、更强大的自定义对话框实现效果：当模态框被激活，覆盖在网页内容上，并在弹出的窗口中显式详细互交信息参考：https://getbootstrap.net/docs/components/modal/ 提示布局与样式 modal容器，全屏，默认隐藏，显式时绝对定位覆盖在显式窗口。包含modal-dialog容器模态框容器背景色透明，而非元素透明，否则容器内的元素也会透明。rgba() modal-dialog容器，为模态框信息容器

Antd 弹出vue页面，侧边弹出和中心弹出

tutou_girl的博客

09-16

3572

使用的是ANTD的组件model 首先准备一个Modal页面QuartlyAppraisalModal.vue <template> <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" :footer="null" :closable="false" wrapClassName="ant-modal-.

ant design vue a-modal实现弹窗拖拽功能

weixin_44161385的博客

06-01

4983

vue ant-design中a-modal实现拖拽功能

antd组件中a-modal设置固定高度,内容滚动显示