- 博客(193)
- 资源 (2)
- 收藏
- 关注
原创 ERROR: Could not find a valid gem ‘cocoapods‘ (>= 0) in any repository
Flutter启动报错,cocoapods安装失败
2023-05-08 22:43:12 1076 1
原创 在 Chrome 插件的 content.js中,无法直接访问页面中的 Vue 实例
content.js在与网页分离的环境中运行,无法直接访问网页的JavaScript对象,包括Vue实例
2023-03-30 15:09:50 1130 2
原创 CRA与craco配置移动端
用craco去配置create-react-app的移动端,实现px-to-rem或者px-to-viewport、alias别名等其他webpack配置
2022-11-01 16:38:04 440
原创 iframe横向滚动条在Chrome上不显示在火狐上显示
问题给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 566 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 212 1
原创 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 1380 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 627
原创 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 1071
原创 postMessage+iframe通信
postMessagewindow.postMessage() 方法可以安全地实现跨源通信。语法otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。message将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以
2021-08-10 09:49:38 569
原创 微信开发者工具出现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 5222 1
原创 useEffect 与 useLayoutEffect 和 useMutationEffect 的区别
useEffect99% 的情况下都用这个。当钩子稳定并且如果重构任何类组件以使用钩子时,可以将任何代码从 componentDidMount、componentDidUpdate 和 componentWillUnmount 移动到 useEffect。useMutationEffect这在 React 渲染您的组件的同时同步运行。如果要改变 DOM,就用这个钩子,但前提是你不需要从 DOM 中读取值。useLayoutEffect这会在 React 执行完所有 DOM 更改后立即同步运行。如果
2021-06-25 16:45:05 612
原创 富文本编辑器Quill的使用
需求来源于产品和UI快速开始<!-- Include stylesheet --><link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"><!-- Create the editor container --><div id="editor"> <p>Hello World!</p> <p>Some initia
2021-06-21 10:12:42 2675 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 1763
原创 如何在浏览器打开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 2755 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 312
原创 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 2879
原创 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 2688
原创 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 1757 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 1749 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 1080
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人