首页 > TAG信息列表 > antd

vue+antd实现PDF预览（后端返回的是文件流）

操作步骤： 第一步：下载包   npm install --save vue-pdf 第二步：导入组件   第三步：使用pdf标签进行展示，showUrl指的是访问路径    第四步：定义要用到的变量    第五步：处理文件流，转换成地址        最终效果：图一是我加的一个loading描述，图二是效果。      

React + Dva + Antd + Umi 快速入门

  最近一个项目用了React + Dva + Antd + Umi 技术栈   基础框架概念 React前端三大框架之一。Dva由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：”dva 是 react 和 redux 的最佳实践”。Antd是阿里的一套开箱即用的中台前端/设计解决方

webpack css-loader模块化导致的antd样式不好用解决方案

css-loader 模块化会导致 antd 样式文件无效，解决的方式就是排除 node_modules 下的目标文件就可以 如果你用的 less 就可以按以下方式来配置 { test: /\.less$/, include: /node_modules/, // node_modules 下的 less 文件不使用模块化 use: [ { loader: MiniCssE

使用 React + Antd-mobile 封装移动端物流单据列表查询功能组件

前言 面试遇到一道题，使用 React 实现移动端物流单据列表查询功能。 好家伙，React 咱已经快两年没碰过了（主要是项目都是用的 vue ，只能额外找时间学习 React ）。 既然挑战来了，刚好也可以复习一下 React ，所以咱花了一天时间将它实现，并封装成了复用组件。 这里使用到了 Antd-mobile 组件

react 项目中 使用 antd 的 Table 实现列表的上拉加载

  实现上拉加载 主要是通过计算 判断滚动条是否滚动到底部, 来进行触发加载事件的   需要注意的是 onScrollEvent 方法中所用到的变量, 不能 用 state 和 useState 来控制,  不能监听到他们的变化   元素宽高 （1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框

组件库文档工具介绍

组件库文档工具介绍 涅槃快乐是金关注 22022.07.06 23:54:42字数 331阅读 118 从 0 到 1 搭建一个全新的组件库文档工具不是最优的选择，本人先在网上搜寻一些已有的解决方案。业务项目技术栈是基于 React，UI 库使用的是 Antd，下面是一些方案的汇总和分析： bisheng，Antd 官网是基

react antd-mobile 适配移动端

1. react antd-mobile 适配移动端 参考：https://www.jb51.net/article/215386.htm 1.报错：Error: require postcss-flexbugs-fixes use postcss 8 原因：postcss-flexbugs-fixes 版本太高 解决：npm i postcss-flexbugs-fixes@3.2.0 -S 2.报错：plugin is not a funtion

antd DatePicker赋值，取值，限制日期的问题

antd的DatePicker组件fuzhishi 需要使用moment，否则会报错，moment依赖自行安装 初始化赋值： const getDetails = () => { form.resetFields() let initialValues = {} result.data.inputOutPutDTO.buOutputDetailDTOList.forEach((obj) => { if (obj.output_form

前端实习-踩坑week2

前端踩坑记录   Antd的语言设置： Antd默认是英文的，设置为中文需要导入一下文档： import zh_CN from 'antd/lib/locale-provider/zh_CN';   参数的传递： 确定需要传递的参数[ data, columns ](需要传递什么参数依据个人考虑)，使用props接收参数，然后通过解构赋值来得到所需要的参数

Antd Table组件的头部单元格水平居中

const columns = [     {         dataIndex: 'districtName',         title: '区县',         width: 150,     },     {         dataIndex: 'sendContent',         title: '发送内容',         width: 620,         customHeaderCell:

react + antd 实现表格拖拽调整列宽

前言 正常来讲其实表格拖拽调整列宽这个需求比较合理，说常见吧到也不见得

antd vue 折叠面板 v-for 循环点击无效

问题描述 实现一个折叠面板点击展开，但是必须点击两次才能展开，第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" :key="index" :show-arrow="false" > <p>{{ text }}</p> <template slot="header&q

antd表单时间戳和单选框的使用

时间选择器 <Form.Item label="生日"> {getFieldDecorator('birthday', { rules: [{ type: 'object', required: true, message: 'Please select time!' }], })(<DatePicker />)}

antd disabledDate 选择禁用特定的时间范围

disabledDate = (time) => { const date = new Date(指定的时间) // 获取指定的时间并标准化 return time < moment().year(date.getFullYear()).month(date.getMonth()).date(date.getDate() - 1) || time > moment().year(date.getFullYear()).month(date.getMonth()).date(date

vue-antd 表格Y轴滚动，表头与内容不对齐问题

   现在滚动条我们已经隐藏起来 /deep/.ant-table-body::-webkit-scrollbar { display: none; } 引起这个问题原因是scroll添加滚动时，在表头与表格内容都加了占位符，我们上面的隐藏只是把表格内容占位符隐藏了起来，表头还有；原因知道了我们直接看下面代码 <a-table

从零搭建react+ts组件库（封装antd）

为什么会有这样一篇文章？因为网上的教程/示例只说了怎么做，没有系统详细的介绍引入这些依赖、为什么要这样配置，甚至有些文章还是错的！迫于技术洁癖，我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节，做到面对对于工程出现的错误能够做到有把握。 最近使用阿里低开引擎

antd的tree组件如何在onSelect中获取选中节点的其他属性

谢谢大家，我知道了，可以通过info来获取，dataRef会将没有属性全部展示出来，如下：   onSelect = (selectedKeys, info) => { Message.info(selectedKeys); console.log(info); console.log(info.node.props.dataRef.app_id); };

.babelrc配置例子

{　　"presets":[　　　　["es2015",{"modlues":false}],　　　　"react", 　　],　　"plugins": [　　　　"transform-object-rest-spread",　　　　"syntax-dynamic-import",　　　　["import", { "libraryName

ng-zorro-antd 13.2.0 正式发布

ng-zorro-antd 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。 ng-zorro-antd 13.2.0 现已发布，更新内容如下： Bug Fixes carousel: 修复 nzAfterChange 回调未正确触发问题 (#7326) (b517bd4

antd-vue 树改变前面图标 隐藏默认子图标

默认最好一级子图标不可以改变，方法是隐藏默认的，这样就可以。 <style> // 关闭时的图标 ::v-deep .ant-tree-switcher_close{ background: url('~@/assets/plusIcon.svg') no-repeat 4px 10px !important; i{ display: none !important; } } // 把之前的默认图标隐藏 ::

antd pro react删除右边SettingDrawer设置按钮

      删除app.tsx下SettingDrawer即可：  

Antd-Vue插槽内属性修改

antd-vue table scopedSlots scopedSlots插槽内属性修改 如下我想要根据状态来控制插槽内a标签点击与不可点击的切换 <span slot="operation" slot-scope="text, record"> <a @click="handleWarehousing(record)" v-has="'ewm:warehousing'" :di

antd笔记

const { getFieldDecorator, getFieldValue, setFieldsValue, resetFields, validateFields, getFieldError } = this.props.form; getFieldDecorator: 用于和表单进行双向绑定 getFieldDecorator(id, options) 参数 id 必填输入控件唯一标志。支持嵌套式的写法。string options.

antd vue2 自定义主题

注意点1   less一定要是3版本, less-loader一定要是5版本 然后在vue.config.js配置 module.exports = {     runtimeCompiler: true,     css: {         loaderOptions: {           less: {             javascriptEnabled: true,           },  

关于在react项目中引入antd样式不生效的问题

1. 在react项目中下载安装antd依赖包 npm i --save antd 2. 在index.css顶部引入antd样式（antd文档里说的是在app.css顶部引入样式，不知道为啥我试了样式不生效）   @import '~antd/dist/antd.css';   3. 在项目中引入我们想要的组件，这样就可以看到效果啦！ import { Button }