四月下半旬：分享了几个优秀的开源前端项目，定下一个自己的开发项目。完成从需求分析到架构设计再到前后端功能的设计实现的三部分内容的梳理，截止4月底开发处于监控模块的开发。...然后添加一个简单的机器汇总的表单页面： 但是需要另外添加对应的组件： import {optionsListApi } from '../.....src/types/table'; import {VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable'; 要引入以上这些组件...，到这里的时候慢慢发觉，虽然这个项目很方便，但是熟悉人家封装的组件还需要一段时间，所以如果不是特别着急，也还是建议自己走一遍开发流程。...我们再看看，如果直接引入antd的表格组件，官网代码： <a-table :columns="columns" :data-source="data"> <template #
今天花了一点时间学习了下antd表格的使用，完成了具备增删改查完整通用功能的前后端交互，分享给大家，但界面稍丑，不断会完善。...安装并引入antd组件 3. 创建展示信息组件 后端： 1. 使用go的gin框架创建项目 2. 安装引入gorm和mysql驱动 3. 创建展示信息模型，连接数据库 4....实现增删改查API ## 收获 前后端的交互更加清晰明了，对于vue组件的概念理解加深了。说简单点可以这么理解，在js部分定义一个组件，然后定义数据和方法，最后暴露出去，以供模版使用。 1....定义组件: export default defineComponent({ // 组件选项 }) 2....数据没有绑定，参数没法传到后端 Vue3 中,为了避免和元素自身的 value 属性产生混淆,一些组件会使用 v-model:value 来替代 v-model。
背景 想修改 antd 的 Upload 组件的样式，折腾N就终于搞定。 2....因为我们在项目中使用了css-loader,自带的css modules会把所有类名编译为哈希字符串 比如，变成这样是了 ?.../style.less'; 问题来了，跟踪css样式发现 antd 中的 Upload 组件用了 .ant-upload.ant-upload-select-picture-card...CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。...凡是这样声明的class，都不会被编译成哈希字符串，因此我们可以在less文件中，所有内容外用:global语法包裹住。
antd文档 yarn add antd -s 在App.css中引入 @import '~antd/dist/antd.css'; 在组件中引入 import { Button } from 'antd.../App.less'; src/App.less - @import '~antd/dist/antd.css'; + @import '~antd/dist/antd.less'; 在根目录新增craco.config.js
组件库一般都有 Popover 和 Tooltip 这两个组件，它们非常相似。 不过应用场景是有区别的： Tooltip（文字提示） 是用来代替 title 的，做一个文案解释。...而 Popover（气泡卡片）可以放更多的内容，可以交互： 所以说，这俩虽然长得差不多，但确实要分为两个组件来写。 这个组件看起来比较简单，但实现起来很麻烦。...而且，就算你指定了 left，当左边空间不够的时候，也得做下处理，展示在右边： 而且当方向不同时，箭头的显示位置也不一样： 所以要实现这样一个 Popover 组件，光计算浮层的显示位置就是不小的工作量...而 open、onOpenChange 则是可以在组件外控制 popover 的显示隐藏。...这样就是一个功能完整的 Popover 组件了。 如果完全自己实现 Popover 组件，还是挺麻烦的，但是基于 floating-ui 封装，就很简单。
源码 TableOption 组件源码 背景 业务中台重构后，新的框架基于 antd 整套生态，采用声明式的设计思路，可以通过 JSON 的方式快速构建 CRUD 页面的查询表单、Table 表格、新增编辑表单...但每次定义 Table 的操作列时，都要写一大堆重复的“模板代码”，一来效率低，二来不便于通过交互细节，故对这个场景进行抽象封装，整理成一个通过组件 如上图，没有封装组件之前，每次都要重复写以下类似的...预留鉴权的接口，通过权限控制按钮的显示与否 核心组件 ButtonExt 对 antd 的按钮进行扩展，增加 onAsyncClick 回调函数，如果使用该函数，并且有异步操作的话，按钮自动管理 loading...效果的开或关 PopconfirmBtn 组合 Popconfirm 和 Button 两个组件，定义配置项，实现 JSON 生成需要二次确认的按钮的效果 DropdownBtn 组合 Dropdown...和 Button 两个组件，定义配置项，实现 JSON 生成下拉菜单的按钮 TableOption 自定义操作列按钮，整理上面几种类型的按钮，通过 JSON 声明式生成对应组件
将盒子写为块级则不会超出盒子长度自动隐藏并展示为...，改为行内块，或者行内即可。
故想深入源码了解一二，但鉴于技术浅薄，不敢深究，故写浅析，不喜勿喷，对其中的组件做一些分析，主要目的有两个： 学习Ant Design的工程设计思路 思考怎样写出优秀的React组件 本文是基于Ant...Design3.4.4的源码分析，读者需要具备基本的JavaScript、React知识，对于Antd（以下用Antd表示Ant Design），蚂蚁官网给出的定位是”一个服务于企业级产品的设计体系”，...目录结构 打开Antd源码目录，结构还是比较简洁： 平时所用到的组件全部位于 components 文件夹下，首先我们分析一个简单的组件Icon，打开 components/icon ，目录结构如下：...，Antd的开发使用了TypeScript。...： Antd组件实现的基本结构和思路 组件对于参数的校验的方式 优雅的处理 classNames 省略一些不必要的参数
背景 Descriptions 是 AntD 组件，默认的样式 label 是居左对齐的，而我想要 右对齐的效果。比如这样： ? image.png 关键是样式要怎么调整呢？...2.知识 先简单介绍下 Descriptions 组件。 Descriptions 组件是描述列表。用于成组展示多个只读字段，常见于详情页的信息展示。 比如展示用户信息： ?...image.png 如上图，使用 chrome 的检查功能，分析代码发现 对应的样式名是 ant-descriptions-item-label ，它使用了 flex 布局。这就好办了。 3....调整Descriptions 组件样式: 右对齐 如下图所示，Descriptions 的属性 labelStyle 可以接受一个样式设置，写上 “justifyContent: 'flex-end',
前言 上篇我们讲了Icon组件，Icon组件是Antd源码库中实现比较简单的组件，适合大家入门，这篇文章主要和大家一起分析一下数字输入框组件，即InputNumber，难度适中，但蕴含的Antd里较为经典的开发场景...，适合大家比较深入的了解Antd背后的思想。...这篇我们学习的目的主要有： 学习Antd的如何基于现有的组件封装 封装背后的技术目的和效果如何 目录结构 首先我们依旧看看位于components 文件夹下的input-number 目录结构： InputNumber...Antd的许多组件都是基于rc-xxx组件分装，比如常见的Table组件是基于rc-table，Form组件基于rc-form，rc-xxx来源于react-component组件库，里面有很多常用的组件...： 名称 描述 blur() 移除焦点 focus() 获取焦点 这里河马君多说一下，对于这两个函数的实现，Antd使用了ref属性，实现对组件的引用 ref={(c: any) => this.inputNumberRef
前言 上篇我们讲了InputNumber组件的主要结构组成，本篇我们来分析，InputNumber组件的核心实现rc-input-number的源码，即组件。...虽然我们是浅析Antd组件，但本着专注、严谨的科学态度，这里河马君会为大家从Antd库入手，讲解背后的依赖库，深入到最底层，主要一个是为了理解代码，另一个是看看大家都用哪些开源库，加快开发进度。...目录结构 我们来看看rc-input-number的目录结构： 核心代码位于src 下： 结构很清晰，我们也可以从效果图分析： 其中的InputHandler组件，就是InputNumber右边的两个按钮组件...，这里要说明一下，不同于Antd的源码，rc-input-number的源码使用普通的ES6编写，小伙伴们阅读起来应该会比较流畅，那我们首先分析一下InputHandler组件 InputHandler...中InputHandler的主体： 这里我们能够清晰的看到主体结构内的函数，感受到Antd的同学代码很整齐，首先是类型校验和默认值，然后是生命周期函数，接着是事件处理，最后是自定义函数和render
最近在用 antd v4 的 Tree 组件时，想给 Tree 组件添加一个右键菜单功能，最初的想法是看看 antd 官方有没有提供现成的方法，遗憾的是，官方并没有给出一个统一的方法，只是建议大家先使用社区提供的组件...方法一 思路是使用 antd 提供的 Dropdown 组件和 Menu 组件，结合 Tree 组件提供的 titleRender 属性来实现，核心代码如下： import { Tree, Dropdown...这种方式最简单直接，利用 antd 组件库提供的现有组件和api即可实现。 那么除了这种方式之外，还有别的方式可以实现右键菜单呢？...接下来我就介绍下另一个 antd Tree 组件实现右键菜单的方式。 方法二 第二种方法可以利用 onBlur 事件实现。 HTML标签提供了 tabIndex 属性。...> ); } 总结 以上两种方式，均可以实现给 antd 的 Tree 组件添加右键菜单，第一种方式比较常规，直接利用 antd 提供的现成的组件即可实现。
大家好，又见面了，我是你们的朋友全栈君。...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
本文最后更新于 57 天前，其中的信息可能已经有所发展或是发生改变。...1、需求 最近遇到一个需求，一张表格中需要有个下拉框，antd官网中有相应的Select组件，但是由于数据比较多，用户需要一个全选的需求。...2、实现代码 import React from 'react'; import 'antd/dist/antd.css'; import '....> 全选 </div...select组件添加全选功能
升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...官网 https://procomponents.ant.design/ 模版组件 主要提供如下组件 ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能 ProTable 表格模板组件，...抽象网络请求和表格格式化 ProForm 表单模板组件，预设常见布局和行为 ProCard 提供卡片切分以及栅格布局能力 ProDescriptions 定义列表模板组件，ProTable 的配套组件...ProSkeleton 页面级别的骨架屏 组件包使用 需要安装依赖 $ npm i @ant-design/pro-components --save # 注意 使用条件 antd 的版本 >= 4.11.1...formRef 是否显示搜索表单，传入对象时为搜索表单的配置 search 是否显示搜索表单，传入对象时为搜索表单的配置 onSubmit 提交表单时触发 其他属性和参数配置，参考之前讲解的antd组件使用方式
Antd 组件基本使用 使用 Antd 组件非常的简单 引包 ----- 暴露 ---- 使用 首先我们通过组件库来实现一个简单的按钮 第一步 安装并引入 antd 包 使用命令下载这个组件库 yarn...add antd 在我们需要使用的文件下引入，我这里是在 App.jsx 内引入 import { Button } from 'antd' 在引入的同时，暴露出要使用的组件名 Button 推荐去官方文档查看...，都会有代码解释 现在我们可以在 App 中使用 Button 组件 App.....文件中的 antd 目录下的 dist 文件夹中找到相应的样式文件，引入即可 即可成功引入 antd 组件 2....@import '/node_modules/antd/dist/antd.less'; 注意一定要添加分号结尾，这是一个非常容易犯的错误 可见，我们成功的将主题色修改成了红色 antd ui组件库就记这么多
Ant Design for Vue的 Input 和 Textarea 组件有一个属性 maxlength ，可以限制文本输入长度。...输入字数限制：注意 maxlength 是 number 类型 2、textarea 输入字数限制：textarea 有两种写法，都可以达到文本框的效果
进行需求分析整理后，经过了一番查找，发现React版本的antd的表格组件功能很强大，可定制程度很高，可以助我完成这个业务需求的开发。...环境搭建 因为公司的项目是基于jsp的，antd本想用Vue版本的，无奈它与jsp的一些语法冲突了跑不起来，于是就尝试了react版本的antd，它跑起来了没有发现任何兼容性问题，一切正常。... // 自定义hook...image-20201119161505912 需要注意的是，CDN引入React和antd，他们是在全局暴露了一个对象，在使用它内部的方法时就需要React.xx、antd.xx来访问了。...，啪的一下，很快啊～新增加的那一列被渲染上去了，我大E了啊，antd不讲武德啊。
“关注作者：https://www.zhihu.com/column/c_1455925261150105600 ” 曾经，我每次面试时几乎都会问一个问题：antd 中的 Input 组件是受控组件还是非受控组件...在这篇文章，我们将一起聊聊怎么去让一个组件像 antd 的 Input 组件这样，既支持受控模式，又支持非受控模式。...以 antd-mobile 现在的 5.17 版本为例，几乎全部的涉及到输入值、切换、展开收起的组件，都是需要做到既受控又非受控的。...的 useUpdate： 抽象与复用：usePropsValue 到这里，我们已经基本实现了所有的功能，但我们只是实现了一个 Input 组件，在 antd-mobile 这样的组件库中，会有很多很多组件都需要支持能够切换受控和非受控模式...“如果觉得写得还不错，麻烦去给 antd mobile[5] 点个 star 吧！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
