![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
吃柠檬的猫
纯纯的踩坑之旅,分享自己的各种经验
展开
-
原生js颜色选择器取色器组件
如果不是为了组件支持的范围考虑,我肯定不会用原生js写,头疼,也不能使用ts。组件参考腾讯云文档的颜色选择器样子写,当然不是完全一样,取色的工具那个是在canvas上完成的,比较特殊,未加入该功能原创 2023-04-11 17:29:32 · 938 阅读 · 0 评论 -
获取音频流/Audio的音量-兼容safari
获取音量并展示,达到可视化效果,兼容safari原创 2022-06-20 15:22:01 · 666 阅读 · 0 评论 -
正确使用进入全屏/退出全屏-全屏监听功能
使用浏览器全屏/退出全屏/监听全屏功能,需要注意一下原创 2022-03-16 15:30:28 · 1843 阅读 · 0 评论 -
react中url变化监听以及清理/修改url的参数
这里记录一下写react项目遇到的url问题:我在页面有一行代码处理:window.history.replaceState({ path: ‘/#/home’ }, ‘’, ‘/#/home’);因为hash模式中,这是不会刷新页面的,清理url参数,然后处理参数触发事件在地址栏中复制粘贴两次一模一样的地址,后面一次不会触发react项目监听,就无法正常运转,window.addEventListener(‘hashchange’, this.checkUrlFn.bind(this));通过原创 2022-02-07 09:48:52 · 3417 阅读 · 0 评论 -
react-custom-scrollbars滚动组件
react-custom-scrollbars,是一款滚动区域组件,为了美化兼容各大浏览器,很遗憾,这个组件有个隐藏的兼容问题,并且我现在无法处理,出现异常:没有满足滚动条件,出现底部,侧边滚动条,导致无法滚动的假滚动条,这是属于底层js/ts代码控制的,没办法在客户端处理,异常场景:edg浏览器(部分电脑上必定出现,),很奇怪,我的电脑上edg同版本就没有,建议还是别用了,我正打算自己写一个组件出来...原创 2021-12-14 17:48:01 · 2267 阅读 · 0 评论 -
自定义水印
简单实现自定义水印原创 2021-12-10 09:25:33 · 201 阅读 · 0 评论 -
滚动事件类型判断(1.代码滚动 2.点击滚动区/滚动条 3.滑轮滚动)
场景逻辑原创 2021-12-08 15:31:56 · 975 阅读 · 0 评论 -
配置阿里云矢量图标2021
由于阿里云矢量图标库升级,默认不生成配置,下载后直接引入将无法正常使用,第一方案,直接修改配置,前提是你有权限第二方案:1.先下载到本地2.https://transfonter.org/打开这个地址去生成配置文件3.如图所示勾选上,蓝色按钮打开选择文件iconfont.ttf,4.最后点击生成(Convert),下载即可,5.下载下来的文件只需要.eot .svg .ttf三个文件复制到你前面在阿里下载的文件夹中使用就跟以前一样,不需要改动...原创 2021-08-30 18:09:15 · 519 阅读 · 0 评论 -
真机h5开启调试模式/开发者调试vconsole
开发手机端网页,存在真机与模拟器的差异,例如ios中微信浏览器,比较特殊,上次开发遇到只有在ios微信内置浏览器打开是白屏,这模拟器打开是正常的,这时候如果没有调试工具,根本不清楚报错信息,vconsole这项工具,提供页面一个vconsole的绿色按钮,可以打开控制面板,进行查看在index.html中最优先的位置引入,防止其他js先引入报错<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script原创 2021-07-05 13:50:06 · 3283 阅读 · 0 评论 -
登录注册同一页面使用浏览器回退功能
现在的登录页一般会有多个状态,页面会有按钮提供给用户切换,但是产品要求使用浏览器回退时也要让界面回退,对于浏览器来说,页面没有历史,所以不会改变,所以我们要手动添加来达到效果let historyArr = []; // 本地记录historyconst ERROR_MESSAGE_TEXT = "网络不给力,请稍候重试!";class LoginDj extends React.Component {//验证码登录/扫描登录/注册切换时 shiftLoginType(type) { this原创 2021-06-07 16:53:41 · 239 阅读 · 0 评论 -
文字溢出解决宽度不定的场景
文字溢出显示规则,一般溢出通过css就完成了,但是宽度如果不确定那么将无法使用,普通的就使用js过滤,显示几个字符,但是中文与符号,英文占位不同,这样处理出来的效果显然不理想原创 2021-05-25 17:17:55 · 207 阅读 · 0 评论 -
mock前端测试开发
使用mock搭建服务,本地测试开发,脱离后端开发,根据后端的接口文档(接口虽然没写完,但提供了接口文档),配置接口参数,后续直接改为接口联调就行了,这样可以避免前面等接口,后面忙着调1.安装配置文件npm i mocker-api mockjs --dev2.搭建服务server.jsvar path = require('path')var fs = require('fs')var mock = require('mockjs')var app = require('express')原创 2021-04-20 11:04:51 · 267 阅读 · 0 评论 -
braft_editor富文本
富文本编辑器也用过不少了,这次提供一个功能算是齐全,好用的braft_editor我使用的react接入,大同小异,这里采用多媒体文件上传到七牛云,回调链接至标签的src上效果图我就懒得搞了,截取的别人的,代码是我自己写的import React from "react";import BraftEditor from "braft-editor";// 引入编辑器样式import "braft-editor/dist/index.css";import api from "../../ap原创 2021-04-19 15:38:12 · 1905 阅读 · 0 评论 -
算法逻辑题整理-中级(1)
中级算法中,多循环解题思路多数优化会应用到指针算法,经典就是双指针(vue的diff也采用了双指针对比),注意中级算法题不提倡双for无优化处理-经不住测试用例方案给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母原创 2021-04-12 10:08:40 · 320 阅读 · 0 评论 -
算法逻辑题整理-初级(1)
算法题不分语言,只是实现方式不同,逻辑思维大同小异,因为我是前端主js,所以解法都是js语言根据解析使用双指针的方式来对比[1,8,6,2,5,4,8,3,7]左右各取出元素计算面积,然后再对比两个元素哪个小,左边1小那么左指针向中间移动一位,右指针不动,依次循环计算并移动指针原创 2021-03-20 17:43:16 · 368 阅读 · 1 评论 -
前端常备知识点(二)
1.js事件的绑定原生js绑定事件三种情况,原生使用中推荐第三种类型一 是直接在dom上绑定,如果加上(),第一次将会直接执行,不友好<div οnclick="fun()"></div>二 是通过通过js获取元素,赋值事件var oBox = document.getElementById("container");oBox.onclick = function() {}三 通过addEventListener绑定事件,参数一是事件类型,参数2是函数,参数3捕获/原创 2021-03-06 21:06:06 · 388 阅读 · 0 评论 -
前端常见布局问题
如何使用flex布局,解决间距,最后一行左对齐,怎样设置0.5px边框,有其他布局/样式问题欢迎提供一起解决/或者分享你的解决方案/分享你的问题-谢谢原创 2021-02-26 11:29:21 · 184 阅读 · 0 评论 -
html富文本图片点击放大
功能很简单,这里就把主要代码放一起,复制过去测试一下就行了界面代码<p @click="imageChange($event)" v-html="item.msg"></p><!-- 富文本图片放大 --> <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false" > <i原创 2020-06-02 17:16:51 · 2456 阅读 · 0 评论 -
vue-froala-wysiwyg富文本编辑器
这个富文本编辑器,感觉收费麻烦我后续又更新了一个[braft_editor富文本编辑器]npm i vue-froala-wysiwyg -S;如果出现 Cannot find module '@babel/runtime/core-js/object/keys'执行下面这个npm install --save-dev @babel/runtime-corejs2main.jsimport 'froala-editor/css/froala_editor.pkg...原创 2020-03-24 15:32:07 · 3693 阅读 · 2 评论 -
带备注的日历组件(3.0)
上一版的日历组件是改的element-ui的,使用不方便,今天我也是闲了一会儿,就自己写了原生的,不依赖其他框架width:组件宽度makeArr:备注列表(传入一个数组:[{time:'2020-02-28',remark:'28号测试备注'}])dayChange:当前激活日期change事件monthChange:月份变化change事件原创 2019-11-14 12:01:15 · 2928 阅读 · 0 评论 -
vue video.js的使用
vue video.js的使用flash将被淘汰,html播放器将成为主流原创 2019-10-29 10:33:23 · 939 阅读 · 0 评论 -
flutter 生命周期函数5分钟看懂
flutter 生命周期函数5分钟看懂flutter生命周期分3个阶段6个钩子函数1. 初始化2. 状态变化3. 组件移除1. 初始化构造函数 > initState > didChangeDependencies > build 页面构建完成initState:插入渲染树时调用,只调用一次,widget创建执行的第一个方法,可以再里面初始化一些数据,以及绑定控制器 如下...原创 2019-09-16 14:42:40 · 857 阅读 · 0 评论 -
属性location.href浏览器不兼容
属性window.location.href ie浏览器不兼容不兼容的问题主要是路径中字符需要处理function getContextPath() { var pathName = document.location.pathname; var index = pathName.substr(1).indexOf("/"); var result = pathNam...原创 2019-09-10 16:17:48 · 617 阅读 · 0 评论 -
小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形获取canvas的宽度保证适应屏幕 let that=this uni.getSystemInfo({ success: function(res) { // res - 各种参数 let info = uni.createSelectorQuery().select(".m...原创 2019-09-10 14:07:41 · 11801 阅读 · 0 评论 -
vscode flutter命令无法识别 你需要配置path (环境变量)
vscode flutter命令无法识别 你需要配置path (环境变量)1.直接搜索‘环境变量’,2.按图所示打开3.配置如图flutter的路径是你git下载的路径,直接去复制过来主要git的路径要看你git的路径有的人是‘C:\Program Files’下面,有的是‘C:\Program Files (x86)’下面配置完成后以管理员打开cmd ‘’执行 flutt...原创 2019-09-06 18:43:58 · 3542 阅读 · 0 评论 -
uni requset 请求全面配置(token,全局拦截)详解
uni requset 请求配置详解这套配置可适用于token验证也可以适用其他主要需求3给个s文件:index.js 接口管理interface.js 请求拦截管理config.js 请求配置index.jsimport https from '../../interface'/** * 将所有接口统一起来便于维护 * 如果项目很大可以将 url 独...原创 2019-08-29 11:59:01 · 5207 阅读 · 14 评论 -
uin 小程序 canvas绘制海报保存图片到手机 并适应屏幕
uin 小程序 绘制海报保存图片到手机 并适用屏幕效果图保存前后html代码<canvas canvas-id="myCanvas" class="myCanvas" v-if='list.show==1' @click="list.show2=true"></canvas> <!-- 邀请函分享 list.show==1--><view c...原创 2019-09-03 16:55:58 · 474 阅读 · 0 评论 -
几分钟几小时几天前,表单验证,数据处理(react+antd回调写法)
表单验证,时间戳转换,富文本提取文字,几分钟,邮箱各种公用函数前段时间用uni写小程序,自定义各种常用公用函数方法方便自己后面写项目export default{ /** * 时间戳转换时间 * @param {val} val - 时间戳. * @param {type} type- 1 (2019-1-12 15:21:22),2 (2019-...原创 2019-08-28 15:23:51 · 220 阅读 · 0 评论 -
websocket 全双工通信5分钟看懂
websocket 全双工通信如此简单在接触websocket前,觉得这个东西很难,后面自己看了一下html5中的菜鸟教程,更懵了配置什么环境下python,后面看了一位老哥的博客,恍然大悟,在前端应用中不需配置python,主要是后端需要配置相关环境,前端直接实例化WebSocket对象,上代码<template> <view> <button @cl...原创 2019-08-28 14:24:29 · 733 阅读 · 0 评论 -
nodejs搭建服务器3分钟搞定
nodejs搭建服务器3分钟搞定废话不多先配置环境打开cmdnpm i express -gnpm i express-generator -g//安装完成后,找个问价夹创建项目,‘webServer’项目名称自己定express webServer//创建项目完成后在当前项目打开cmd下载依赖包npm i//使用编辑器打开项目,目录详解,先看一下://bin: 用于应用启动,可...原创 2019-09-21 15:31:32 · 330 阅读 · 0 评论 -
canvas 裁剪缩略图
canvas 裁剪缩略图 //img图片路径 //w裁剪后图片宽度h裁剪后图片高度 function pross(img,w,h){ var bgImg = new Image(); bgImg.src = img; var imgdata='' img....原创 2019-09-23 15:12:50 · 265 阅读 · 0 评论 -
audio音频播放标签样式优化自定义
自定义audio音频播放样式实现进度监听,这是效果图src:音频路径longTime:音频时长,sourceType:音频文件格式默认audio/mp3index:下标,如果是数组渲染音频请必传下标原创 2019-10-10 15:40:05 · 3758 阅读 · 0 评论 -
js伪数组转数组
es6函数伪数组转换数组let arr=['a','b','c']Array.from(arr)Array.from(arrayLike,mapFn,thisArg )arrayLike想要转换成数组的伪数组对象或可迭代对象。mapFn (可选参数)如果指定了该参数,新数组中的每个元素会执行该回调函数。thisArg (可选参数)可选参数,执行回调函数 mapFn...原创 2019-10-07 15:21:20 · 98 阅读 · 0 评论 -
js使用递归实现深拷贝
js使用递归实现深拷贝实现思维:判断是否是对象/数组,对其使用for in遍历,每个属性判断是对象就调用当前函数并将结果赋值给当前属性function clone(obj){ let targetObj=obj.constructor === Array ? [] : {}; for(let i in obj){ if(typeof obj[i] === 'o...原创 2019-10-07 10:20:31 · 579 阅读 · 0 评论 -
nginx反向代理
在 nginx.conf 配置文件中增加如下配置:location / {proxy_pass http://127.0.0.1:8080;index index.html index.htm index.jsp;}原创 2019-09-28 17:30:50 · 148 阅读 · 0 评论 -
Ueditor富文本编辑器使用本地表情包
Ueditor富文本编辑器使用本地表情包可以去百度编辑器下载表情包http://ueditor.baidu.com/website/download.html也可以自己去搞一套images目录下的所有表情文件夹复制到dialogs/emotion/images/文件夹下面修改editor_config.js文件,去掉 emotionLocalization 项的注释,值改为true。...原创 2019-09-26 11:41:43 · 2423 阅读 · 0 评论 -
emoji 表情包全套手机端pc都支持
emoji 表情包全套手机端pc都支持使用方法直接复制过去就可以显示,存字符串任然可以,喜欢的可以点个赞原创 2019-09-26 10:22:48 · 2728 阅读 · 0 评论 -
后台传输文件流前端接收下载/其他处理
后台传输文件前端下载export function downFile(params = {}) { return request({ url: '/export', method: 'post', data: params, responseType: 'blob'//请求头加上这句 })}//下面是请求接收参数是下载配置downFile().the...原创 2019-09-25 11:41:58 · 1753 阅读 · 0 评论 -
前端知识点整理(一)
vue 的 nextTick 方法的实现原理vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行微任务因为其高优先级特性,能确保队列中的微任务在一次事件循环前被执行完毕考虑兼容问题,vue 做了微任务向宏任务的降级方案原创 2019-08-28 11:32:16 · 473 阅读 · 1 评论