自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(58)
  • 问答 (1)
  • 收藏
  • 关注

原创 2024年新年愿望

7.学会另一门计算机语言。6.参加一次公考考试。

2024-01-07 22:30:46 388

原创 css添加背景模糊

top: 0;left: 0;

2023-12-06 09:57:19 141

原创 vue 鼠标划入划出多传一个参数

举个栗子: 做一个hover提示弹窗组件(用的vue3框架 + less插件)可以将组件放在代码的最外层。

2023-10-17 11:10:48 1032

原创 截图工具 snipaste

截图工具snipaste

2023-09-02 06:45:46 281

原创 js 实现table表格横向拉伸

前端实现 table表格列宽可拖拽

2023-08-14 03:33:14 435

原创 前端模拟数据(mock)

最简单的模拟数据方法

2023-05-24 00:30:08 204

原创 处理图片路径

处理图片路径

2023-05-24 00:18:21 89

原创 vue3 router引入报错 类型注释只能在 TypeScript 文件中使用 、process is not defined

1.类型注释只能在 TypeScript 文件中使用 文件错误 改用ts文件。2.process is not defined 缺少环境变量。vite.config.ts 添加。

2023-02-27 22:09:09 1854

原创 this[xx] 与 this.xx 的区别

应该是和this.xx.xx功能差不多。但是this.xx中的xx不能是动态赋值的,而this[xxx] 中的xx是可动态赋值的

2023-02-15 20:21:34 299

原创 px em 和 rem的区别

1.px是固定的像素,一旦设置了就无法因为适应页面大小而改变。3. rem相对于根元素。2. em相对于父元素,

2023-02-15 20:10:52 97

原创 为什么要使用异步加载

用于当一个页面中加载两个或多个页面,而这两个页面同时影响到了某个数据,那渲染页面的时候可能会报数据错误的问题,因此在自己页面使用异步加载的方式,及当所有页面加载完成之后自己再去渲染自己的页面,这样处理数据的时候就只有自己在操作数据,就不会再报数据的错误了。

2023-02-15 19:56:23 142

原创 2023愿望清单 年终总结 2024-01-07

新年规划ing

2023-02-14 16:04:11 105

原创 vscode自动化写代码插件 自动生成代码插件

代码搜索工具

2022-12-11 20:06:25 1470

原创 如何生成简单的二维码

如何生成简单的二维码 草料二维码

2022-11-28 23:18:26 975

原创 开发中需要注意的问 github中的开源软件可以用来商用吗

github中的软件商用时一定要看开源协议

2022-11-23 01:04:44 9410

原创 vue3 setup ‘return‘ outside of function报错 踩坑日记

vue3 script setup 报错 问题

2022-11-08 00:03:44 2538

原创 前端有必要学习算法吗 前端如何学习算法 前端算法

前端算法 前端如何学习算法 前端有必要学习算法吗

2022-10-31 00:35:44 1683

原创 监听切回到浏览器当前页面

一般用于解决浏览器切到其他页面后 会暂停延时器的问题 document.addEventListener('visibilitychange', function () { // console.log(document.visibilityState); if (document.visibilityState == 'hidden') { console.log('页面离开时触发');

2022-04-27 11:22:54 546

原创 如何检查 VueJS 应用的大小?图片显示项目应用

** 生成报告webpack-bundle-analyzer****优点:**可直观地描述所使用的各种包的大小。首先附上webpack-bundle-analyzer插件地址:https://www.npmjs.com/package/webpack-bundle-analyzer使用步骤:npm install --save-dev webpack-bundle-analyzer查看package.js的"scripts"里是否有 “build-report”: “vue-cli-servic

2022-04-26 09:09:27 613 3

原创 sort 排序不准

sort排序不准问题是因为sort在做比较时会把数组中的元素转化为字符串去作比较,两个操作数都是字符串,则比较两个字符串第一个字母对应的ASCII码值,若拿 11 与 5 作比较,则5的ASCII码值大于1,即sort方法会认为11 < 5举个例子: var arr = [1,2,3,10,4,5,11,12,111]; var arrsort = arr.sort(); console.log(arrsort); // [1, 10, 11, 11, 111, 12, 2

2022-04-26 00:04:54 1647

原创 switch default多次触发

switch default多次触发default的触发次数与case匹配不到的次数是相关联的,当case有多少次未匹配,default就会触发多少次,所以再使用switch语法时,要注意这一特性,注意break的搭配

2022-04-24 23:13:42 518

原创 如何将object对象强制转换为字符串

1.若 obj= 1,2,3,4...; `${obj}`2.若 obj= {name:xiaoming}; JSON.stringify(obj);

2022-04-11 01:32:06 476

原创 精确判断数据类型的方法

精确判断数据类型的方法函数 var type = function(data) { let toString = Object.prototype.toString; let dataType = toString.call(data) .replace(/\[object\s(.+)\],"$1"/) .toLowerCase(); return dataType.split(' ')[1].split(']')[0]; } console.log(type('

2022-04-08 00:46:45 262

原创 react 函数式组件 setInterval清除不掉 clearInterval失效

追查过程针对函数式组件:在组件内声明 { timer = null; timer = setInterval(()=>{},seconds); }的情景; 1.可以在 clearInterval(timer) 先console一下timer的值,看看是什么 2.一般清除不掉setInterval的情况是因为每次在清除之前重新走了一遍改组件的js代码,使timer又成了初始值null,再去clearInterval(timer);肯定不会成功了。解决办法: 再组件外声明 tim

2022-03-31 08:41:07 3652 1

原创 css 溢出隐藏显示三个点

几行代码实现溢出隐藏显示 … display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;注意:有时你会发现溢出隐藏没有生效,浏览器打开打开样式编辑查看区,你会发现-webkit-box-orient: vertical;样式字段没有生效;因为在vue,react中使用样式无效,因为autoprefixer打包会自动生成前缀;全部复制下面代码即可。/* autopref

2022-03-23 22:18:53 1037

原创 vue Moment处理时间

Momentnpm install momentvar moment = require('moment');moment().format();使用本地时间var moment = require('moment');require("moment/min/locales.min");moment.locale('cs');console.log(moment.locale()); // cs

2022-03-03 18:37:51 499

原创 getBoundingClientRect 获取某个元素相对于视窗的距离

getBoundingClientRect() 获取某个元素相对于视窗的距离 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box,元素的的尺寸等于 width/height。 返回的结果是包含完整元素的最小矩形,并且拥有left, top, right, bottom,

2022-03-03 18:15:24 210

原创 vue click点击事件不生效

click点击事件不生效Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符;即:@click.native="xxx()"...

2022-03-03 18:03:14 1912

原创 动态创建style标签样式实现动态隐藏导航栏 隐藏导航栏 -webkit-scrollbar

根据条件动态隐藏导航栏1.先做好自己的判定条件2.在条件内放入下面代码块即可,超级好用 const stylee=document.createElement('style'); const sHtml = '::-webkit-scrollbar {display: none;}'; stylee.innerHTML = sHtml; document.getElementsByTagName('head').item(0).appendChild(stylee);...

2022-02-23 21:30:24 334

原创 什么是token token用在哪 token放在哪比较好

1. token 其实就是访问资源的凭证,一般是用户通过用户名和密码登录成功之后,服务器将登录凭证做数字签名,加密之后得到的字符串作为token2. token用在用户登录城后之后会返回给客户端,3. token主要存储有: 3.1 存储在localStorage、sessionStorage中,每次调用接口的时候发送给服务端(每次调用接口放在HTTP请求头的Authorization字段里) 优点:可以跨域 缺点:没有任何安全防御,很容易受到xss攻击(简单理解在输入框输入js

2022-01-03 23:13:45 10827

原创 浏览器为什么要阻止跨域请求 如何解决跨域 每次跨域都需要到达服务端吗

1. 浏览器阻止跨域的原因是“同源策略”,“同源策略”主要解决浏览器安全问题。 1.1 同源策略:协议、域名、端口号必须相同,有一者不同都会造成非同源 1.1.1 非同源的影响 1. 无法获取cookie、localStorage、sessionStorag、indexedDB 2. 无法访问网页中的dom 3. 无法发送网络中的请求2. 解决跨域 1. jsonp跨域 2. postMessage跨域 3. 跨域资源共享(CORS) 4. nginx反向代理

2022-01-03 22:22:17 864

原创 cookie localStorage sessionStorage 数据传参方式

1. 存储大小 1.1cookie的数据大小不能超过4k. 1.2sessionStorage、localStorage 大小一般限制在5M左右(可以更大) 2. 有效时间 2.1 cookie可以设置过期时间,在设置过期时间未到之前,即使浏览器关闭也一直有效,如果不设置有效期,则在浏览器关闭时过期(cookie中的数据销毁) 2.2 localstorage 永久式存储数据,除非主动删除本地数据 2.3 sessionStorage 数据在当前浏览器窗口关闭后自动删除 3. 数据与服务器

2022-01-03 19:34:47 458

原创 git git版本回退 回滚 解决方案

git版本回退 回滚 解决方案1. git log --pretty=oneline // 查找版本由最近到最远的提交日志 主要是查找版本id2. git reset --hard id // 根据id回退到指定的版本3. git push origin HEAD --force // 推送到本地到远程仓库。4. git reflog // 查看命令操作的记录 当版本号回退错了,可以通过此命令查找一下对应版本id 重复2.操作即可...

2021-12-28 16:04:17 848

转载 The media could not be loaded, either because the server or network failed or because the format is

The media could not be loaded, either because the server or network failed or because the format is not supported 问题反复排查,视频资源没问题,调用方式也没问题。而且出问题的用户所占比例非常小,所在地区、宽带线路也无规律,而且均反映土豆、优酷等站的视频能正常播放。远程方式查看用户浏览器控制台,网络选项中提示视频资源404,由于视频托管在阿里云oss服务器中,提交工单,阿里工程师也没说出所以

2021-12-24 11:06:21 127047 1

原创 url传参 中文出现乱码问题 解决方案

js url http 传参 中文乱码

2021-12-20 15:06:04 3817

原创 iframe iframe参数

1.基本参数:<iframe src="path" //引用页面地址 name="myname" //框架表示名 frameborder="xx" //边框 scrolling="yes/no" //是否出现滚动条 noresize="noresize" //是否允许调整框架窗口的大小 width:"xx" //框架宽度 height:"xx" //框架高度 ></iframe>...

2021-11-07 18:09:33 969

原创 video.js 使用方法 videojs参数

1.第一步<link href="video-js.css" rel="stylesheet" type="text/css"> <!-- video.js must be in the <head> for older IEs to work. --> <script src="video.js"></script> 2.第二步<script> videojs.options.flash.swf = "video

2021-11-05 21:42:09 2740

原创 如何实现 input 和 textarea 自动聚焦

如何实现 input 和 textarea 自动聚焦思路:直接获取元素标签后直接 .focus() 即可例(Vue环境):<template> <textarea ref="focusTextarea"></textarea></template><script> mounted() { this.$refs.focusTextarea.focus(); }</script>...

2021-11-05 20:54:57 1621

原创 npm安装依赖至指定版本 npm依赖升级

方法一先在package.json里修改好指定版本号(例:axios": "^0.19.2),然后输入:npm update webpack方法二npm update axios@0.19.2会把webpack更新至指定版本,但是不会写到package.json文件里,如果需要写到package.json里执行如下命令:npm update webpack@4.7.0 --save注:其中–save等于-S.方法三npm update webpack@latest -S–save和–sa

2021-11-03 19:30:59 6254

原创 js 拖放元素

记录一个十分好用的js原生拖拽效果<!DOCTYPE html><html><head><meta charset="utf-8"> <title>拖拽测试</title><style type="text/css">#div1, #div2 { position: relative; float:left; width:300px; height:150px; margin:10px; p

2021-09-28 19:53:33 86

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除