- 博客(34)
- 收藏
- 关注
RSS订阅原创 如何优雅地彻底解决 antd 全局样式问题
module里边增加特定的classname重新覆盖回去 ，这边推荐使用module样式编写代码，因为外边会增加一层隔离classname哈希值，不容易被覆盖和影响。总结：更改antd全局的样式，一定一定要加classname做一个隔离，不然会出现不可思议的样式问题，覆盖来覆盖去，全局样式会被污染，切记切记！首先可以给自己组建的的body添加一层classname名字。1.提高子组件的样式权重 或者降低父组件的样式权重。2.增加特定的classname名字 增加样式隔离。首先 明确完冲突后解决方案有两个。
2023-05-17 14:27:11
1278
原创 ChatGPT ✖️ 前端 = 有点er意思
论文写作，总结小文，星座运势，出现了更多的子领域和创业机会，总的来说，ChatGPT的出现和发展，将会对人们的生活产生积极的影响，提高生活质量和效率。弊端：百度google都要自己各种辨别整理，chatgpt秒出答案，但我想说的是，对于不会写代码的还是老老实实先学会代码基本思路，不然有错误都不知道怎么改，很多复杂问题是不好给chatgpt描述的，既然人工智能已经出来了，互联网行业都会面临巨大的挑战，不知道怎么卷就加入吧，chatgpt确实已经偷偷覆盖到各行各业，在未来会产生越来越大的影响。
2023-05-17 12:48:07
5460
1
原创 图可视分析
AntV 是蚂蚁集团全新一代数据可视化解决方案数据可视化呢，就是数据通过某种技术手段，直观展示在人们眼前。这种技术就是可视化技术，对于常规的统计数据，我们有AntV的G2/G2Plot，把它们转化为折柱饼图展示（图左）；对于地理位置信息，我们有AntV的L7，将它们展示在地图上（图中）；对于关系数据呢，我们有AntV的G6，将它们展示在画布上（图右）
2023-05-14 23:15:00
498
原创 antd 行列合并
const mergeCells = (text, data, key, index, recordlength) => { if (index !== 0 && text === data[index - 1][key]) { return 0; } let rowSpan = 1; for (let i = index + 1; i < data.length; i += 1) { if (text !== data..
2022-01-20 16:36:39
708
原创 递归排除空数据 和为 null的数据
let filterLists = (myList, value) => { return myList .filter((item) => { return item.value != value; //过滤条件 }) .map((item) => { item = Object.assign({}, item); if (item.chil
2022-01-20 16:11:21
421
原创 递归修改属性
// 递归 const filterdata = (data，id) => { // const {dimMapId } = data; const array = data.map((el) => { const { valueName, sonValue } = el; let item = {}; if (valueName && valueName !== ".
2022-01-20 16:08:55
740
原创 js 根据 文字 或者 固定文字排序
js 根据 文字 或者 固定文字排序 let array = ["淘系", "B系", "跨境"]; // js 根据 文字 groupColumns.map((ite) => { if (ite.ellipsis) { data .sort((a, b) => { if (ite.ellipsis) { return a[groupColumns[3].d
2022-01-20 15:46:34
822
原创 ... 溢出省略加溢出横滚
render: (text) => <Tooltip title={text}><div style={{width: '200px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}><span>{text}</span></div></Tooltip>, // render: (text) => <Tooltip.
2021-11-30 18:01:14
79
原创 分页 最简单的Antd Table分页
// dataSource 表格数据 <Table scroll={{ x: 1200 }} style={{ marginTop: '12px' }} dataSource={dataSource.data} columns={columns} pagination={{ total: dataSource.totalNum, onChange:
2021-11-01 15:18:31
866
原创 模糊搜索 带防抖的最简单模糊搜索
import { debounce } from '@alipay/bigfish/util/lodash'; const handleSearchdimensionality = (value) => { geiDimMeta({ dimName: value, pageNum: 1, pageSize: 20, }).then((res) => { const arrs = []; res?.resultCont.
2021-11-01 15:17:01
369
原创 防抖 最简单防抖
在input框输入的时候，当我们监听input事件的时候，由于input事件是一旦输入框内容发生改变就触发我们绑定的回调函数，在实际当中我们往往会根据输入框内容去发送一些请求，这样一旦改变就触发无疑是耗时的，而且影响性能,这个时候，我们就可以使用防抖动。实现的大概思路就是我们可以自定义隔多长时间来触发我们的处理操作(例如ajax请求数据等)方案一var timer = nullelement.input = function () { clearTimeout(timer) // 每次进来的时
2021-11-01 15:12:15
198
原创 dva 简单使用流程
import { connect, history } from '@alipay/bigfish'; 引入connectconst Flowline = (resultContent,analysisChartData，dispatch)=>{// resultContent, analysisChartData 都可以直接打印到 相当于props传参1.... 发送dispatch const showDrawer = () => { setVisible(true);
2021-10-14 12:27:48
430
原创 多个input框 输完后鼠标光标后移 删除自动前移
import React, { useEffect, useState } from '@alipay/bigfish/react';import { Button, Checkbox, Input, Tooltip, Form } from '@alipay/bigfish/antd';import { DesktopOutlined, MobileOutlined, QuestionCircleOutlined } from '@ant-design/icons';import styles fr
2021-10-12 15:27:32
731
原创 全屏展示可视化全屏展示
const [fullScreen, setFullScreen] = useState(false); useEffect(() => { document.addEventListener('fullscreenchange', () => { if (capture.current === true) { if (document.fullscreenElement) { setFullScreen(true);
2021-10-09 15:41:13
199
原创 formatvalues （格式化数据 当数据的差值特别大 还需要可视化 肯定不能按比例格式化 1 和100000 1肯定没了 需要统一格式化）
最大值用 Math.max（）算出来if (endsetwholeData) { endsetwholeData.forEach((item) => { if (item.value) { maxarrs.push(item.value); } }); } maxnums = Math.max(...maxarrs); // 设置区间 const formatvalues = (value, maxnum) => {
2021-10-09 15:21:18
319
原创 数组根据相同的属性push自己的to数组 （比如你们的父节点相同创造chindren数组，根据相同的父亲（label）创造不同的children（to））
逻辑代码 // 4.糅合数据 合并to属性 造出桑基图的数据 const newchangetodata = []; const arrDimensions = []; const changeto = (newarr) => { arrDimensions.push(sortArr(newarr, 'level')); sortArr(newarr, 'level').forEach((itemn) => {
2021-10-09 15:12:03
108
原创 数据转换（对象转换成数组套对象）
{ "flow_in_ratio": { "displayName": "流入占比", "dataType": "number", "displayOrder": 6, "format": null, "fieldId": null, "description": "流入占比", "columnId": null, "position": null, "ca
2021-10-09 14:25:50
296
原创 bizcharts 自定义设置Tooltip模板
bizcharts 自定义设置Tooltip模板欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将
2021-07-10 20:37:41
913
原创 react也可以实现监听函数 不只是用useEffect
此方法适用于合适的时机调用渲染。两个传参 一个为更改后的props 一个为更改前的state static getDerivedStateFromProps(nextProps, preState) {if ( Object.keys(nextProps.DetailLists || {}).length || Object.keys(nextProps.historyList || {}).length ) {// 做一些set state的操作}...
2020-09-28 15:37:23
1329
原创 react实现多个input编辑效果 与下载
父传子方法 setDetailList = (title, value, str) => { const { detailList } = this.state; detailList[str][title] = value * 1000000; this.setState({ detailList: { ...detailList } }); };changevalue = (item, value, str) => { const
2020-09-28 15:33:51
196
原创 bizcharts 渲染指定的滑入展示文字
数据格式(48) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {m
2020-09-28 15:23:01
303
原创 react 更改antd的默认样式
2种方法1.import styles from '../index.less';下面为index.less代码 直接引入就是全局可以用 当然更建议外面套盒子:global(.ant-modal-body) {// 括号里面是antd默认样式的class名字 overflow: hidden; }2.直接在antd外面套一层盒子 通过less引入 然后把样式一层层指定下去例如<div className ='box'><thead class="ant-t
2020-09-28 15:08:23
1711
原创 封装vue loading组件
上代码<template> <div class="loader"></div></template><script>export default { name: 'Loading'}</script><style lang="scss" scoped>$colors: hsla(337, 84, 48, 0.75) hsla(160, 50, 48, 0.75) hsla(.
2020-06-18 16:25:34
1090
1
原创 react-umi 国际化 （中英文切换）
.umirc.js国际化默认配置export default { plugins: [ [ 'umi-plugin-react', { locale: { default: 'zh-CN', //默认语言 zh-CN baseNavigator: true, // 为true时，用navigator.language的值作为默认语言 antd: true // 是否启用antd的<Loca
2020-05-27 23:23:02
5295
1
原创 vscode 文件夹重叠问题 -----设置
不知知道点到哪里 在vscode里新建文件夹后如下图图1如何设置为原来的图二在vscode的设置—>用户—》资源管理器里设置即可
2020-05-26 22:59:59
5493
2
原创 轻量级数字动画插件 —— countUp.js
react中实现数字动画插件引入yarn add react-countupimport CountUp from ‘react-countup’;直接复制到html模块 Tor 全部数据量
2020-05-25 13:15:46
599
原创 export 和 export default 区别
export / export default 都是可以用来导出常量、模块、文件、函数等等。exportexport导出需使用{} 将对应的模块导出，同时在使用是import导入时需要使用{}来引入相应的模块export default导出时，不用使用{} 进行导出对应的模块、函数、文件等。但是只能导出一个。同时import 导入时也不用{} 实现导入。...
2020-05-18 15:42:03
217
原创 高级程序设计
拼接Object.assign(obj,{c:3})var arr1 =[1,2,3,4]var arr2 =[1,2,3,4]var a=[…arr1,…arr2]connectes6数据类型 Symbol暂时性总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。if (true) {tmp = ‘abc’; // ReferenceErrorlet tmp;}检测数据类型redu
2020-05-17 21:48:53
1007
原创 vue小结
Vue小结1，vue的生命周期？创建 挂载 跟新 卸载2，vue实现数据双向绑定的原理是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。3，vue路由的实现原理般源码中，都会用到 window.history 和 location.hashHash通过拿到路由= window.location.hash然后把内容整到页面上His
2020-05-17 21:22:56
1576
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人