前端整理
淡淡蓝蓝
这个作者很懒,什么都没留下…
展开
-
react hooks useCallback useMemo的区别
最近在看react hooks,useState和useEffect较好理解,到useCallback和useMemo的时候,看官网不太懂,后来通过查阅资料,算是搞明白了,下面实例都是基于react-native,不过原理和react是一样的1、useCallback useCallback返回一个函数,此函数具有memoized功效 (1)使用场景:有一个父组件,含子组件,子组件接收一个函数作为props,通常,如果父组件更新了,子组件也会更新,但如果父组件更新的state,...原创 2020-12-07 15:22:03 · 1079 阅读 · 0 评论 -
react-signature-canvas实现电子签名
1、执行npm install react-signature-canvas --save2、采用react+typescript,代码如下:import React, { Component } from 'react';import './scss/index.scss';import SignatureCanvas from 'react-signature-canvas'...原创 2019-06-10 16:35:00 · 4603 阅读 · 0 评论 -
react-keeper的使用
项目采用的是react+typescript框架。有一个业务需求:用户在信息填写页面,填写了很多信息,点击提交按钮,到下一个页面后,再返回,这些信息都变成空了,用户需要再填写一遍。这样繁琐,会不会流失掉很多用户?所以理想状态下,就是页面返回后,这些信息还在。所以就用到了react-keeper1、react-keeper是什么?React-Keeper是React生态里一款...原创 2019-05-31 16:47:11 · 5099 阅读 · 0 评论 -
react-typescript-koa-ssr服务端渲染
因为项目用到的技术链是react+typescript,调研ssr服务端渲染,就在此基础上。项目代码地址:https://github.com/chenyumiao/react-ts-ssr执行步骤,请参考项目中的README.md文件。...原创 2018-11-06 10:54:45 · 923 阅读 · 0 评论 -
react与typescript结合支持多页面应用
项目技术链是react+react-redux+react-router-dom+typescript+sass,支持多页应用,框架的源码地址如下:https://github.com/chenyumiao/react-ts-template。具体实现请参考README.md文件。...原创 2018-10-19 15:59:03 · 805 阅读 · 0 评论 -
nvm管理多版本的node.js
如果一台电脑上,需要多个node.js版本来支持不同的业务该怎么做?答案是用nvm做node.js的多版本管理。第一步:下载nvm-setup.exe,可以去本人的资源下去下载,已经上传了,下载完后,直接双击安装即可第二步:安装完成后,可以看到环境变量的配置增加了如下内容,PATH中多了%NVM_HOME%;%NVM_SYMLINK%;配置“D:\nvm”是安装nvm时,选择的安装...原创 2018-10-19 14:45:54 · 195 阅读 · 0 评论 -
移动端利用pdf.js实现在线预览pdf文档
项目中要求在移动端实现在线预览pdf文件,通过一番折腾,最后选择用pdf.js实现。1、下载pdf.js 官网地址:https://mozilla.github.io/pdf.js/2、各种配置 下载下来的文件包,就是一个demo,我们仿照这个demo做就可以啦 (1)页面元素如下: <button class="product-term to-clause" id=...原创 2018-06-26 15:36:05 · 23067 阅读 · 5 评论 -
axios根据流生成图片
项目中要求生成动态的二维码图片,前端框架用的是vue axios接受后端传过来的stream数据,将其转换为图片,代码如下:axios.get( ".../user/v1/qrcode?param=..." , { responseType: "arraybuffer", }).then(res => { return 'data:image/png;base64,' +...原创 2018-05-28 15:16:35 · 8204 阅读 · 2 评论 -
微信端js实现复制指定内容到粘贴板
项目中需要实现复制指定文本到粘贴板,看网上说clipboard.js在移动端存在一定的兼容性,想着微信端的浏览器是qq浏览器,先试试在此浏览器上是否兼容,尝试了一下,在微信端兼容可以满足,下面讲解一下如何使用clipboard.js1、因为项目是vue-cli架构,所以采用npm install的方式安装,(1)在项目package.json里devDependencies里面添加依赖"clipb...原创 2018-05-18 14:55:23 · 11273 阅读 · 0 评论 -
vue中引入HTMLcanvas生成长图
项目中需要实现将某块html生成img图片,供用户保存到本地,最终采用html2canvas实现。1、如何引入html2canvas? 项目架构是vue-cli的单页应用,如果在index.html入口主文件里面引入<script src='html2canvas.js'></script>; 这样每个组件都会加载此js,造成资源浪费。所以通过import方式,...原创 2018-05-17 11:36:16 · 16810 阅读 · 2 评论 -
vue-cli多页面应用(axios /scss)
大家都知道,vue-cli是搭建单页应用的,但是当页面过多的时候,单页应用不太适合,想到了用多页应用,自己结合网上的资料,写了个小例子,地址如下:https://github.com/chenyumiao/vue-multi-page大体实现思路如下:1、修改webpack配置文件,webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf...原创 2018-04-23 15:39:51 · 1193 阅读 · 0 评论 -
input range实现可滑动的滚动条
项目要求在移动端实现可滑动的进度条,用纯div+css实现,感觉流畅性不够好,最后决定用type=range进行改造1、页面布局 <p class="progress"> <input type="range" id="accidentRange" min="0" max="200" step="5" value="0&qu原创 2018-04-04 17:39:52 · 4325 阅读 · 2 评论 -
type=file多图片上传 预览和删除
一、背景 项目中要实现一个这样的功能,在移动端上传照片或拍照直接上传,照片能够回显到页面上;点击照片右上角的删除,可以删除此照片。二、实现 点击页面上图片,自动打开系统拍照和相册。实现方法如下: var fileArr = []; //存放图片内容的数组,提交数据到后台时用 $('#uploadFile').unbind().on('click',func...原创 2018-03-08 15:02:39 · 9609 阅读 · 3 评论