Eveweiscsdn-CSDN博客

问题给iframe加了scrolling=‘yes’,横向滚动条在Chrome出不来，火狐上是有的在外面加div可以在iframe外面再套一个div，控制div的溢出<div style="width:100%;height:1000px;overflow-x:scroll;"><iframe src="http://xxx.com" style="width:1200px;height:1000px;overflow:hidden;"></iframe><

2022-05-16 10:23:54 553 1

原创你知道Object 和Map的区别吗？

Object VS MapsObject与 Maps 类似，都允许将键(key)设置为值(value)、检索这些值、删除键以及检测是否在键中存储了某些内容。由于这个原因，Object在历史上一直被用作Map。但是在某些情况下，使用 Map 有一些重要的区别。Object的键是string、number和Symbol，而 Map 可以是任何值，包括函数、对象和任何原始值。// Object 创建const obj1 = new Object()const obj2 = {}const obj3

2022-05-04 17:51:15 1343

原创 JS的深拷贝和浅拷贝

浅拷贝指向同一个内存地址，改变一个对象，另一个跟着改变varobj1 = { a: 11, b: 22 };varobj2 = obj1;obj2.a = 33;console.log(obj1);// { a: 33, b: 22 }console.log(obj2);// { a: 33, b: 22 }深拷贝指向不同的内存地址，比如一对双胞胎，...

2022-02-20 23:06:28 211 1

原创记录echarts 的一些需求实现

echarts文字过长换行，文字倾斜，tooltip自动播放，X轴横向滚动

2021-12-31 14:14:34 138

原创 JS模板字面量标签函数

定义标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果。标签函数本身是一个常规函数，通过前缀到模板字面量来应用自定义行为。标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。举个栗子let a = 1;let b = 2;function simpleTag(strings, aValExpression, bValExpression, sumExpression) { console.log(strings); console.log(aValExpr

2021-12-12 17:56:29 1374 4

原创 echarts 中国地图散点图渲染

准备echarts中国地图的json（在最后）先注册地图import * as echarts from 'echarts';import { dataChina, cityValue, geoCoordMap } from './china';echarts.registerMap('china', dataChina, {}); 地图部分geo: { roam: false, // 是否开启鼠标缩放和平移漫游 map: 'china', itemStyle: { area

2021-10-17 22:06:31 625

原创 Fullcalendar插件的使用

设计需求因为设计稿是这样的像日历又不完全是日历，所以本来想用antd的日历组件也用不了还好Fullcalendar插件可以满足安装npm install --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction不说太多上代码具体看注释import React, { useState, useRef, useMemo } from 'react';i

2021-08-29 15:09:02 1068

原创 postMessage+iframe通信

postMessagewindow.postMessage() 方法可以安全地实现跨源通信。语法otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。message将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以

2021-08-10 09:49:38 568

原创微信开发者工具出现UNKNOWN ERROR:tunneling socket could not be established,cause=connect ECONNREFUSED

新建小程序的时候出现错误UNKNOWN ERROR:tunneling socket could not be established,cause=connect ECONNREFUSED查了一下发现是我之前开了代理，然后把代理关了，但是微信开发者工具的代理设置还是系统代理设置打开设置-代理设置把代理勾选为不使用代理即可，然后重启一下微信开发者工具...

2021-07-18 14:27:40 5197 1

原创 useEffect 与 useLayoutEffect 和 useMutationEffect 的区别

useEffect99% 的情况下都用这个。当钩子稳定并且如果重构任何类组件以使用钩子时，可以将任何代码从 componentDidMount、componentDidUpdate 和 componentWillUnmount 移动到 useEffect。useMutationEffect这在 React 渲染您的组件的同时同步运行。如果要改变 DOM，就用这个钩子，但前提是你不需要从 DOM 中读取值。useLayoutEffect这会在 React 执行完所有 DOM 更改后立即同步运行。如果

2021-06-25 16:45:05 610

原创富文本编辑器Quill的使用

需求来源于产品和UI快速开始<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"><div id="editor"> <p>Hello World!</p> <p>Some initia

2021-06-21 10:12:42 2625 8

原创 React Hooks的memo、useCallback、useMemo的区别

父组件引用子组件例子import {useState} from 'react';const MemoTest = () => { const [name, setName] = useState('名称') const [content,setContent] = useState('内容') return ( <> <h3>{content}</h3> <button onClick

2021-05-29 21:03:28 333

原创手动触发resize事件

let btn = document.getElementById('btn');btn.onclick = function () { setTimeout(() => { let myEvent = new Event('resize'); window.dispatchEvent(myEvent); console.log('111', myEvent) },400)}

2021-05-13 15:19:55 1753

原创如何在浏览器打开pdf文件头部隐藏菜单栏？

领导看到pdf的菜单栏不舒服，要你隐藏在pdf链接上拼接“#scrollbars=0&toolbar=0&statusbar=0”即可eg:https://shshhdk/shsjjs/test.pdf#scrollbars=0&toolbar=0&statusbar=0隐藏后，领导开心啦！...

2021-04-12 16:07:13 2736 6

原创 js导出文件

在B端项目中，会遇到很多导出Excel的需求，这应该怎么实现呢？根据以下步骤就能快速实现！在请求拦截器设置contentType// 文件下载 if (response.status === 200 && response.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') { return response; }

2021-04-12 14:11:26 306

原创接口数据的富文本带换行符怎么展示？

在css文件添加一行css就可以解决.more{white-space: pre-line;}

2021-04-09 10:40:15 447

原创 react-grid-layout的简单应用

react-grid-layout有什么用呢？实现拖拽，网格布局安装 react-grid-layoutnpm install react-grid-layout创建一个GridLayout组件import React, { Component } from 'react';import { Responsive, WidthProvider } from 'react-grid-layout';import './index.scss';const ResponsiveGridLay

2021-03-12 17:40:05 2873

原创 react hooks父组件怎么调用子组件方法

直接用????就可以说明，所以看看代码就能明白父组件import React, { useRef } from 'react';const Parent = props => { const childMethodRef = useRef(); const handleChildFun = () => {childMethodRef.current.childFun('test'); } const fun2 = () => {childMethodRef.

2021-03-01 10:45:55 2681

原创 react怎么实现拖拽

拖拽其实用h5的设置元素draggable就可以了，看代码就可以了拖拽容器import React from 'react';// 拖拽容器const Draggable = props => { const { dragRef, dragItem, handleDragStart } = props const img = new Image(); img.src = 'https://drag.png'; // 拖拽时的图片可以更改，一定要先设置src，再setDragIma

2021-03-01 10:34:07 1751 2

原创 videojs多个视频一起播放暂停

需求多个视频要用同一个进度条控制播放暂停进度条这个可以用antd的Slider组件<Slider marks={marks} max={maxTime} defaultValue={timeValue} value={timeValue} tooltipVisible={false} onAfterChange={(v) => handleAfterChange(v)} onChange={(value) => handleSliderValue(value)}/

2021-02-28 19:26:39 1734 2

原创了解一下websocket

*## Websocket 是什么？WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。跟http一样是一种协议跟SOCKET、HTTP有什么区别呢？HttpHTTP是单向的，客户端发送请求，服务器发送响应。举例来说，当客户端向服务器发送请求时，该请求以HTTP或HTTPS的形式发送，在接收到请求后，服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联，在发送响应后客户端与服务器的连接会被关闭。每个HTTP或HTTPS请求每次都会新建与服务器的连接，

2021-01-31 20:33:53 174

原创如何解决Mac上Chrome跨域

作为前端经常都会遇到跨域的问题，有时候就想临时调试一下，那怎么解决Chrome跨域呢？跨域首先新建一个文件夹，名字随便起打开控制台输入以下代码open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/yourpathyourpath 就是指你刚刚新建的文件夹地址，你可以进入你的文件夹然后用pwd来查看你的文件夹地址是什么，复制粘贴就好回车后会出现一个弹窗点击启

2021-01-26 10:43:31 1048

Selenium服务器

selenium-java-2.44.0.zip

空空如也