- 博客(57)
- 收藏
- 关注
RSS订阅原创 js 改变颜色透明度 十六进制 RGBA
/** * 十六进制color颜色/RGBA/RGB，改变透明度 * @param {*} thisColor #555 rgba(85,85,85,0.6) rgb(85,85,85) * @param {*} thisOpacity 0.7 * @returns rgba(85,85,85,0.7) */export function getOpacityColor(thisColor, thisOpacity) { var theColor = thisColor.toLowerCas
2022-03-03 15:46:08
3669
原创 svg转canvas进而转base64
我想把svg转为base64，但是html2canvas不支持svg，在svg外包一个正常标签可以解决这个问题，但是因为谷歌浏览器支持最小字号为12，如果在svg放小于12号的文字，转的时候会强制转为12号，于是我找了另一个库canvg来解决这个问题,这个库可以直接把svg转为canvas，代码如下：import { Canvg, Document } from 'canvg';async componentDidMount() { const svgdom = document.getElem
2021-12-03 17:45:32
721
原创 react-monaco-editor自定义主题
import MonacoEditor from 'react-monaco-editor';/** * 编辑器钩子editorWillMount * @param {*}} monaco */editorWillMount(monaco) { monaco.editor.defineTheme('themeGray', { base: 'vs', inherit: false, rules: [], colors: { 'editor.backg
2021-12-01 09:27:53
1462
1
原创 table设置border-collapse: collapse；后border计算异常的解决办法
问题：table设置border-collapse: collapse;临近合并单元格的border会计算错误，如下图所示解决：table { border-collapse: unset; border-spacing: 0;}
2021-11-19 11:28:32
6335
原创 使用react-dnd实现跨表格的行拖拽
功能点：1.表格内的行拖拽（drag和drop都放在行上）2.跨表格的行拖拽（drag事件都放在行上，表格不空时drop事件放在行上，表格空时drop事件放在空提示上）3.表格拖拽（drag和drop都放在表格的header上）MytableV3.jsimport React from "react";import { Table, ConfigProvider, Icon } from "antd";import { DndProvider, DragSource, DropTarget
2021-10-08 09:59:58
1851
原创 antd使用记录
inputNumber只能输入数字<InputNumber min={0} max={10} parser={value => value.replace(/[^0-9]/ig,"")}/>
2021-09-23 13:59:52
117
原创 实现一个简单的Promise
先看一下promise的使用const pe = new MyPromise((resolve, reject) => { const acount = 10; if (acount > 5) { resolve("我大于5"); } else { reject("我小于5"); }});pe.then(data => { console.log("使用then", data);});先定义类MyPromise，构造函数入参是一个回调函.
2021-07-30 15:01:04
121
原创 前端面试总结--Vue3
https://www.cnblogs.com/ygunoil/p/14464335.htmlhttps://blog.youkuaiyun.com/weixin_40599109/article/details/110938941Proxy API 替代 defineProperty APIdefineProperty是遍历监听所有的属性，只能监听到已经存在的属性，且只能监听属性，遍历导致性能很差Proxy是监听对象，所以不管是已经存在的属性，还是新增的属性，都可以监听到https://baijiaha
2021-07-20 14:48:43
303
原创 web前端面试题（HTML、CSS、浏览器相关）
Doctype的作用H5的Doctype声明H5新增的内容有哪些History APIJS延迟加载盒模型行内元素和块级元素清除浮动的方式水平垂直居中垂直居中各种隐藏方式的区别怎么让页面变灰怎么实现毛玻璃效果CSS选择器优先级Doctype的作用关键词：声明文档类型、怪异模式、标准模式回答：Doctype是document type的缩写，<!DOCTYPE >声明位于文档的最前面，目的是告诉浏览器使用标准模式还是怪异模式来渲染文档；标准模式是指按照W3C标准来渲染，怪异模式是指按照浏览.
2021-07-11 17:04:49
227
原创 前端面试总结--Vue(router)
目录vue-router使用< router-link >的属性vue-router的配置属性vue-router的跳转方法动态路由路由懒加载路由嵌套参数传递和获取\$route和\$router的区别vue-router的钩子函数vue-router使用main.jsimport Vue from 'vue'import App from './App'import router from './router'new Vue({ el: '#App', router, ren
2021-07-07 10:00:24
365
2
原创 前端面试总结--Vue(Vuex)
目录VuexStateMutationsGettersActionsModelsVuexVueX是Vue使用的状态管理工具。可以用来统一管理用户的登录状态、用户名称、头像、地理位置等信息。State目录1.初始化store下index.js中的内容import Vue from 'vue'import Vuex from 'vuex'//挂载VuexVue.use(Vuex)//创建VueX对象const store = new Vuex.Store({ state:{
2021-07-07 09:55:11
322
原创 前端面试总结--Axios
目录官网Axiosaxios 拦截器的简单介绍及使用场景取消axios请求官网http://www.axios-js.com/zh-cn/Axios请求方式：axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[,
2021-07-07 09:37:32
527
原创 将html导出为word、excel、pdf文件
参考链接：vue前端html导出word文档vue 前端导出word、excel、pdfvue中实现html页面导出word和pdf的办法利用jQuery-Word-Export导出word (含ECharts)将含echarts图表的HTML导出生成word文档将html页面中部分div 导出为word...
2021-07-06 09:38:24
333
原创 将html导出为pdf文件
方法1：使用 html2Canvas + jsPDF插件（htmlToPdf.js）：import html2Canvas from 'html2canvas';import JsPDF from 'jspdf';export default { install(Vue, options) { Vue.prototype.getPdf = function(id, reportName = "报告") { let title = this.htmlTitle;
2021-07-06 09:35:05
514
原创 文字超过两行或三行就显示省略号
.p1{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
2021-07-05 15:39:30
414
原创 浏览器使用用户脚本-油猴
用户脚本库：greasyfork脚本管理器：油猴使用方法：https://www.jianshu.com/p/529b01e79416
2021-07-05 12:07:17
401
原创 高德地图和百度地图之间的坐标点位转换
目录点位转换高德地图api百度地图api点位转换/** * 点位转换：百度转高德 * @param {*} bd_lng longitude（经度） * @param {*} bd_lat latitude（纬度） * @returns [longitude, latitude] */export function BMapToGeo(bd_lng, bd_lat) { const X_PI = (Math.PI * 3000.0) / 180 const x = bd_lng - 0.
2021-07-05 11:51:01
1442
原创 elementui上传文件按钮置灰后还能选择文件的解决办法
最近做文件上传时发现，按钮明明设置了disabled，样式也是disabled了，但是点击以后居然还能弹出选择文件的对话框，百度有人说disabled只是禁用了点击事件，并没有禁用打开文件选择窗口，所以自己改造了一下，disabled时把button换成假的就可以了代码：<div @click.stop v-if="fileList.length >= 1" class="el-button el-button--primary el-button--small is-disa
2021-04-09 16:13:16
1784
1
原创 纯前端生成二维码并下载到本地
功能：纯前端生成二维码并下载到本地步骤拆分：生成二维码，把html转成canvas，下载图片用到的库：qrcodejs2，html2canvas代码：<p @click="downQR">下载二维码</p><div id="qrcode-box" class="qrcode-box"> <div class="qrcode" ref="qrCodeUrl"></div></div><style>.qrc
2021-02-21 10:15:32
840
原创 textarea高度随输入文字变化
1.下载emelentui的计算方法https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js2.引入计算方法import calcTextareaHeight from './calcTextareaHeight'3.监听输入内容并实时计算高度 watch: { detailAddress(val) { if(val.length > 100){ v
2021-01-12 17:22:22
469
1
原创 H5页面点击复制文本
框架：vue使用库：clipboard.js使用方法：1.安装npm install clipboard --save2.引入// 局部引入import Clipboard from "clipboard"// 全局引入import Clipboard from 'clipboard'; Vue.prototype.Clipboard=Clipboard;3.绑定复制内容<button id="copy" :data-clipboard-text="record.shi
2021-01-12 16:07:47
943
原创 使用elementUI的tree实现省市区街小区的选择
具体需求：支持按层级选择一个/多个小区层级懒加载选中非小区节点时默认选中该节点范围下的所有小区支持按列表选择一个/多个小区列表懒加载“全部小区”选项和树/列表中的选项互斥按树结构和按列表结构选中的小区是同步更新的记忆节点选中状态支持搜索，可以在搜索出来的列表中进行选中/取消选中操作效果如图：设计思路：用一个变量a来存放真实选中的小区信息，树/列表只做展示用树的懒加载：展开节点时再加载下一层信息列表的懒加载：先加载50个小区，滚动到底部时再加载下一批小区，虚拟分页树的节
2020-12-28 15:05:44
1586
原创 css / filter属性
最近项目开发用到了filter的grayscale和blur值，觉得很强大，今天来看看filter到底还能干什么！filter的属性值有：none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() |saturate() | sepia()找了张温温的图，来看看这些值的效果：filter: blur(5px); // 模糊
2020-12-10 14:36:51
459
原创 h5开发 / 调用原生App的方法
// share()是原生提供的方法if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 苹果 if (window.share){ window.share(); } else if (window.webkit) { window.webkit.messageHandlers.share.postMessage() }} else if (window.Android && window
2020-11-23 10:10:32
1296
原创 h5开发 / 判断运行环境（苹果、安卓、微信浏览器）
isIos() { return (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent))},isAndroid() { return window.Android},isInWexin() { return navigator.userAgent.toLowerCase().includes('micromessenger')},
2020-11-23 10:05:52
385
原创 blob格式转json
使用场景：将列表导出为excel文件，接口返回的数据类型为blob，这样我就获取不到报错信息了，所以需要将blob转为json才能满足需求实现:// 请求接口时设置如下{ headers: { 'Content-Type': 'multipart/form-data', }, responseType: 'blob'}// 接口拿到数据之后的判断const resInfo: any = await this.blobToObj(res.data)if(resInfo.co
2020-11-19 15:23:30
3372
原创 h5开发 / 使用vue-seamless-scroll实现列表轮播
目的：轮播“最近提现”列表方案：使用vue-seamless-scroll效果：实现：1.安装cnpm install vue-seamless-scroll --save2.注册import vueSeamlessScroll from 'vue-seamless-scroll'Vue.use(vueSeamlessScroll)3.使用<vue-seamless-scroll :data="listData" :class-option="classOption"
2020-11-18 19:21:04
611
原创 h5开发 / 移动端不兼容text-align: justify的解决方法
最近做移动开发，需要做如下效果，信心满满的使用text-align: justify发现居然无效！！！！最后在网上找到了解决方法：<!-- 每个字之间都加个空格 --><!-- 后面加一个span标签是因为，只有一行的话，text-align-last是不起作用的 --><div class="desc"> 邀 请 新 用 户，领 取 更 多 红 包 哦！ <span class="span_hid"></span></div
2020-11-18 18:59:13
1111
1
原创 给邮箱和手机号码打码
给邮箱和手机号码打码这种功能一般都是后台来做，因为被抓包的话，前台打码根本没用// 替换邮箱字符function regEmail(email) { if (String(email).indexOf('@') > 0) { var str = email.split('@'), _s = ''; if (str[0].length > 3) { for (var i = 0; i < str[0].length - 3; i++) {
2020-11-18 18:42:38
1187
原创 h5开发 / weixin-js-sdk使用分享
最近做了一个h5活动页面，需要自定义微信分享的标题、详情、缩略图和url，使用到了jssdk，功能已经完成，总结一下这个东西到底怎么用（使用的是vue框架）先来做下思想建设：使用微信浏览器打开任何一个页面都可以点击右上角的···进行分享，这个功能只是可以自定义分享出去显示的标题、详情、缩略图和url，如图微信浏览器不支持主动唤起分享，所以如果你想做点击某个按钮就打开微信好友列表进行分享这种类似功能的话，就别想了，只能给用户一个提示，让他自己去分享，如图配置自定义分享内容的时间节点在用户可能分享
2020-11-18 18:37:34
2566
1
原创 Charles抓包分享
最近在维护一个App，解决线上问题时需要抓包来定位问题，使用的抓包工具是Charles，手机是iPhone，电脑系统是Win10。Charles通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。其实就是在电脑上安装Charles作为一个代理服务器，然后手机连接到跟电脑同一个局域网内，给手机连接的网络设置代理，代理服务器就是你安装的Charles，然后Charles就能接收到你手机所有的网络请求了。具体使用步骤如下：下载Charles并破解
2020-11-11 14:44:29
448
原创 git / 协同开发常用指令
总结一下多人协同开发可能使用到的git命令下载好git后首先需要配置个人信息如果想使用SSH方式下载代码需要配置SSH所有信息配置好以后就克隆代码了远程仓库一般有master和dev两个分支，可以在本地也创建两个同名分支，并分别跟踪开发之前要先拉取最新代码接下来就可以开始开发然后提交自己写的代码了当所有的小伙伴都开发完成后，需要有一个人来把dev分支上所有的commits都合入到master上打包测试其他命令参考博客下载好git后首先需要配置个人信息#查看当前用户配置git config --glob
2020-11-05 23:06:38
391
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人