用两个button(添加,编辑)按钮展示同一个模态框,并不是什么大问题,问题在于解决这两个模态框得有自己的确定和取消方法 父页面完全接管子页面(利于子页面复用) 父页面代码: <template> <div> <-- 定义两个按钮,一个添加按钮, 一个编辑按钮 --> <a-button type="primary" @click="showModal">添加</a-button> <a-button

<a-form-item label="起止日期" :labelCol="{lg: {span: 7}, sm: {span: 7}}" :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> <a-range-picker name="buildTime" style="width: 100%" v-model="queryParam.

Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant Design官方文档 先来看需求是怎样的,以及实现的效果 需求:管理某个场馆中的活动,可以对这个场馆进行加入活动和移出活动. 如图,初始进入到这个页面后,韵苑体育馆中有两个活动:活动1.活动5,其余活动在右边的框中(不属于该场馆).选中右边框中的活动,可以进行移入操作.选中左边的活动,可以进行移出活

一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难点给阻塞住,从而保证项目进度. 在 Ant Design Pro 中我们已经有了一套比较完善的 mock 功能,而 roadhog-api-doc 工具,则能够从项目的 mock 数据中读取接口信息生成对应的文档,这样就能够更加清晰明了的展现项目的接口情况. 效果如下:Pro API Docs. 二

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.design/index-cn ant Design是蚂蚁金服搞的~ 对应的还有一个ant design pro~ (好像是要付钱的) 同时ant design可以用于不同项目,vue react angular, 用法基本上差不多,但是配置方法不同 引入 cdn引入 附上我用的cdn的官网链接(htt

ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant-design/ant-design-pro Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』

全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践练习 三.表单组件 1.表单组件使用 2.实践练习 四.树形组件 1.树形组件使用 2.实践练习 总结: 一.栅格组件 1.栅格组件介绍 在多数业务情况下,Ant Design需要在设计区域内解决大量信息收纳的问题,因此在12栅格系统的基础上,Ant Design of Vue将整个设计建议区域按照24等分的

全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design of Vue组件使用 4.实践练习 二.布局组件 1.布局组件介绍 2.布局组件使用 3.导航菜单组件使用 4.面包屑组件使用 5.实践练习 三.按钮和全局提示组件 1.全局提示组件使用 2.按钮组件使用 3.实践练习 四.表格组件 1.表格组件介绍 2.表格组件使用 3.实践练习 总结: 一.Ant Desi

ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以下简称Adp)打包成桌面安装使用,因为我的项目是一个企业业务计算系统,并不会常有需求的更新,因此打包成桌面应用,用户体验更好. 首先,Adp项目和Electron打包分开,就是不要把两者的依赖和配置文件放在一个项目里,这是保持项目的纯粹性,各自专注自己的事情.因此,我们就需要一个Adp项目,一个Elect

本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Design Pro是个什么玩意,同时也能通过小Demo提升学习信心. 一.Ant Design Pro简介 Ant Design Pro是一个开箱即用的中台前端/设计解决方案. Ant Design Pro官网地址:https://pro.ant.design/index-cn GitHub源码下载地址为:

一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提供了如下功能: pro new 新建一个脚手架,会自动将最新的 Ant Design Pro 脚手架下载到本地并安装 pro generate 新建一个模板,包含 model.service.page.component 二.使用过程 2.1.如何使用 使用 npm 安装到本地 npm instal

一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何页面,可以由路由引导到预设的 404 页面. 代码控制跳转到报错页面,比如根据请求返回的数据,将没有权限的用户引导到 403 页面. 2.1.2.实现 针对页面级的报错,我们提供了两个业务组件供你选择,可以很方便地实现一个报错页面: Exception 异常页 <Exception type="

一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞. 在 Ant Design Pro 中,因为我们底层的工具是 roadhog,而它自带了代理请求功能,通过代理请求就能够轻松处理数据模拟的功能. 二.详细 2.1.使用 roadhog 的请求代理功能 在通过配置 .roa

一.概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上的二次封装,同时提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展示效果. 目前一共包涵 10 个图表类型,以及 2 个图表套件: 饼状图(Pie) 柱状图(Bar) 仪表盘(Gauge) 雷达图(Radar) 标签云(TagCloud) 水波图(WaterWave) 迷你柱状图(

一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run build 由于 Ant Design Pro 底层使用的 roadhog 工具,已经将复杂的流程封装完毕,对于大部分场景,构建打包文件只需要一个命令 roadhog build,构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js.***.css.index.

一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作.下面将简单介绍和服务端交互的基本写法. 二.详细介绍 2.1.前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的

一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性. 2.2.css modules 在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面

一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框架结构,往往会包含导航.页脚.侧边栏.通知栏以及内容等.在页面之中,也有很多区块的布局结构.Ant Design 目前提供了两套布局方案:Layout 和 Grid . 二.布局 2.1.根据不同场景区分抽离布局组件 在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通

一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含components目录等等.每次在新建项目时,手动创建这些固定的文件目录.脚手架的作用就是帮助你完成这些重复性的工作,包括一键生成主要的目录结构.安装依赖等等. 1.2.参考地址 ant design参看地址:https://ant.design/docs/react/intr

发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount() { this.fetchListCallback(); } fetchListCallback = () => { const { limit, offset } = this.state; const { dispatch } = this.props; dispatch({ type: 'b