- 博客(74)
- 收藏
- 关注
RSS订阅原创 记录一次可视化大屏开发
版本：echarts5.3.0 - echarts-gl2.0.8echarts大部分问题都是版本原因，4.x和5.x区别很大，推荐^5.3.0，因为有些api需要这个版本以上才支持。另外5.1支持svg地图数据格式，与之前的一些用法截然不同，同时拓展性也更加高了，svg地图值得研究下，像svg内插入图片、定义事件等。这里推荐一下echarts社区的案例，便于开发。首先需要去这个地址下载个地图数据，全国的就下载全国数据，指定省的就下载指定省的数据。
2023-08-29 17:52:36
370
1
原创 input.focus()失效？vantui autofocus属性失效？
首先声明，input自动聚焦功能ios、safari不支持；原因在于，ios、safari想要聚焦input，必须将input.focus()触发事件写在点击事件内部，onClick、addEventlistener。如果你的页面自动聚焦在安卓or普通浏览器无法自动聚焦，检查该页面的input是否存在多个autofocus属性。温馨提示：弹窗也属于同一个页面下噢。接下来解释，安卓or普通浏览器自动聚焦功能无效？
2022-10-27 15:42:21
1397
1
原创 记录一次vue项目首屏优化
vue默认会自动开启资源预加载，这些资源预加载完是不执行的，在需要的时候才执行；以及预备下一个导航跳转使用；这个设置是将这个预加载关闭掉。
2022-07-22 11:01:04
342
原创 vue2 + elementui el-upload文件上传后回显及重新提交思路
vue2 + elementui el-upload文件上传后回显及重新提交思路
2022-07-14 11:15:39
4288
1
原创 记录一次cookies设置
用的是js-cookie.js基础用法的话可以参考这个博主：https://www.cnblogs.com/NanKe-Studying/p/13952558.html非常的简介明了。在设置domain域时：在清除cookies时：Cookies.remove(arr[0])无法直接删除直接的cookie。(本地环境是可以删除的，生产不行。)需要设置指定的path或者domain来清除指定的cookie，例如：Cookies.remove(arr[0], { path: ‘/’, domain: ‘
2022-07-06 16:32:21
179
原创 keep-alive记录滚动条位置
在做消息列表时需要记录keep-alive切换页面的滚动条位置。mounted() { // 监听滚动条的位置 this.$refs.scrollDom.addEventListener( 'scroll', (res) => { const height = res.target this.tableScrollTop = height.scrollTop
2022-04-22 15:14:12
865
原创 锚点定位及页面滑动到指定dom
先介绍下API及参数：document.querySelector('#需要定位的ID').scrollIntoView({ behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto" block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start" inline: "nearest" // 定义水平方向的对齐， "start"
2022-04-19 15:13:56
690
原创 记录一次vue-router在beforeEach中addRoutes无效
router.beforeEach((to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { if (!store.getters.name) { // 模拟一个请求 setTimeout(() => { // 请求
2022-04-08 09:31:27
2501
原创 记录一个数据格式化
现有一个列表，后端为了储存数据内存最小化，往往会传个标识回来。/* new => '新用户' old => '老用户' 0 => 进行中 1 => 审核中 2 => 已完成*/let list = [ { status: 'new', type: 0}, { status: 'old', type: 1}, { status: 'new', type: 2},]<div v-for="item,index in list" :key="inde
2022-04-01 17:52:38
340
转载 认识回流重绘
为了让项目的运行效率更高，减少开销，需要对重排、回流、重绘有一定的了解。重排和回流其实是一回事。浏览器渲染浏览器在渲染页面的时候，大致是以下几个步骤：解析html生成DOM树，解析css，生成CSSOM树，将DOM树和CSSOM树结合，生成渲染树；根据渲染树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系 - 回流根据渲染树以及回流得到的节点信息，计算出每个节点在屏幕中的位置 - 重绘最后将得到的节点位置信息交给浏览器的图形处理程序，让浏览器中显示页面回流回流：英文叫refl
2022-03-29 11:06:14
116
原创 Document.createDocumentFragment()
记录下一个方法，源自MDN该方法会创建一个新的空白的文档片段。DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。示例：var element = document.getElementByI
2022-03-29 10:43:31
251
原创 toLocaleString()千分位格式、日期格式转换
将数字变成千分位格式：let num=123456789;console.log(num.toLocaleString()); // 123,456,789将日期格式转换：new Date().toLocaleString('chinese',{hour12:false}) // "2022/3/25 16:55:08"new Date().toLocaleString('chinese',{hour12:true}) // "2022/3/25 下午4:55:13"更多待补充…...
2022-03-25 16:57:12
1009
原创 在安装 vue-elementui-admin时出现 undefined ls-remote -h -t ssh://[email protected]/sohee-lee7/Squire.git
npm ERR! Error while executing:npm ERR! C:\chenjingxia\application\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/sohee-lee7/Squire.gitnpm ERR!npm ERR! Host key verification failed.npm ERR! fatal: Could not read from remote repository.npm ERR!n
2022-03-22 10:46:00
2508
2
原创 记录一次pc端文件下载与打开
openClick() { // window.open(this.url); window.open("http://localhost:8080/info.pdf"); // window.open("http://localhost:8080/test.jpg");},loadClick() { // 注意地址得同源，非同源会直接打开 let dom = document.createElement("a"); dom.target = "_blank"; //
2022-02-25 17:26:56
211
原创 vuex解决刷新页面丢失数据
在app.vue中执行该方法// 储存vuex数据 storageVuexFun() { //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("storedata", JSON.stringify(this.$store.state)); }); // 兼容iphone
2022-02-20 16:01:14
396
原创 记录一次9宫格转盘
<template> <div class="turntable clearfix"> <div class="music1"></div> <div class="prizeBox clearfix"> <div class="prizeTle"></div> <ul> <li v-for="(item, indx) in p
2022-02-11 14:52:59
352
原创 针对Object和Array深拷贝处理
深拷贝：版本一：var obj = {a:1,b:2,c:3}var newobj = JSON.parse(JSON.stringify(obj))obj === newobj // falseJSON.parse(JSON.stringify(obj))大多数情况下这么做深拷贝是没有问题的。但是：当对象中有字段值为undefined时，转化后该字段会直接消失；当对象中有字段为RegExp对象时，转化后该字段会变成{}；当对象中有字段为NaN时，转化后该字段会变成null；当对象中存
2022-02-10 16:29:02
284
原创 获取dom元素信息
element.clientWidth;/* clientWidth = width+左右padding; 内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。*/element.offsetWidth;/* offsetWidth = width + 左右padding + 左右b
2022-02-10 16:20:09
414
原创 git常用
本地存在冲突的情况下也是可以提交到远程的。并且是将冲突的代码都提交到远程仓库。分支的合并，一定是在 主分支上进行的。只能在主分支合并其它分支。需要两步：1） 切换到主分支2） 使用git merge 分支名 进行合并git stash (也可以git stash save ‘描述’，可方便查看)git stash 把工作区的修改提交到栈区，目的是保存工作区的修改；没有提交(commit)的内容都会保存至堆栈中。如果在错误的分支上开发了，git stash 可以将在a分支上开发的..
2022-02-10 16:18:54
68
原创 常用请求提交格式
application/json广泛应用Content-Type: application/json;charset=utf-8{"title":"test","sub":[1,2,3]}application/x-www-form-urlencoded广泛应用于post请求Content-Type: application/application/x-www-form-urlencoded;charset=utf-8title=test&sub%5B%5D=1&sub%5B%
2022-02-10 16:15:40
361
原创 自用随笔集
微信浏览器border 用1px，0.01rem会出现部分边框不显示的问题。微信浏览器页面跳转window.location.href ios会出现底部的返回导航条，如果不需要返回，可以使用window.location.replace(url)代替。递归函数返回 undefind。每次递归需要把递归自身return到最外层。使最外层得到最新的数据。html2canvas.js 获取的dom内不允许出现跨域的图片，即使设置useCORS: true,也无效，需要将图片链接转为base6..
2022-02-10 16:13:16
1257
原创 记录一个协议勾选样式
<div class="checkModel"> <div class="checkBox"> <input type="checkbox" id="isRead" v-model="isRead" /> <div class="checkDom"></div> </div> <label for="isRead" class="checkTxt" >已阅读并同意<b @click=
2022-01-21 15:11:21
407
原创 Promise.all错误处理
function requestFirst() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('第一个请求返回'); }, 1000) })}function requestSecond() { return new Promise((resolve, reject) => { setTimeou
2022-01-17 14:28:06
1198
原创 服务器图片转化为base64进行海报合成
问题：html2canvas.js 在合成海报时，海报如果是服务器地址将会报跨域，这时需要将图片转化为base64格式再去进行合成。<!-- 海报弹窗 --><divPopup :parPopup.sync="bannerPopup" @momentCloseClick="momentCloseClick"> <div class="bannerPopup"> <div class="bannerImg" ref="saveImgRef"&
2022-01-17 11:22:26
640
原创 @font-face自定义字体包
让设计提供字体包，ttf文件。在font.css文件下定义字体的名称和引用。这里方正Regular为普通型，Bold为加粗型，Heavy为重型加粗。得根据font-weight: bold;的不同来加载不同的字体包。@charset "utf-8";@font-face { font-family: 'myfangzheng'; src: url(./AdelleSansCnd-Regular.ttf);}@font-face { font-family: 'my
2022-01-13 15:42:10
298
原创 URLSearchParams获取url参数
URLSearchParams// 先模拟一个url对象let url = new URL('http://localhost:11123/index.html?actNumber=ACT0001&channelId=11&obj="{\"name\":\"晨淘淘\",\"age\":18}"#/')console.log(url);let params = new URLSearchParams(url.search.slice(1));console.log(params);
2022-01-13 11:21:39
856
原创 记录一个抛物线
https://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%e5%85%83%e7%b4%a0-%e6%8a%9b%e7%89%a9%e7%ba%bf-%e8%bf%90%e5%8a%a8-%e5%8a%a8%e7%94%bb/文件：parabola.js借鉴网上的抛物线写了个添加购物车的动画<style> * { margin: 0; padding: 0; } .i.
2022-01-12 16:43:34
147
原创 解决微信公众号分享出去的是链接
原因：响应国家反垄断规章，微信调整可实现访问外链；异常：现在点击微信聊天发出来的链接，再点分享会直接成为字符串链接形式解决步骤：1、使用电脑端的聊天框打开链接；2、点击右上角“浮窗”按钮3、再点开“浮窗”4、进入页面后再点击分享，分享到其他人5、就会得到以前分享形式的方式6、再使用手机微信，点击这个分享形式进去；在手机中点分享，就可以完成正常开发分享了...
2022-01-10 18:16:31
8160
3
原创 记录一个van-list上拉加载更多在非第一页切换列表请求数据页数不正确问题
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="load" offset="50" :immediate-check="false">列表</van-list> // 初始化分页列表 initList() { this.currentPage = 1; this.list = []; this.loa
2022-01-06 15:54:51
882
原创 基于vue封装一个公用弹窗
<template> <!-- 公用弹窗封装 --> <div class="popupOuter"> <transition name="leave"> <div class="popup" v-if="show"></div> </transition> <transition name="bounce"> <div class="popupMai
2022-01-05 17:42:25
772
转载 vue-router配合transition完成路由切换动画
基本情况下在app.vue入口文件加上这个就行了。<transition name="scale" mode="out-in"> <router-view></router-view></transition>但在新版vuerouter需要更改下<router-view v-slot="{ Component }"> <transition name="scale" mode="out-in"> <co
2021-12-27 11:16:47
4056
2
转载 微信小程序隐私指引完整填写范本
为了分辨用户，开发者将在获取你的明示同意后，收集你的微信昵称、头像。为了显示距离，开发者将在获取你的明示同意后，收集你的位置信息。开发者收集你的地址，用于获取位置信息。开发者收集你的发票信息，用于维护消费功能。为了用户互动，开发者将在获取你的明示同意后，收集你的微信运动步数。为了通过语音与其他用户交流互动，开发者将在获取你的明示同意后，访问你的麦克风。开发者收集你选中的照片或视频信息，用于提前上传减少上传时间。为了上传图片或者视频，开发者将在获取你的明示同意后，访问你的摄像头。为了登录或者注
2021-12-21 14:23:48
6306
1
原创 记录一次h5定位
起初用了高德的精准定位，发现有概率会定位失败；于是乎在失败的回调中加了个百度的城市级定位。反馈上来的问题是定位时间太久了。因需求只需要定位到城市级别，后又改成单独的高德地图城市定位，发现在流量的情况下，定位是不准的。（知道怎么解决的xd麻烦留个言）后面改用了百度的SDK赋值定位。关键代码：<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=be5XX
2021-12-15 09:24:40
97
3
原创 RSA非对称与AES加解密使用
详细介绍参考简书：https://www.jianshu.com/p/5008a407b558考虑到密钥不能暴露在前端，因此采用了RSA非对称加解密方式。window系统可以通过git bash通过公钥进行加密，私钥进行解密。附上压缩包链接：https://vncdn.mobi88.cn/ct1130/public/jsencrypt.min.js...
2021-11-30 15:47:03
97
原创 引入阿里图标库（iconfont）后图标黑白问题
Font Class引入方式不支持彩色图标。想要运用彩色图标得通过Symbol方式引入，得以SVG的方式展示。<svg class="icon" aria-hidden="true"> <use xlink:href="#对应的类名"></use></svg>// 加个通用样式把，不然引入贼大。.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColo
2021-11-30 11:55:14
3876
1
原创 常用工具包
// 封装公用方法let common = { // 判断电话号码格式是否正确 /** * 【数据卡】：14号段以前为上网卡专属号段，如中国联通的是145，中国移动的是147,中国电信的是149等等。 【虚拟运营商】：170[1700/1701/1702]、162(电信)，1703/1705/1706、165(移动)，1704/1707/1708/1709(联通)、171、167（联通） 【卫星通信】： 1740[0-5] (电信)，1349(移.
2021-11-12 09:39:13
66
原创 ios h5唤起AppStore及兑换码自动填充
RT。上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
2021-11-08 10:33:47
4992
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人