记住Ant Design Vue Modal组件的使用和陷阱

发布于：2024-10-24 编辑：匿名来源：网络

我最近开发了一个使用Vue的项目。前端框架采用Ant Design。

Ant Design for React 已经比较成熟，兼容性和灵活性都比较高。但 Ant Design for Vue 似乎还有些不完美。

今天我就来整理一下Modal组件的使用以及我在开发过程中注意到的一些点。至于Antd for Vue的Bug，等以后整理好了再讲。

Antd for Vue Modal 组件的使用：介绍与注册：先介绍 Vue，然后介绍 Ant Design Modal 组件：代码语言： javascript copy import Vue from 'vue'import { Modal } from 'ant-design-vue'; antd的安装和配置我就不细说了。详情参见官方API：vue-cli中使用 3、使用前必须先注册组件：代码语言：javascript 复制 Vue.component(Modal.name, Modal);常用参数/属性：隐藏右上角×号： :closable="false" 居中显示：居中 OK 事件： @ok="handleOk" 自定义宽度： width="80%" OK 按钮文字： okText="确认”取消按钮文字：cancelText="Cancel"禁止点击遮罩（mask）关闭：:maskClosable="false" 确认按钮样式：okType="link" 确认按钮样式，与Button相同，有四种样式: 主虚线危险链接那么，Antd 只有确认按钮，如果按钮没有自定义样式，会出现以下情况：不过，你可以使用 :cancelButtonProps 来设置取消按钮的 type 属性： :cancelButtonProps="{ props : {type: 'link'} }"隐藏页脚: :footer="null" 有时您需要自定义按钮。

您可以部分隐藏页脚，而不是使用 Antd 自己的按钮样式。然后将“确定”和“取消”事件绑定到按钮。

确认：@click="handleOk" 取消：@click="handleCancle" 以我上图的样式为例： .vue 代码：代码语言：javascript 复制 JS 部分：代码语言：javascript copyCSS代码：覆盖原有样式代码语言：javascript copy/*验证码弹窗Modal*/.captcha-modal .form-item{ 背景：#F3F6FB ; }.captcha-modal .form-item input{ 边框：无； box-shadow: none;}.captcha-modal .captcha-img{ height: %;宽度：自动；位置：绝对；右：10 像素；顶部：0 ;}.captcha-modal .ant-modal-footer{ 填充：0;}.captcha-modal .ant-modal-footer>div{ 显示：flex; justify-content: space- Between;}.captcha-modal .ant -btn{ 宽度: 50%;高度：自动；字体大小：16px；边界半径：0；填充：10px 0;}.captcha-modal .ant-btn：first-child{ 颜色：#d58; border- right: 1pxsolid #e8e8e8;} 声明：本文由w3h5原创。

站长声明

标签：

上一篇：effective-java-阅读笔记：Lambda表达式和流程

下一篇：弹性服务器架构——连接一切的力量

「诺谛智能」完成近亿元Pre-A轮融资，由武岳峰科技投资领投

投资界消息（ID：pedaily），4月16日，一家专注于论“AI+制造”——诺谛智能正式完成Pre-A轮融资。本轮融资由武岳峰科技创投领投，三叶虫创投、清智资本跟投，联想创投跟投，融资总额近亿元。本轮融资主要用于诺谛“支点”产业模式对产业机制的不断迭代和优化、“AI+制造”

06-17
科大讯飞一季度营收25亿元，同比增长77.55%

一季度实现净利润1.4亿元，同期亏损1.3亿元去年。

06-18
首次发布 -泰岳耀明资本完成新一期1.375亿元人民币基金

投资界（ID：pedaily）6月11日消息，泰岳耀明资本今日宣布已成功完成1.375亿元人民币早期基金——北京泰岳耀明资本明创投中心（有限合伙）募集资金并完成首期交割。该基金将重点投资处于天使阶段和初创阶段的公司。本次募资完成后，泰岳耀明资本将继续重点支持早期科技企业

06-17
美国宣布对华加征关税，多方回应

北京日报美国当地时间5月14日，美国贸易代表办公室公布四年来结果对华加征关税进行审查，宣布在原对华加征关税的基础上，进一步提高自华进口相关产品关税。中国工商界对此表示坚决反对。中国电动汽车、锂电池、光伏电池等相关产业通过持续技术创新、积极参与市场竞争，深

06-06
中国AIGC发展趋势行业趋势

AIGC技术发展：科研与产业两端突破。 Transformer算法和结构优化在中短期内仍是主流，长期来看可能会被取代。学术界将通过扩大模型参数数量、调整模型结构、局部算法优化等方法，进一步探索大型模型的能力天花板，触及AGI的可能性；在行业方面，以各大企业为代表，一方面从商

06-18
爱奇艺宣布收购天象互动，持续发展多元化娱乐生态

据投资界7月17日消息，爱奇艺（纳斯达克股票代码：IQ）正式宣布完成对天象互动和成都的收购天象互动数字娱乐有限公司（简称“天象互娱”）股权%。　　天翔互动娱乐总部位于中国成都。专注于移动游戏的研发和全球发行。与多个国际知名知识产权巨头达成合作协议，同步开发和

06-18
进军女性文玩珠宝市场，“葫芦兽”获梅花创投千万元种子轮融资

据投资界（微信ID：pedaily）2月23日消息，文玩珠宝渠道品牌“葫芦兽”获梅花创投千万元种子轮融资《野兽》近期完成百万投资万元种子轮融资，本轮融资由梅花创投领投，传统文化领域供应链资本跟投。《葫芦兽》也是梅花创投2018年投资决策最快的项目之一。早期投资都是投资

06-18
泰国瑞幸逆袭

今年已经声名大噪的瑞幸以非常奇葩的方式再次走红。 12月19日，“泰国瑞幸”向当地法院提起诉讼，要求瑞幸赔偿其“经济损失”1亿泰铢，约合人民币20亿元。这条消息很快就登上了热搜，信息量之大，让很多人一时没有反应过来。什么？瑞幸开车去泰国了吗？泰国瑞幸还是假的吗？

06-17
SaaS厂商天雀科技获腾讯产业生态投资

据投资界5月9日消息，腾讯产业生态投资宣布投资政务领域SaaS厂商天雀科技，进一步补充其在政务领域的生态布局。智慧城市领域。据了解，天雀科技是国内最早从事社会信息治理建设和运营的厂商之一。客户覆盖浙江、江苏、四川、江西、广东、广西、河北、辽宁等全国20个省份。

06-17
风干麻辣烫连锁品牌“聚花开卤味”获亿元B轮融资

今日，专注于家庭餐桌的风干麻辣烫连锁品牌“聚花开卤味”宣布完成B轮融资。本轮融资由万物资本领投，中元资本、不虎创投、千石创投跟投，投资金额为1亿元。此前，聚花开鲁维已于2016年完成不活创投投资的天使轮及A轮融资。

06-17
中信资本战略投资环球医疗

3月26日消息，中信资本控股有限公司（以下简称“中信资本”，又名“新辰资本”，即新推出私募股权投资部门Brand）宣布完成对通用环球医疗集团有限公司（通用科技集团成员企业，股票代码：.HK，以下简称“通用环球”）1.5亿美元可转债投资医疗的”）。本次可转债期限自发行之

06-18
工信部：鼓励大数据在金融领域风控管理、数字货币等创新应用

提出应用实施指南，鼓励大数据在风控管理、数字货币等方面创新应用，金融领域的数字货币等；鼓励医疗领域的创新应用我们将牵头制定标准，打破数据壁垒。听，中小企业反馈平台。倾听用户需求，倾听创业者声音，解决中小企业痛点。点击立即参与调查并获得礼物。

06-18