- 博客(46)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 JS获取地址栏中url的参数，返回一个对象
在工作中，时常会有从地址栏中拿取对应的参数，当参数过多时，我们会考虑封装成一个方法，将参数放在对象中返回，这样获取会更加方便，下面列出了两中方法。第一种//路径 https://editor.csdn.net/md?articleId=1&&articleNum=1&opt=editgetUrlParams = () => { let url =...
2020-03-26 13:23:59
1900
1
原创 解决webpack-dev-server 自动打开浏览器失败的问题
在学习webpack-dev-server的过程中，浏览器无法自动打开，已解决。
2022-06-15 10:39:08
990
1
原创 webpack打包字体文件后无法加载，显示failed to decode downloaded font
项目场景：使用webpack打包字体文件，例如iconfont.svg、iconfont.eot、iconfont.ttf等。问题描述webpack打包字体文件后无法加载，显示failed to decode downloaded font。webpack打包字体文件之后，字体图标不展示，显示一个小框，检查之后确认字体图标的样式已经设置上，但就是没有展示，打开控制台，展示如下图所示的报错。使用file-loader和ur-loader都无法实现{ test:/\.(svg|eot|
2022-05-19 17:42:44
1296
原创 ResizeObserver Polyfill监听元素宽高的变化，在React中的应用
当需要对窗口大小变化做监听时，可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。原理：使用 ResizeObserver()构造函数创建一个新对象，然后使用 ResizeObserver.observe()来监听dom对象，每dom对象的大小发生改变时，构造函数中设置的回调函数便会运行。resizeObserver.observe(): 监听一个dom元素resizeObserver.unobserve(): 注销掉监听的dom元.
2020-07-31 15:26:24
5505
原创 将antd中的Tree组件放在Form表单里面
问题：前一段时间使用antd的Tree组件的时候遇到一个问题：将Tree组件放在Form表单的时候，想用initialValue给Tree的defaultExpandedKeys，defaultSelectedKeys和defaultCheckedKeys赋初始值，已找到解决方法。解决思路：Tree 不是 form control，你不能直接把 Tree 丢给 getFieldDecorator，需要把 Tree 封装下再丢给 getFieldDecorator。注意4.x版本的antd不支持
2020-06-28 11:16:44
4598
1
原创 在react中使用antv g2绘制带有sider滑块的chart图表
在slider中会遇到的问题，slider两边要求展示的为文字，但过滤的时候过滤条件为下标，实现思路如下：过滤的时候判断条件是数值类型即下标，但为了在滑块两端展示文字，需要将’start’,'end’那边改成对应的起始终止文字，但又会出现新的问题，就是在onChange里面打印的startText和endText也为相应的文字而不是下标，考虑着在变化的时候需要将变化的下标赋值给ds里面的from和to,不然chart图表不再展示，就需要进行遍历判断一下，找到文字下对应的下标，然后赋值给from和to
2020-05-25 13:48:18
2038
原创 antvg2中的Slider 滑块插件的简介
1. 使用前提：Slider 组件作为 G2 的交互插件，必须在 G2 引入的前提下使用！为了做到纯粹和解耦，Slider 组件是完全基于数据的筛选操作，需要配合 DataSet 以及状态量使用，当滑动条发生变化时，通过定义 onChange 更新状态量，来达到图表的自动更新。引入脚本import G2 from '@antv/g2';import Slider from '@antv/g2-plugin-slider';const slider = new Slider({ })
2020-05-21 10:53:51
3402
1
原创 antv g2绘制雷达图，点击横坐标的label变色
需求介绍：绘制雷达图点击label改变样式解决思路：首先考虑着使用g2自带的label来进行展示，虽然通过chart.on('axis-label:click',ev=>{})可以拿到当前点击的哪一个，但是label内部没有回调函数，无法进行判断来展示不同的颜色。然后再考虑使用辅助文本chart.guide().text({}) 来展示label，label展示出来了，但位置是根据数据变化的，所以位置不好控制，在辅助文本的点击事件里面重新绘图，辅助文本的点击事件chart.on('gu
2020-05-19 18:37:36
4509
原创 JS获取图片真实的宽高
今天遇到一个有关获取图片真实宽高的问题，不管怎么获取，拿到的宽高都是0。然后在网上找了一下解决方法，在这边记录一下，供大家参考。需求介绍：进入页面之后，首先是调接口，根据返回的图片的url，将图片展示在页面上。因为图片是展示在固定区域内，只允许等比例缩放，不允许拉伸，也就是说，当图片宽高大于这一区域的时候，图片等比例缩放，当图片宽高小于这一区域的时候，就展示图片真实的大小。解决办法要实现上面的需求，就需要获取到图片真实的宽高，然后与展示区域的宽高进行对比，将图片展示在特定区域。通过jquer
2020-05-19 10:25:21
788
原创 react中引入百度地图时，去掉百度地图的logo和信息
引入百度地图时，会发现地图的左下角会有logo和信息，在项目中我们是不需要这些的，采用css就可以将其去掉.anchorBL{ display:none; }
2020-05-14 16:13:36
549
转载 使用es6模板字符串嵌入变量，并实现循环
模板字符串支持嵌入变量，只需要将变量名写在 ${} 之中。在模板字符串中，遍历数组，生成循环结构。let arr=['aaa','bbbb','c','dd','f']let temp=`<ul> ${arr.map(item=>{ return `<li>${item}</li>` }).join('')} </ul>` console.log(temp); /*<ul> <li>aa
2020-05-12 18:48:29
4413
3
原创 JS实现一段字符串转换成5个字符为一组的数组
今天遇到一个新的需求，展示一段字符串，一行展示5个字，不足5个字的则全部展示。由于字符串时后端直接返回的，长度内容不确定，所以考虑着将这一段字符串转换成有顺序的数组，5个字符为一组。方法一 let str = '长江后-浪推前浪啦啦啦啦啦拉了拉', arr = []//用于保存每次截取后的字符串 function creatArr(str) { var len = str.length let newStr = ''//截取之后返回的新字符串 if
2020-05-11 19:05:51
2206
转载 vh与vw
1. vhvh是当前屏幕可见高度的1%，height:100vh == height:100%;注意：当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开，其高度与屏幕高度一致。2.vwvw就是当前屏幕宽度的1%注意：设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的...
2020-05-07 18:15:48
695
原创 react引入antd报警告--findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of CSS..
警告内容警告原因src/index.js中使用的严格模式。解决办法删除<React.StrictMode>标签
2020-05-07 09:36:32
2348
原创 CSS3实现0.5px的边框+渐变+伪元素补充
面试的时候被问到如何使用css3实现0.5的边框，当时脑袋蒙圈，想着直接设置border为0.5px，但肯定是不可以的。思路：将元素的伪类高度设为1px,使用css3的渐变（linear-gradient），50%有颜色，50%透明，个人感觉思路没有问题，不知为何页面不展示线条。伪类 + scaleY(0.5) 实现边框为0.5px伪类+linear-gradient<!D...
2020-04-29 19:00:44
903
原创 g2绘制点图，鼠标移入点上出现tooltip，对应的label消失
g2绘制点图，实现鼠标移入点上，tooltip展示，对应的label消失，鼠标移出之后，tooltip消失，对应的label展示出来。思路：给point注册鼠标移入事件，可以拿到当前移入的元素的数据，通过数组的findIndex方法，可以找到与当前移入元素的下标。label的格式是自定义的，用原生js可以获取所有的label数组，label的个数和总数据的个数是一一对应的，所以可以根据...
2020-04-27 11:00:12
2138
2
原创 js数组去重
1 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中includeslet reg = [1, 1, 2, 2, 22, 4, 4, 6, 6, 8] let arr=[] reg.forEach(item => { if (!arr.includes(item)) { arr.push(item) } })...
2020-04-21 16:46:23
161
原创 给定一个数组，让数组的每一项都乘以2几种实现方法
如实现：[1,2,3] => [2,4,6]方法：forEach / map / for / for…in / for… of / reduce1.forEach如果要使用数组的forEach()方法对其改值时，需要直接通过arr[i]这种方式来更改。let arr=[1,2,3]arr.forEach((item, index) => { item=...
2020-04-21 15:54:19
11109
原创 使用antd中的Upload组件上传图片
实现的功能：上传图片支持预览和删除新上传的图片的不支持下载功能，应该是在本地上传的图片没有找到对应的urlupload文件用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。import React from 'react';import { Upload, Icon, Modal, message } from 'antd';import $state...
2020-04-17 15:18:52
7372
原创 在百度地图上添加覆盖物，并且可以移动覆盖物
实现的思路：引入覆盖物的坐标点数据，对于本地mock的数据，可以写在js文件中，用变量接收一下，然后在当前文件中引入，直接使用对于的变量即可拿到mock的数据。试过使用json数据，但总会出现跨域问题，果断放弃了。地图展示在地图上添加覆盖物循环给覆盖物添加需要的属性,如ply.name=xx如果百度地图和外部列表联合使用，外部列表需要使用到覆盖物中的某个属性，需要将地图的所有覆盖物暴...
2020-04-16 12:18:25
1873
原创 百度地图缩放功能
实现地图缩放功能：滚动鼠标的滚轮点击自定义缩放控件，点击 + 是放大地图，点击 - 是缩小地图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi...
2020-04-16 11:31:22
5717
4
原创 g2文档整理
1. 渐变色G2 中提供了线性渐变、放射状 / 环形渐变两种形式，使用方式如下：线性渐变// 使用渐变色描边，渐变角度为 0，渐变的起始点颜色 #ffffff，中点的渐变色为 #7ec2f3，结束的渐变色为 #1890ffstroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';放射状 / 环形渐变// 使用渐变色填充，渐变起始圆的圆心坐标...
2020-04-10 15:38:43
963
原创 在react中引入装饰器报错, Support for the experimental syntax 'decorators-legacy' isn't currently enabled
在新建的react脚手架中引入mobx的装饰器，会报以下错误Support for the experimental syntax 'decorators-legacy' isn't currently enabled这是因为我们没有装支持装饰器的组件，需要完成以下几步：1. 运行npm run eject 暴露配置文件注意：在新建的react脚手架中，运行npm run eject命令会...
2020-04-09 11:16:06
654
原创 React中插入可编辑行的table表格
/* * @Description: * @Author: wanghuilan885 * @Date: 2019-07-09 17:37:24 * @LastEditTime: 2019-12-05 10:59:22 * @LastEditors: Please set LastEditors */import React from 'react'import { Icon,...
2020-04-08 18:00:04
5250
原创 js保留两位小数的几种方法
下面给出了几种保留两位小数的方法1. 封装函数 function toDecimal2(x) { let f = parseFloat(x); if (isNaN(f)) { return false; } f = Math.round(x * 100) / 100; let s = f.toString(); let rs = s.indexOf(...
2020-04-08 14:50:21
521
原创 解决React中多行文本省略不生效的情况
在React项目之中不生效是因为在react编译后没有-webkit-box-orient: verticalindex.js文件import React from 'react';import "./index.less"export default class App extends React.Component { constructor(props) { ...
2020-04-03 14:36:42
606
原创 css设置文本溢出显示省略号的样式
文本溢出分为两种情况，一种是单行文本溢出，一种是多行文本溢出。单行文本溢出显示省略号width: 140px; //宽度必须要加上white-space: nowrap; //不换行overflow: hidden;text-overflow: ellipsis; //省略号“…”隐藏超出范围的文本display: inline-block; //如果不是行内样式，需要转成行内样式...
2020-04-03 14:27:46
494
原创 react+js实现textarea的高度自适应
在react中插入textarea，由后端返回的内容决定textarea的高度。import React from 'react';import {Input} from 'antd';import $ from 'jquery';const { TextArea } = Input;let valueShow='文本文本文本文本文本文本文本文本文本文本文本文本文本文本'export...
2020-04-02 17:48:37
970
原创 js简写城市名称
shortName(cityName){ if (cityName.includes("西双版纳")){ return '西双版纳' }else { return cityName.replace('市', ''); } } //西双版纳傣族自治州==>西双版纳 //南京市==>南京...
2020-04-02 17:07:59
1502
1
原创 g2自定义chart的label+将获取到的数据转换成chart表需要的数据
chart的label分为两种，一种是坐标轴的label，一种是chart图（条形图，折线图等）上展示的label。import { G2 } from "g2"const data=[{city:'北京',val:2111,type:'供应面积'},{city:'上海',val:1311,type:'供应面积'},{city:'南京',val:1241,type:'供应面积'},...
2020-04-02 15:31:10
1946
原创 css+git+算法
2019-10-17 技术分享会CSS不要嵌套太多 .a .b .c .d .e {}避免页面之间的样式相互覆盖，在最外面用id来包裹下面的代码覆盖上面的，这样也可以避免merge的时候冲突Gitgit init 初始化项目vi 编辑 vi a.txt esc:wq! 强制重启配别名 git config --global alias.s status ...
2020-03-31 21:20:11
118
原创 点击input框去掉阴影和边框
input框点击去掉阴影（已经加了border：none，outline:none）.ant-input:focus { border: none; bo...
2020-03-31 21:13:46
5407
1
原创 antd中的弹框的定位相对不变
1. antd中的弹框的定位问题在不同的分辨率下，弹框的位置相对不变，如果写死left和top的话，会有影响解决：用js来控制，例如有一个固定的元素，获取这个固定的元素的left和top, 加减固定的数来给model <div className="switch-plate-wrapper"> <Tooltip title={selectedPla...
2020-03-31 21:05:17
1137
原创 解决使用g2绘制图表，数据全为null时页面展示不为空的情况
G2数据全部为null时，页面显示优化如果数据全部为null 会出现下列这种情况 如果出现可以这样优化this.state.view.source(data,{ area:{type:'linear'}})
2020-03-31 15:59:32
2126
原创 解决chart.js重复绘图问题
使用antv g2绘制chart，页面上进行axios操作之后数据改变，新数据在页面上会重新绘图，但之前的图表依然存在，现在解决的是在绘制新图之前清除之前的图表。第一种chart.destroy() ----这种方式在某些情况下destroy会报错，可以采用下面的方法。desyroy：销毁图表，删除生成的图表对象。clear：清空图表上所有的绘制内容，但是不销毁图表。let ch...
2020-03-31 14:15:49
3460
原创 antv g2设置chart图例的legend为一条线与一个圆的组合
示例/* * @Description: 【商办】土地年度平均地价及溢价率 * @Author: wanghuilan885 * @Date: 2019-11-19 18:44:04 * @LastEditTime: 2020-02-19 16:40:48 * @LastEditors: Please set LastEditors */import React from 'rea...
2020-03-30 14:54:52
7394
4
原创 二维数组转对象+实战
1. 数组转对象[[],[],[]]=>[{},{},{}] var arr =[ [1,2,3], [5,6,7] ] var result = arr.map(vals => vals.reduce((obj, val, index) => Object.assign(obj, { [index]: val }), {})) console....
2020-03-30 14:24:00
1241
原创 封装千分位的两种方法
class FormattNumber {// 千分位formatNumber = num => {if (isNaN(num)) {throw new TypeError(“num is not a number”);} var groups = (/([\-\+]?)(\d*)(\.\d+)?/g).exec("" + num), mask = grou...
2020-03-30 11:49:37
241
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人