- 博客(10)
- 收藏
- 关注
RSS订阅原创 CSS高频使用小技巧
1、使用filter: grayscale(1)使网页呈现哀悼模式body{ filter: grayScale(1)}2、多行文本溢出显示省略号html<p class='more-line-ellipsis'></p>css.more-line-ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webki
2021-10-08 17:24:09
163
原创 js获取地址栏url参数
我们可以利用正则匹配的方式， 在方法中传两个方法，你想要的地址栏参数和你所在页面的url 地址const urlParam = (name: string, url?: string): string => { const reg = new RegExp('.*[&?]' + name + '=([^&]*)(&|$)'); let r; if (!url) { r = window.location.search.match(reg); } els
2021-09-22 14:31:00
219
原创 React 复制url 到剪切板插件 copy-to-clipboard
React 复制url 到剪切板插件 copy-to-clipboard安装插件npm install --save copy-to-clipboard;引入import copy from 'copy-to-clipboard';使用const copyUrl = () => { copy(url) message.success('复制成功')}
2021-09-22 11:27:41
343
原创 用html2Canvas 实现浏览器上的屏幕截图
1. 介绍html2canvas 允许您直接在用户浏览器拍摄网页或者部分屏幕截图， 在运作时会遍历它加载的dom, 收集所有元素的信息，用这些信息构建页面展示，实际上并没有截取页面的屏幕截图， 而是根据dom 的属性来构建的展示2. 使用下载依赖 npm install html2canvas文件中引入 import html2canvas from ‘html2canvas’;点击下载 const handleOk = async () => { // if (!window
2021-09-18 17:59:19
383
原创 在React 中如何获取图片的大小
在React 中如何获取图片的大小产品需求： 我们项目中会做H5模板， 参考”易企秀“网页版可以看到功能大致需求，在查看H5模板详情中，需要根据模板封面图片的高度判断是否展示向下滑动的文字，如果图片小于等于外层容器高度，或者当图片大于外层容器高度且滚动图片向上滚动的距离超出一屏幕不显示，但是根据详情接口只能知道图片地址， 所以需要我们根据图片地址去获取图片的宽高；首先先定义一个state 变量const [flag, setFlag] = useState(false);请求完数据执行checkI
2021-09-18 14:44:22
2517
原创 解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug需求：封装Input 组件，输入拼音过程中不触发onChange，拼音输入结束后触发onChange原理：input 标签上面有两个事件， 就像他的生命周期， compositionstart事件只有在输入中文时才会触发，触发事件在inpit 事件之前，compositionend表示结束中文输入时触发的事件， 不管输入最后是不是中文都会触发组件import React from 'react';import { Input } from
2021-04-14 18:34:35
3081
原创 十分钟了解Hooks
一、为什么要使用Hooks我们都知道React 为我们提供了两种创建组件的方式， 函数组件和类组件，函数组件是一个普通的JS函数， 可以接收一个props对象并返回一个React。而类组件不仅有props 还有自己的状态、生命周期，从而在使用时有些复杂组件变的很难理解； Hooks 就是让纯函数中也可以有自己的状态，解决一些类组件不好用的地方比如：class组件中我们必须去绑定事件处理器、相互关联的代码逻辑被进行了拆分(componentDidMount里面你定义了一个定时器，你需要在componnet
2020-08-06 19:50:30
1211
原创 十分钟学会 React Hooks
一、为什么要使用Hooks我们都知道React 为我们提供了两种创建组件的方式， 函数组件和类组件，函数组件是一个普通的JS函数， 可以接收一个props对象并返回一个React。而类组件不仅有props 还有自己的状态、生命周期，从而在使用时有些复杂组件变的很难理解； Hooks 就是让纯函数中也可以有自己的状态，解决一些类组件不好用的地方比如：class组件中我们必须去绑定事件处理器、相互关联的代码逻辑被进行了拆分(componentDidMount里面你定义了一个定时器，你需要在compo..
2020-07-02 14:08:14
375
原创 Axios
Axios二次封装二次封装的目的1.便于维护2.统一实现封装实现，形成特有的api，可统一项目代码规范，不然每次使用都得引入axios,当后台改接口地址的时候还得满页面找3.程序复用二次封装的效果1.封装成插件使用2.统一api请求3.可以暴露接口由使用方配置请求头拦截器封装实现import axios from 'axios' //引入axios...
2019-08-20 20:06:36
649
原创 react实现国际化
react实现国际化静态国际化首先解决静态国际化，即根据浏览器的语言，自动加载对应的语言模板。这里只需判断navigator.language类型即可，然后通过react-intl提供了IntlProvider组件，加载组件属性的locale和messages，最后在需要用到国际化的组件里，引入FormattedMessage组件（react-intl内置），通过id映射到对应的国际化文件里...
2019-08-17 12:03:40
1197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人