- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue 结合html2canvas + jspdf 实现将页面内容生成 PDF
html2canvas + jspdf 实现将页面内容生成 PDF
2022-06-28 10:38:57
241
原创 js防抖函数
function debounce(func, delay) { let timer; // 通过闭包使timer一直存在内存中 return function (...args) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { func.apply(this, args); //通过apply还原this指向事件 }, delay) }
2022-01-06 10:58:45
395
原创 react 获取循环列表的ref
import React, { useEffect, useState,useRef } from 'react';import styles from './index.less';const Address: React.FC<{}> = (props) => { const liRefList = useRef([]); const getRef=(dom)=>{ liRefList.current.push(dom) } useEffect(()=>
2021-06-02 13:40:49
2060
原创 upload 上传文件
一、封装import React, { useState, useEffect, useRef } from 'react';import styles from './index.less';import { useDispatch, useSelector } from 'dva';import { Form, Input, Button, Upload, message, Spin, Modal } from 'antd';interface propType { onsuccess:
2021-05-28 15:27:32
434
原创 js 生成16位随机唯一id
export const RandomId = (n: number) => { var str = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K', 'L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; var res = ''; for (var i = 0; i < n; i++)
2021-05-28 14:29:41
1618
原创 在谷歌浏览器中调试React+Redux构建的项目，快速找到源文件
前端调试项目时，项目是基于webpack打包的，所以在谷歌浏览器中，只能找到打包后的文件，而不是打包之前的项目源文件，这样不便于前端的调试。怎么在Source下打开想要调试的文件呢，有如下解决办法。一 、非webpack构建的项目下，快速查看相关的代码 F12打开调试面板、打开source栏、点击open file（或者ctrl+p）、输入需要调试的文件名，然后就可以开始进行调试了。 { if (!isNaN(text) && text!=null && text!="") { return ( <span style={{ color: text > 0 ? '#E73A3A' : text < 0 ? '#2A9B43':'#000',fontSize:fontSize
2021-05-27 11:22:06
311
原创 获取cookie 设置cookie
export const setCookie = (name, value) => { const Days = 30; // 此 cookie 将被保存 30 天 const exp = new Date(); // new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); document.cookie = `${name}=${escape(value)};exp
2021-05-25 19:14:05
59
原创 导出文件功能支持ie
import axios from 'axios';export const exportFile = async (url: any, data: any, fileNames: string, req?: string) => { const token = localStorage.getItem('token'); const file = await axios({ method: req || 'post', url, responseType: 'a
2021-05-25 14:42:39
109
1
原创 css实现超出多行...
width: 215px; font-size: 14px; height: 36px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: justify; co...
2021-05-25 14:31:50
102
原创 js 数组取交集
一、数组结构不相同let arr1 = [ {fpcid: "2da37fdfe66140089dc3367b21cc6194", name: "34"}, {fpcid: "2da37fdfe66140089dc3367b21cc6195", name: "33"}, {fpcid: "2da37fdfe66140089dc3367b21cc6196", name: "35"}];let arr2 = [ {fpcid: "2da37fdfe66140089dc3367b21cc6194",
2021-05-25 14:28:17
116
原创 【Umi】通过配置 dynamicImport loadingComponent 实现加载效果
在前端单页面应用中，子页面的代码都是当用户访问到的时候，才会异步去加载子页面的代码。如果子页面代码较大，那么会给用户一段时间的卡顿感，很影响使用体验。所以，我们想在加载子页面代码时，显示 loading 组件，从而优化体验。在 Umi 中，可以通过简单的配置，即可实现。1、编写loading组件:npm install --save nprogressimport React, { useEffect } from 'react';import NProgress from 'nprogres
2021-05-25 14:19:18
1029
1
原创 js 回到顶部丝滑效果
//监听页面滚动 window.addEventListener('scroll', changeScrollTop); //控制隐藏显示 if(document.documentElement.scrollTop > 400){ setshowTop(true) }else { setshowTop(false) } //回到顶部-动画 const obj = document.getElementsByTagName('html')[.
2021-04-15 17:30:39
285
原创 ant design 文件下载
文件下载 //导出报表const exportExel = () => { axios({ method: 'post', url: '/insMngGjzy/comb/attribution/export', responseType: 'arraybuffer', data: { combId: Number(id), type: tempOthers?.type || 4, startD.
2021-04-15 15:50:17
1191
原创 ant design List长列表下拉刷新 上拉加载更多
1、html import styles from './index.less'; import { ListView,List,PullToRefresh } from 'antd-mobile'; const Item = List.Item; const Brief = Item.Brief; const { theadData, data, total, currentPage, onSuccess, onSuccessEnter, isMore, showNum,refreshing
2021-04-15 14:55:45
2059
原创 React中使用react-router-dom路由
安装首先进入项目目录，使用npm安装react-router-dom：npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令新建router.jsimport React from 'react';import {HashRouter, Route, Switch} from 'react-router-dom';import Home from '../home';import Detail from '../detail';
2020-11-20 18:51:08
249
原创 css 实现 table斜线表头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ut
2020-10-21 20:10:08
823
原创 前端H5实现多图片上传并预览
利用input 的type='file" 可以实现文件的上传，不过只支持单个文件上传。只有给input加上multiple属性才能实现多个文件同时上传。<div class="input-file-box"> <span>点击上传图片</span> <input type="file" name="" id="uploadfile" multiple></div><div id="img-box"></div>j
2020-10-15 14:59:58
776
原创 h5页面手机表情转码
function utf16toEntities(str) { var patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 str = str.replace(patt, function (char) { var H, L, code; if (char.length === 2) {
2020-10-13 11:03:06
215
原创 ionic4 入门 (四) 路由守卫
判断用户是否登录 , 在进入购物车和个人中心 界面的时候, 如果用户没有登录, 需要让用户先进入登录界面创建守卫ionic g guard guard/loginGuard CanActivate : 路由进入前守卫canActivateChild ：路由进入子组件守卫CanDeactivate ：路由离开守卫CanLoad :是否加载模块CanActivate state.url 获取要跳转的路由 存到sessionStorage里 当登录成功之后直接跳到这个路由提升用户体验度imp
2020-09-22 20:33:56
232
原创 ionic4监听返回事件 AppMinimize navController
引入appminimize 插件 ionic cordova plugin add cordova-plugin-appminimize npm install --save @ionic-native/app-minimize@beta 在 app.module.ts 中注入 appminimize 并且在providers 中注入 import {AppMinimize} from '@ionic-native/app-minimize/ngx'; { var Errors = new Array("验证通过!", "身份证号码位数不对!", "出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!"); var area = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 3
2020-09-22 14:46:12
862
原创 微信公众号怎么清缓存
1、随便打开一个聊天窗口，输入debugx5.qq.com 并发送2、点击自己发送的地址，打开debug 调试页面。3、拉到调试页面的最底端，勾选上所有的缓存项目，点击清除。4、点击确定之后即可完成清除微信浏览器缓存的操作。...
2020-08-03 10:09:01
2928
3
原创 mvvm双向绑定实现全选和反选
//全选按钮默认未选中 $scope.ischecked = false; //全选按钮事件 $scope.updateAllChecked = function () { if ($scope.ischecked) { $scope.ischecked = false; _.forEach($scope.batchData, function (n) { n.checked = false; .
2020-07-31 14:17:40
200
原创 textarea输入框随高度随内容撑开
方法一（jquery）：$('textarea').each(function () { this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');}).on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';});方法二：
2020-07-31 14:08:29
533
原创 ionic模态框
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {//注入$ionicPopup, $scope.showPopup = function() { $scope.data = {} // 自定义弹窗 var myPopup = $ionicPopup.show({ template: '<input type="password" ng-model..
2020-07-31 10:25:36
353
原创 ionic 上拉菜单
$scope.phone = function (phonenumber) { var hideSheet = $ionicActionSheet.show({ buttons: [ { text: '<b>通话</b>' }, { text: '<b>短信</b>' } ], cancelText: '取消', cancel: function (
2020-07-31 10:13:18
120
原创 canvas在线签名插件Tablet
//将base64转换为blob function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (
2020-07-30 19:03:03
426
原创 Tablet-1.0 - 副本
/*!@Author: 李燕南[email protected]@Date: 2017-12-05 14:10:40@Last Modified by: 李燕南@Last Modified time: 2017-12-11 10:58:23*//* colpick.js start /;(function(KaTeX parse error: Expected '}', got '#' at position 539: …_field_letter">#̲</div&
2020-07-30 18:59:14
325
原创 mobiscroll初始化数据添加年月日
$("#receiveSjzsj-time").mobiscroll().time({theme: ‘ios’,lang: ‘zh’,mode: ‘scroller’,onInit: function (inst) { inst.settings.wheels[0] = _.map(inst.settings.wheels[0], function (wheelItem, key) { var labelText = wheelItem.lab
2020-07-28 14:58:33
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人