文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

记Ant Design Vue Modal组件的使用及踩的坑

最近在使用 Vue 开发一个项目，前端框架用的 Ant Design ，Ant Design for React 已经比较成熟，兼容性和灵活性也比较高。...但是 Ant Design for Vue 貌似还有点不那么完善。 今天先整理一下 Modal 组件的使用及我开发过程中注意到的一些点。...Antd for Vue Modal 组件的使用： 引入及注册： 首先要引入 Vue ，然后是 Ant Design Modal 组件： import Vue from 'vue' import { ...Modal } from 'ant-design-vue'; Antd 的安装和配置我就不赘述了，详情见官方API：在 vue-cli 3 中使用 在使用之前，必须要先注册组件： Vue.component...} 声明：本文由w3h5原创，转载请注明出处：《记Ant Design Vue Modal组件的使用及踩的坑》 https://www.w3h5.com/post/448.html

24.1K43
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Vue 折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 在写这个的时候，还是不信邪的用了vue jsx的风格去写东西， 当组件的东西多了起来之后，各种报错；没错，最终我又回归到传统的写法； 上一篇写了个搜索的封装，到写这个的时候发现有所可以优化的地方。...---- 实现思路和功能 基础的功能直接配置上来渲染，而上传组件就不大合适了； 所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope 我这边选型用的是vue...2.6 +的版本，所以直接用的是最新的写法 而且作为表单组件，校验这些肯定需要考虑，所以数据的构造改造了下， 对于校验规则这些，因为走的是antd form用的那套，所以我直接在传递的时候把对应的属性拍平了...{ display: block; margin-bottom: 24px; white-space: nowrap; } } 复制代码 ---- 问题 暴露的方法和搜索组件一样...排查了许久，目前还没找出具体缘由； ---- 总结 antd vue版本目前的功能复现上，还是有所欠缺，可能vue和react实现的机子不一致导致； 不管怎么说，不考虑极端情况下，目前这个库用起来感觉还好

    4.4K40

    Vue+Ant Design表格组件开发实战：从问题到优化的完整指南

    《Vue+Ant Design表格组件开发实战：从问题到优化的完整指南》 前言 在现代前端开发中，数据表格是展示信息最常用的组件之一。...本文将详细记录一个基于Vue和Ant Design的表格组件开发过程，从最初的需求实现到遇到问题，再到最终优化方案的完整思考过程。...良好的性能表现，支持大数据量 基于这些需求，我们选择了Ant Design Vue作为UI组件库，其强大的Table组件非常适合这类需求。...important; } 六、总结与最佳实践 通过这个案例，我们总结出以下Ant Design Table组件的最佳实践： 固定列设计： 关键信息固定在左右两侧 固定列宽度适当加大...希望这些经验能帮助你在未来的项目中更好地使用Ant Design Table组件。

    31210

    Vue 折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件

    所以这次就排除了Element UI,而采用了Ant Design Vue; 在分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件 React 折腾记 - (6) 基于React 16....x+ Antd 3.封装的一个声明式的查询组件(实用强大) ---- 效果图 ?.... ---- 实现思路 用什么来实现组件之间的通讯 昨天写第一版的时候，思维还没绕过来,用props和自定义事件($on,$emit)来实现， 实现出来的代码量贼多，因为每细化多一层组件，复杂度就越高。...仔细翻了下Ant Design Vue的文档，发下可以类似React的套路实现 怎么来实现 要实现一个结合业务可复用的东东，首先我们必须先梳理我们要实现的功能点。...各种报错，特别对Vue指令的支持一团糟 以及函数式组件的写法也是坑挺多，没办法，乖乖的回归template的写法 vue官方提供了jsx的支持,日渐完善；Github:vue/jsx 控件挤成一坨的问题

    9K00

    十分钟上手 xlsx，4 种方法实现 Excel 导入导出

    这里我用 Ant Design 的 Upload 组件来获取文件： const excelMimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet... 而直接使用 Ant Design 的 Upload> 组件，是因为我觉得大家一般是要用 Ant Design 来做开发的，直接给业务实践比说理论更实用。...(req.file.buffer); res.json({ data }) }); 最后前端使用 Ant Design 的 Upload 组件上传 Excel 文件： const ServerImportModal...前端需要注意这些点： action 则为我们刚刚实现的 /excel_to_data 接口 name 为文件名 onChange 为上传状态变化的回调，这里直接抄 Ant Design 的文档就好了，不...Design 的 Upload 组件非常强大，要善用其给的 props，比如 accept, action, name, customRequest 等，比如前端解析就是用 customRequest

    3.3K30

    react hook+ts+rouerV6 dev notes

    其实就是Form.Item里面套一个Input.group 然后再套Form.item就可以了，验证独自给form.item加上rules即可 参考文档：https://ant.design.../components/form-cn/#header 4.重置antd-form 创建一个ref  const formRef: any = React.createRef() 挂载到form上（我的组件是通过子组件传值过去的...实现自定义上传（类似于element的自定义上传文件） 关键api：customRequest 上代码： 首先是elementUI的自定义上传代码(关注:http-request)： 组件部分:        ...首先是组件：（关注customRequest部分）        Upload           listType="picture-card"           fileList={fileList...10.一个Input的动态样式，可以参考 图片 unclick: 图片 click: 图片 非常简单，想复杂了 11.antd-form 自定义校验 需求就是我们的验证码组件需要校验 可以用到

    2.8K10

    react-开发经验分享-Upload上传功能的具体项目实现

    Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 ant框架里，Upload上传文件组件的具体使用方法 antd的Upload组件可谓很强大了...一般能满足普通小项目的上传需求 不过不同的公司总会有很多不同的需求， 所以Upload提供了一个customRequest方法来做特殊上传需求，覆盖自身原本的上传逻辑， 比如，断点续传，接口检测，...自研发桌面上传工具接入等等 customRequest的具体使用方法如下： // 自定义上传方法 photoRequest = async (file) => { const..._this = this let uploadUrl = `${UploadUrl}/file/upload/${file.uid}` const photoRequest...的具体使用方法，可以参考CSDN的Promise使用指南，或者菜鸟教程runoob，或者MDN的Java​Script专栏，或者，以下...

    2K10

    在 Vue.js 中使用 Ant Design 实现表格开关功能：详细教程

    Ant Design Vue：基于 Ant Design 的 Vue 实现，为 Vue.js 提供了一套丰富的 UI 组件。 Axios：一个用于发送 HTTP 请求的库，用来与后台 API 交互。...我们的最终目标是： 在表格中显示广告位的详细信息，包括启用/禁用状态。 使用 Ant Design Vue 的 a-switch 组件在表格中实现开关功能。...如果你还没有安装 Ant Design Vue 和 Axios，可以通过以下命令安装： npm install ant-design-vue axios 接下来，引入 Ant Design Vue 组件库...接下来，我们将使用 Ant Design Vue 的 a-switch 组件来实现这一列的开关功能。...操作列的实现 在表格中，我们还需要一个操作列，提供一些常用的操作按钮，如编辑、删除等。你可以在操作列中继续使用 Ant Design Vue 的 a-button 组件，并绑定相应的操作方法。

    22510

    类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡

    类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡引言今日，卓伊凡优雅草团队喜迎新一轮企业级中后台系统项目——「鲨鱼AI剪辑项目」平台的开发任务。...Ant Design Vue简介：蚂蚁金服Ant Design的Vue 3实现，是React版Ant Design在Vue世界的完美对标，拥有顶级的企业级设计体系和质量。...TypeScript友好：完全使用TypeScript编写，提供了绝佳的类型定义。国际化出色：内置多语言支持，面向国际化的项目首选。...框架名称GitHub Starsnpm周下载量维护团队设计语言Element Plus~21k~740k饿了么团队 & 社区自有设计Ant Design Vue~18.9k~580k蚂蚁金服 & 社区Ant...及 https://www.npmjs.com/ (统计时间点可能存在细微偏差)附录：Element Plus 官方文档Ant Design Vue 官方文档Naive UI 官方文档Arco Design

    1.3K00

    9个值得推荐的 VUE3 UI 框架

    Ant Design Vue Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Vuestic Vuestic 是 Vue 最漂亮的开源管理面板之一，擅长编写可维护的 Vue 代码，制作灵活的组件和接口。

    5.8K30

    2021年最佳VUE3 UI框架推荐

    Ant Design Vue 官方网站： https://2x.antdv.com/components/overview/ Ant Design Vue 是一个非常成熟的框架，使用 Ant Design...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Vuestic 官方网站：https://vuestic.dev/ Vuestic 是 Vue 最漂亮的开源管理面板之一，擅长编写可维护的 Vue 代码，制作灵活的组件和接口。

    4.7K20

    9 个值得推荐的 VUE3 UI 框架

    Ant Design Vue 官方网站：https://2x.antdv.com/components/overview/ Ant Design Vue 是一个非常成熟的框架，使用 Ant Design...Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。...Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Vuestic 官方网站：https://vuestic.dev/ Vuestic 是 Vue 最漂亮的开源管理面板之一，擅长编写可维护的 Vue 代码，制作灵活的组件和接口。

    7K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券