前端
关注
分享
扫一扫
由本
逆水行舟 不进则退---
展开
-
钉钉应用接入、免登、前端，简单易懂，省去你翻阅文档的时间
钉钉应用接入、免登、前端部分原创 2024-04-12 10:47:14 · 712 阅读 · 0 评论 -
前端开发工作中遇到的bug汇总(备忘录)
vux移动端组件库问题：在ios系统中用vux-xscroll组件写的界面会出现停止滑动自动回到顶部的问题，找了几个手机试了下，发现升级了ios13的有问题、ios13以下的没有问题、安卓的没有问题。修复：找到\node_modules_vux-xscroll@3.1.12@vux-xscroll\build\cmd\simulate-scroll.js找到getScrollTop方法getScrollTop: function() {var transY = window.getCo.原创 2022-02-18 16:27:21 · 3290 阅读 · 0 评论 -
git rebase和git merge的区别（简洁易懂）
初始分支master ---- commit记录 1 - 2 - 3从master分支切出来一个prod分支 ---- commit记录 1 - 2 - 3master分支继续开发，分别又提交了4，5 ---- commit记录 1 - 2 - 3 - 4 - 5prod分支也在继续开发，分别提交了 6，7 ---- commit记录 1 - 2 - 3 - 6 - 7把master分支上的最新代码和并到prod上用 git rebase origin/master ---- commit记录..原创 2021-12-09 14:35:51 · 280 阅读 · 0 评论 -
前端搭建自己的组件库并发布npm(完整流程)
上传第一步：用脚手架搭建一个新项目vue create 项目名称第二步：src同级目录下创建一个packages文件夹并在里面新建两个文件Button.vue<template> <button class="MyButton"> 我是一个按钮组件 </button></template><script>export default { name: 'MyButton', data () {原创 2021-12-08 18:21:23 · 5525 阅读 · 4 评论 -
(前端) 获取文件md5值 spark-md5
import SparkMD5 from 'spark-md5'const base64 = '......'const spark = new SparkMD5()spark.append(base64)const hash = spark.end()原创 2021-11-13 18:27:05 · 1547 阅读 · 0 评论 -
(前端vue) vue-timers 替代定时器和延时器
import {mixin as VueTimers} from 'vue-timers'export default { mixins: [VueTimers], // 混入 timers: { tm1: { time: 300, // 定时时间 repeat: true, // 是否重复执行 immediate: false // 是否立即执行 }, tm2: { time: 1000, // 定时时间 rep原创 2021-11-13 18:10:17 · 1843 阅读 · 0 评论 -
(前端) 获取当前浏览器类型、获取IE浏览器版本
/*** * 获取当前浏览器类型 */export const myBrowser = () => { const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 const isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { //判断是否Opera浏览器 return "Opera" } if (userAgent.indexOf("原创 2021-11-13 17:27:58 · 1299 阅读 · 0 评论 -
(前端) 获取上周上月上半年上一年，获取前几天、后几天、当天
import moment from "moment"/*** * 获取上周上月上半年上一年 * @param flag * 1 上周 * 2 当月 * 3 上一月 * 4 上半年 * 5 近一年 * 6 上一年 */const getDate: any = (flag: string) => { let obj: any = { beginDate: '', endDate: '' } const now = new Date(); //当前日期原创 2021-11-13 16:12:25 · 421 阅读 · 0 评论 -
(前端)页面截取生成图片 html2canvas
1. 封装一个公共的截图函数import html2canvas from 'html2canvas'/** * 截屏函数 * @param id 需要截取的dom元素id * @param name 下载的图片名称 * @param isReturn 是否返回截取的图片,用作回显 */export const screenshot = (id: any, name: any, isReturn?: boolean) => { const dom = document.getE原创 2021-11-13 15:10:59 · 1575 阅读 · 0 评论 -
(前端React)手写签名 react-canvas-draw
import CanvasDraw from 'react-canvas-draw'const signCanvas = useRef<any>();// 清空signCanvas.current.clear()// 获取结果const img = signCanvas.current.canvas.drawing.toDataURL('image/png')<div> <div className="backageImg"></div>原创 2021-11-13 14:39:59 · 947 阅读 · 1 评论 -
(前端)录音功能实现 js-audio-recorder
1. 创建import Recorder from 'js-audio-recorder'const parameter = { sampleBits: 16, // 采样位数，支持 8 或 16，默认是16 sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000 numChannels: 1 // 声道，支持 1 或 2， 默认是1}const recorderEx原创 2021-11-13 14:07:51 · 7614 阅读 · 3 评论 -
Echarts(api汇总+配图)
1.柱状图and折线图const dom = document.getElementById(chartsId)if (!dom) returnconst myChart = echarts.init(dom as HTMLDivElement)const option = { /** 边距 **/ grid: { left: '2%', right: '2%', bottom: '15%', top: '12%', containLa原创 2021-11-13 11:47:24 · 1129 阅读 · 0 评论 -
（前端）file、blob、base64相互转换
blob转fileconst blob = '.....'const file = new File([blob], 'name.wav', {type: 'audio/wav'});blob转base64const blob = '.....'const a = new FileReader();a.readAsDataURL(blob);a.onload = (e) => { const base64 = e.target.result}blob转blobUrlcons原创 2021-11-10 17:04:17 · 2568 阅读 · 0 评论 -
（前端）前后端“文件流”，上传、接收、下载
文件上传（两种）方法1 -- 表单方式上传通过input拾取到文件获取fileconst formData = new FormData() formData.append('file', file)request(`/mark/...`, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, data: formData})方法2 -- base64字符串上传let原创 2021-11-10 14:32:45 · 3347 阅读 · 0 评论 -
前端模块化详解(包含各种导入导出及输出结果)
CommonJS浏览器不认识,需Browserify翻译1. 导出module.exports = ???exports.??? = ???2. 导入const ?? = require('??')/* 打印??结果 --> {???: ???} */AMD用的不多了，这里就不细讲了，感兴趣的自行百度CMD用的不多了，这里就不细讲了，感兴趣的自行百度ES6浏览器不认识，需babel翻译成commonJS，再用Browserify翻译成浏览器认识的**1. 导出**原创 2021-06-16 10:50:41 · 255 阅读 · 0 评论 -
Nonde+MongoDB基础创建及增删改查
第一部分：原生node搭建服务器第二部分：express框架搭建服务器第三部分：数据库部分第四部分：阿里云部署原创 2021-06-09 11:49:25 · 174 阅读 · 0 评论 -
vue项目CDN引入
注：一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。第一步：public/index.html 里⬇️注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用<!DOCTYPE html><html> <head> <link rel="stylesheet" href="https://unpkg.com/ele原创 2021-05-26 15:15:21 · 6320 阅读 · 1 评论 -
打包&配置&优化--备忘录
一、打包环境区分1、正常/ * npm start */ process.env.NODE_ENV === 'production',/ * npm run build */ process.env.NODE_ENV === 'development'2、额外环境区分打包配置package.json中配置命令⬇️ "build-pro": "REACT_APP_ENV=pro 打包执行代码" "build-dev": "REACT_APP_ENV=dev 打包执行代码"等号前面原创 2021-05-13 17:10:03 · 282 阅读 · 0 评论 -
React+TypeScript+Hooks+Umi+Dev+Ant Design(笔记篇)
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。// interface.ts文件，一般用于存放ts类型export interface ItemType { name: string age: number ｜ number // ｜ 标示或 fn1: () => void // 无参数，无返回值 fn2: (parame: number) => number // 数字格式参数且返回值原创 2021-04-25 14:48:11 · 745 阅读 · 0 评论 -
大文件断点续传/切片上传(react、vue通用)
----整体流程解析 - 1断点续传首先要满足的功能是第一次上传30%关闭上传后，再次上传此文件继续从30%开始继续上传。要想满足此功能，首先要做的是把一个文件切割成多份上传，而每次上传时，后台需要告诉你此文件已经上传了多少份。例：A文件(100M)，切割成100份，每一份有一个id，如1-100，第一次上传了id1-30的切片文件总计三十份，打断上传后，第二次上传时后台先告诉你已上传id1-30，前端知道后，直接从id31开始上传，做到了续传的实现。----整体流程解析 - 2功能实现至少需要后原创 2021-04-20 16:09:08 · 2653 阅读 · 1 评论 -
前端解析zip压缩包 --- vue、react等等通用
第一步：下载安装jszip插件yarn add jszip第二步： 导入插件import JSZip from 'jszip'第三步： new一个JSZip对象const zip = new JSZip()第四步： 获取内部每个文件的filezip.loadAsync(file).then((res) => { consol.log(res.files) // 每个file}) 拓展： 判断压缩包内部文件是否都是img或jpg或png或jpeg图片zip.loadAsyn原创 2021-04-20 10:47:41 · 2961 阅读 · 1 评论 -
rem项目踩到的坑
接到一个项目需要你去迭代修改，如果是rem布局，切记先点开浏览器dom树的html标签，看一下上面的font-size是多少，如果浏览器手机模拟器是375的宽dom树上html的font-size应该是25px，那相对ui给的750的图则正好是1rem = 50px，但如果浏览器手机模拟器375宽的dom树你点开html的font-size是20px的话，那他的项目中设置的1rem对应的就是40px—记得手动设置一下vscode里的rem自动转换—大部分项目都是配置1rem = 50px，但也原创 2020-12-09 11:23:21 · 308 阅读 · 1 评论 -
前端生成并导出表格+样式修改（只需一个插件，无需修改源码)
前端生成并导出表格+样式修改（只需一个插件，无需修改源码）众所周知，一般表格生成都是后端的事情，但如果数据不是很多的表格其实前端生成并导出更简便，而前端生成并导出表格也只需要一个xlsx插件即可，并且导出的表格列宽等都可以通过几行代码调整，很简洁，调整样式并不需要像网上查到的那样下载xlsx-style插件，也不需要改什么源码，废话不多说，直接贴代码// 一.导出的表格名let dateVal = '标注工作量.xlsx'// 二.获取DOM上的表格并生成表格对象let workbook = XL原创 2020-12-08 20:17:48 · 1619 阅读 · 5 评论 -
vue-cli3.0搭建项目后--使用全局颜色(样式)变量(style-resources-loader)
第一步：安装style-resources-loader????vue add style-resources-loader第二步：在vue.config.js中加入这块代码????// 如果没有下载path插件需要先安装一下const path = require('path')module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', // 如果你使用的是s原创 2020-10-28 10:34:10 · 1201 阅读 · 0 评论 -
手动生成随机密码（长度自定义）and 插件生成uuid
function createCode(num) { const codeArr = [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', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', '原创 2020-09-10 15:01:45 · 307 阅读 · 0 评论 -
解决ios的scroll滑动不流畅问题（一行代码搞定）
当使用overflow-y: scroll;后，IOS滑动不流畅，css加一条属性即可 “ -webkit-overflow-scrolling: touch; ” 例????.box{ overflow-y: scroll; touch-action: pan-y; -webkit-overflow-scrolling: touch;}其中 “-webkit-overflow-scrolling” 除了touch外还有touch属性 详解????auto：使用普通滚动,原创 2020-09-10 10:26:24 · 2526 阅读 · 0 评论