、昔年-CSDN博客

原创 IOS虚拟键盘弹出后，弹窗的按钮点击不起作用，不会触发click事件

IOS虚拟键盘弹出后，弹窗的按钮点击不起作用，不会触发click事件

2024-04-10 11:22:42 691

原创隐藏路由回调API wx.onAppRoute，全局定义分享内容

发现微信小程序中存在一个不为人知的强大功能：一个隐藏的路由监听API wx.onAppRoute。通过简单的初始化监听，我们可以在全局范围内捕捉到路由改变的事件，对开发者来说，这无疑是一项实用的功能

2024-03-21 10:48:33 371

原创微信小程序-webview分享

微信小程序之webview分享

2024-03-15 10:34:45 1442

原创 h5企微插件之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践

h5之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践

2024-03-11 16:14:29 1051

原创 web component - 使用HTML Templates和Shadow DOM构建现代UI组件

Custom Elements用于定义一个自定义元素UserCard，Shadow DOM用于封装组件内部的样式和结构，防止外部样式干扰组件，HTML Templates则用于定义组件的模板。最后，在JavaScript代码中，我们使用addEventListener方法监听组件的follow-event事件，并在事件处理程序中调用handleFollowEvent方法来处理按钮点击事件。在setContent方法中，我们使用getAttribute方法获取组件的属性，并将其挂载到shadowRoot中。

2023-12-28 15:07:41 655

原创 echart在折线显示横纵(横纵线沿着折线展示)

【代码】echart在折线显示横纵(横纵线沿着折线展示)

2023-09-21 20:25:21 700

原创 source-map定位生产问题

source-map定位生产问题

2023-06-20 11:50:01 818

原创 Fiddler手机抓包

手机抓包-Fiddler

2023-02-04 10:54:06 850 2

原创 split和正则，保留匹配项

split和正则，保留匹配项

2022-11-03 19:55:25 342

原创 call、apply、bind

call修改this的指向通过arg1，arg2方式进行传参会执行函数call实现继承const Father = function (name, age) { this.name = name this.age = age}const Son = function (name, age) { Father.call(this, name, age)}const son = new Son('name', 'age')console.log('%c [ Son ]-

2022-02-13 16:36:51 178

原创 Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法 Object.defineProperty(obj, prop, descriptor)obj表示要定义的对象props，表示属性的名称descriptor，要修改的属性值value属性的值，可以是任意有效的js值默认为 undefinedwritable当该属性为true时候，属性的value才能被修改默认为 falseenumerable当该属

2022-02-13 15:26:21 802

原创 react ant-sesign使用阿里巴巴iconfont方法

xxx.js为文件iconfont下载的iconfont文件import { createFromIconfontCN } from '@ant-design/icons';interface iconfontProps { type: string; style?: object; className?: string; onClick?: any; [key: string]: any;}const IconFont = createFromIconfontCN({ .

2021-11-30 22:25:49 757

原创 ant design-form表单的自定义校验validator

在form表单的使用中，我们经常是使用rules属性进行简单输入文本验证，常见的使用模式如下：rules={[{ required: true, message: ‘’ }<Form name="basic" ref={ref} labelCol={{ span: 4, }} wrapperCol={{ span: 16, }} > <Form.Item label="password" .

2021-11-21 11:33:14 8013

原创手写虚拟列表

虚拟列表是按需显示的一种技术，可以根据用户的滚动，不必渲染所有列表项，而只是渲染可视区域内的一部分列表元素的技术。在日常的使用中，有很多优秀的虚拟列表使用库，如之前写过的react-virtualized虚拟滚动(https://blog.csdn.net/weixin_43760969/article/details/121012775)等这边文章主要是手写简单的虚拟列表，纯js实现使用requestAnimationFrame进行节流处理window.requestAnimationFrame.

2021-11-21 00:07:44 394

原创 new Blob前端文件下载

import bambooMessage from ‘./bambooMessage’;export function blod(data: any, headers: any) {try {const type = headers.get(‘content-type’);const fileName = headers.get(‘content-disposition’).split(’=’)[1] || ‘’;const blob = new Blob([data], { type });c

2021-11-20 23:45:12 8955 2

原创 node+puppeteer node+selenium-webdriver网页截图

/**在无头浏览器中将一个网页截图保存为图片*/const puppeteer = require(‘puppeteer’);const saveScreenshot = async (url) => { // 启动浏览器 const browser = await puppeteer.launch(); // 打开页面 const page = await browser.newPage(); // 设置浏览器视窗 page.setViewport({ width:

2021-11-20 23:39:10 916

原创 react-virtualized虚拟滚动list

import React from ‘react’;import ReactDOM from ‘react-dom’;import { InfiniteLoader, List } from ‘react-virtualized’;import ‘react-virtualized/styles.css’; // only needs to be imported once// This example assumes you have a way to know/load this informa

2021-11-20 21:01:13 1592 1

原创 React PureComponent、shouldComponentUpdate、meno

React PureComponent、shouldComponentUpdate、meno使用PureComponent、shouldComponentUpdate、meno可以提高react界面的性能在React 开发的过程中，当一个组件的state或props改变时候，React 会将最新返回的元素和之前渲染的元素进行比较，以确定是否有必要更新DOM，当发生改变时候回触发Dom的重新渲染即使 React 只更新改变了的 DOM 节点，重新渲染仍然花费了一些时间。在大部分情况下它并不是问题，不过如

2021-10-17 14:05:02 209

原创 React-refs

refs作用1.获取子组件的元素的dom2.获取子组件的数据获取子组件的元素的dom步骤我们通过调用 React.createRef 或者 useRef 创建了一个ref 并将其赋值给 ref 变量。我们通过指定 ref 为 JSX 属性，将其向下传递给 <Compoment ref={ref}>。React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。我们向下转发该 ref 参数到 <button re

2021-10-17 14:00:15 96

原创 React.context

React.contextcontext作用在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。什么时候使用contextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如系统的cookie、公用方法、用户信息等数据使

2021-10-17 13:59:25 91

原创 mobx应用

mobx第一个需要注意的是如果mobx的版本大于6.0的话，需要在store的构造函数中使用以下代码，不然组件中改变store数据时候，界面不会刷新import { makeObservable } from "mobx"class Store { constructor() { // 添加makeObservable makeObservable(this) }}修改store文件时候报错"The set of provided

2021-10-17 13:57:16 320

原创 resize节流

requestAnimationFramewindow.requestAnimationFrame()方法是在界面重绘之前，通知浏览器的一个指定函数，这个方法接受一个入参，该函数在重绘之前调用，常用于 web 动画的制作，用于准确控制页面的帧刷新渲染，让动画效果更加流畅window.addEventListener() 添加事件监听window.dispatchEvent() 抛出事件Event算是一个顶级接口，CustomEvent基于Event，增加了部分参数，详细查看https://deve

2021-10-17 13:56:17 336

原创 css3-pointer-events

pointer-events:nonepointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!作用1，用于提高界面滚动的效率pointer-events 是一个 CSS 属性，可以有多个不同的值，属性的一部分值仅仅与 SVG 有关联，这里我们只关注 pointer-eve

2021-10-17 13:55:20 484

原创前端水印-canvas、MutationObserver

前端水印canvas添加水印通过canvas生成base64图片，生成一个绝对定位的大小与body一样的div–waterDiv，将waterDiv的背景设置为canvas的base64图片，将waterDiv挂在到body下面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

2021-10-17 13:53:18 324 1

原创 antd form.Item嵌套添加rules

formItem嵌套使用，使用rules的正确用法，需要在外层formItem然后在里层formItem添加required属性，在里层form.item添加rules即可外层form.item没有添加的required时候，没有必填标识<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}> <Form.Item label={'label'} wrapperCol={{ span: 16, offset: 1 }}&g.

2021-08-17 21:44:18 4500 1

原创 antdesign的treeselect的模糊查询、精确查询

模糊查询import React, { useState } from "react";import ReactDOM from "react-dom";import "antd/dist/antd.css";import "./index.css";import { TreeSelect } from "antd";const { TreeNode } = TreeSelect;const Demo = () => { const [value, setValue] = use

2021-05-10 22:08:55 1981

原创 antdesign和react的使用dropDown定位问题

Select基于rc-select，rc-select的下拉框基于rc-trigger，rc-trigger的下拉框定位基于第三方库dom-align，dom-align的overflow参数的adjustX、adjustY可以计算可视区域，在下拉框溢出可视区域的时候添加偏移量将位置放到可视区域中。依赖链路dependency chain： Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign =&g.

2021-05-10 22:04:39 2507 2

原创 google地图去除右上角全屏按键，自定义按键全屏

很多时候，google地图控件的位置不是我们想要的，我百度时候发现，google地图好像没有将全屏按键作为一个单独的控件，也有可能是我没有查询到，下面是一个这样的需求，由于全屏按键被遮挡了，无法点击，现将按键移到右下角先上效果图具体代码如下创建地图代码self.mapLoad().then((AMap: any) => { self.map = new AMap.Map(document.getElementById(options.container || ""), {

2021-01-09 11:07:20 1223

原创 React-路由2

路由重定向路由重定向使用的是react-router-dom的Redirect组件import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'import React from 'react'// 定义一个登录组件function Login() { return ( <div> 登录界面组件 </div>

2020-12-13 01:05:09 81

原创 React-路由

React路由根据不同的路径显示不同的组件内容，使用react-router-dom库安装：npm install react-router-dom下面例子中，通过export暴露App类，返回index.js中使用渲染，下面代码中，需要注意的是，Router的div内容是正常显示的，其中使用的exact为精确匹配import React from 'react'import { BrowserRouter as Router, Link, Route } from 'react-router-

2020-12-13 00:16:09 597

原创 React-插槽

React插槽插槽用于组件中预留位置，就可以添加内容，这些内容可以被识别和控制，React需要自己开发支持插槽功能原理：组件中写入的HTML，可以传入到props先看下面代码，直接写内容在组件内是不起作用的，这时候在组件中输出propsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';class ParentCom extends React.Component { rende

2020-12-12 23:18:08 230

原创 React-完成生命周期

React的生命周期生命周期的三个状态Mounting：将组件插入dom中Updating：将数据更新到dom中Unmounting：将组件移出dom中生命周期中的钩子函数ComponentWillMount：组件将要被渲染，可以使用AJAX获取数据，添加动画前的类ComponentDidMount：组件渲染完毕，可以添加动画ComponentWillReceiveProps：组件将要接受props数据，查看接收props是什么数据ShouldComponentUpdate：组件接收

2020-12-02 20:19:51 79

原创 React-列表渲染

React并没有Vue的v-for这种列表渲染方式使用for进行列表渲染import React from 'react'import ReactDOM from 'react-dom'// 列表渲染class Test extends React.Component { constructor (props) { super(props) this.state = { list: [ {

2020-12-02 14:51:52 465 1

原创 React-事件详解

特点react事件使用驼峰命名法事件需要用{}括起来，例如：onClick={show}最简单的点击事件import React from 'react'import ReactDOM from 'react-dom'class Parent extends React.Component { render () { return ( <div> <button onClick={this.

2020-11-30 16:13:39 266

原创 React-父子组件通信

父组件通过props传递值给子组件父组件传递数据给子组件，为单项数据流props传地址可以为任意类型props可以设置默认值xxx.defaultProps = { name: '张三' }import React from 'react';import ReactDOM from 'react-dom';import './index.css';// 定义父组件class Parent extends React.Component { constructor(

2020-11-30 12:29:49 96

原创 React-类组件事件

Tab组件的功能：通过点击按钮，切换不同的tab在lTab组件中定义了clickEvent方法，但是需要注意的是，需要注意this的指向问题，需要在构造函数中修改this指向，this.clickEvent = this.clickEvent.bind(this)两个按键同时绑定clickEvent事件，需要在button标签添加属性进行辨别，通过data-xxx=‘xxx’来进行辨别，在clickEvent中，通过e.target.dataset.xxx可以获取到data-xxx的值需要注意，一定

2020-11-30 11:14:25 438

解决git _ 无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确.md

空空如也