weixin_38122772-优快云博客

原创 echarts 线形图如何画阴影线条和区域渐变

实现的效果：lineStyle: { // 线条样式 color: { colorStops: [{ offset: 0, color: '#FA8558', }, { offset: 1, color: '#FAAF58' }], }, width: 2, // 线条粗细 shadowOffsetY: 12, // 阴影线条的偏移量 shadowColor: 'rgb

2022-03-16 15:23:25 3769

原创 antdv select下拉菜单自由扩展—添加输入框的使用问题

背景antdv select 官方使用dropdownRender对下拉菜单进行自由扩展，为了解决点击 dropdownRender 里的内容浮层关闭的问题，官方建议添加preventDefault，但是这样扩展内容里的输入框无法聚焦一开始采取的方案是手动给自定义的输入框focus事件，但是基于页面只会有一个focus的原则，会因此触发select的输入框blur，反而导致下拉菜单收起，最后还是采取手动控制select的open属性来解决了问题解决思路在select上添加一个透明的div作为se

2022-02-23 19:55:59 6447 10

原创如何最简单的在项目里面放一个结构化的说明文档

状态版本切换框保存版本管理编辑测试停止发布撤销发布未保存/正在编辑（草稿状态）——有——————————未发布有——有有有——有——已发布有——有有有————有测试中——————————有————...

2021-06-09 15:42:27 254 2

原创用moment实现指定粒度的时间段分割

实现目标：输入起止时间作为范围，间隔分钟数作为间隔长度（分钟）实现时间段的自动生成方法如输入 9:00到14:00，15分钟作为间隔即生成如下结构：贴上代码import monent from 'moment'/*** 指定时间范围下生成指定时间间隔的数组数据* @param startT { string } 开始时间 "HH:mm"* @param endT { string } 结束时间 "HH:mm" * @param interval { int } 间隔时长* */

2020-08-27 16:28:02 1556

原创以antd项目内实践为例，中断指定fetch请求的方法

因为fetch请求不像ajax有自带的abort方法，所以是使用 window.AbortController来实现中断请求创建Signal和停止Signal的方法写入一个公共管理文件并导出common.js// 创建一个signalexport function newSignal(key) { if ("AbortController" in window) { window[key+'Controller'] = new AbortController(); } retur

2020-07-13 16:10:11 958 1

原创用React hook写一个倒计时

import React, { useState, useEffect, useCallback, useRef } from 'react';const CountDown: React.FC = () => { const intervalRef = useRef<any>(null); const [count, changeCount] = useState(0); useEffect(() => { if (count === 59) {

2020-06-16 14:17:15 4085

原创 umi-request的具体使用案例

放上参考文档: https://github.com/umijs/umi-requestrequest.ts文件import { extend } from 'umi-request';import { notification, message } from 'antd';import _omit from 'lodash/omit';const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已

2020-05-19 11:43:30 12442 4

原创支付宝支付页面被拦截的解决方案

打开支付页是在请求回调后发生的，回调后打开空页面依然会被拦截，因此，一定要在发起请求前打开一个空页面：const openWindow = window.open("about:blank");回调完成后再给新页面赋予具体地址：openWindow.location = res.data.payUrl;如ajax请求： const openWindow = window.open(...

2019-12-25 11:15:09 9614 1

原创每次请求接口，jsessionId都要变化的解决方案

因为跨域请求是不会发送cookie等用户认证凭据的到服务端的，每次请求服务端都不能拿到之前的jsessionId，会认为这是一个全新的请求，所以重新生成了一个jsessionid。首先，客户端要开放传输cookie的认证：XHR请求var xhr = new XMLHttpRequest();xhr.open('GET', 'http://example.com/', true); xh...

2019-08-29 15:24:32 11852 1

原创纯css3构建骰子

上一篇（点击查看）用flex构建了骰子的六个面，现在用css3的3D属性把骰子面拼成骰子，如下：flex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> // 引入fle...

2019-08-15 16:52:42 1810

原创 flex 画骰子六面

// html<div class="box1"> <span></span></div>// less.box1 { display: flex; align-items: center; justify-content: center;}// html<div class="box2"> &l...

2019-08-12 17:07:19 562

原创 react 获取实例的方法（ref / wrappedComponentRef / getWrappedInstance）

普通组件child1.jsimport React, { PureComponent } from 'react';export default class Child1 extends PureComponent { state = { name: 'child1111' } render(){ return ( <div> ...

2019-07-16 18:27:25 9962 3

原创 roadhog2.x 代码分割

前言之前项目使用的是antd-design，依赖roadhog（"^2.5.0-beta.4"）来构建，build项目时给出了建议代码分割的提示：为了保证项目后面的性能，还是要着手做代码分割：CommonsChunkPluginroadhog相当于是webpack的封装工具，依赖的webpack版本是3.x，webpack3.x代码分割的相关api是CommonsChunkPlug...

2019-07-16 11:11:15 1067 6

原创标记高亮关键字 react

标记指定关键字高亮（以单个文字、字母为单位，不区分大小写）/** * 标记指定关键字高亮（以单个文字、字母为单位，不区分大小写） * @param {string} text 需要处理的原字符串 * @param {string} key 需要标记的字符串 */export function keySingleRender(text, key) { if (key &a...

2019-06-13 17:09:16 3050

原创接入第三方QQ咨询时，点击自定义DOM无效的解决方法

以接入起点客服为例生成DOM id后，在项目中添加id后点击没有打开客服QQ，我猜想可能跟异步加载dom相关（项目基于antd-design）解决方法：index.html / index.ejs中：// 头部引入js文件后，写一个不占位的dom  <div id="申请的 DOM ID"></div>在你的业务文...

2019-05-30 18:34:56 330

原创百度地图 -- 城市列表控件点击除控件外的区域自动触发关闭

1.全局添加点击事件的监听 window.addEventListener('click', this.clickOutSelectCity); // 监听是否点击除城市列表控件以外的区域2.判断点击的dom是否在城市列表控件(class为 .BMap_CityListCtrl’)外，在外则触发控件的关闭按钮（id为 #popup_close）点击事件 clickOutSelectCit...

2019-04-30 10:56:45 1680

原创百度地图 -- 鼠标绘制工具DrawingManager

问题1. DrawingManager画圈工具没有提供click的事件监听，如下图1，但我的业务场景需要点击工具栏后执行操作，咋办？图1:答：打开控制台，直接绑定点击事件到对应dom，如下图2：图2: document.getElementsByClassName('BMapLib_circle')[0].addEventListener('click', e => { ...

2019-04-25 16:48:44 7837 2

原创 RSA 之 jsencrypt前端加密解密方法

1.安装依赖：$ npm install jsencrypt --save2.在终端（基于Unix的操作系统）生成公钥和私钥，注意：这里的公钥用于加密，私钥用于解密。生成私钥：openssl genrsa -out rsa_1024_priv.pem 1024查看私钥：cat rsa_1024_priv.pem生成公钥：openssl rsa -pubout -in rsa_10...

2019-01-17 16:50:04 9343

weixin_38122772的博客