- 博客(57)
- 收藏
- 关注
RSS订阅原创 【js判断机型】
var isIOS = /(iPhone|iPad|iPod)/i.test(navigator.userAgent)var isiPad = navigator.userAgent.match(/(iPad)/) || (navigator.platform === ‘MacIntel’ && navigator.maxTouchPoints > 1)var isAndroid = /Android/i.test(navigator.userAgent)
2024-06-18 12:26:39
509
原创 【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】
在移动端的首页用视频做背景动画，让动画循环，自动播放，静音。
2024-06-13 14:55:33
1044
原创 【非常好用的吧页面生成图片的插件html2canvas】
把当前页面的内容生成一张图片，然后保存在本地。这里移动端采用长按保存的方式，兼容性更好，适用于各种浏览器。
2024-03-21 19:14:24
546
原创 【非常好用的复制功能插件vue-clipboard2】
要实现功能是，点击按钮复制相对应的内容，复制到粘贴板，然后可以随意粘贴到任何地方。就是如此简单。
2024-03-21 16:45:32
713
原创 【自定义手机端触摸滑动的轮播效果】
自定义手机端的触摸效果，可以左右触摸滑动，就像swiper自带的轮播效果，在这种条件下可以随意实现你要的动画效果。
2024-03-18 19:57:22
329
原创 【针对低版本的浏览器，requestAnimationFrame的兼容性写法】
【代码】【针对低版本的浏览器，requestAnimationFrame的兼容性写法】
2024-01-02 18:26:07
625
原创 【js自定义鼠标样式】【js自定义鼠标动画】
自定义鼠标形状，自定义鼠标的动画，可以让我们的页面更加有设计感。当前需求：吧鼠标自定义成一个正方形，鼠标的效果有：和页面的颜色做色差处理，例如当鼠标指到的颜色是白色，在鼠标的这块区域中显示的是黑色，另外，当鼠标指向特定区域时，正方形的鼠标放大三倍，并且以中心为圆点旋转。代码如下（示例）：
2023-12-29 19:07:55
1562
原创 【生成和为20的四个随机数】
需要实现的功能是，产生四个随机数，合是20。生成和为20的四个随机数，先随机四个数中的第几个数，再随机产生一个数字。
2023-12-29 15:08:20
456
原创 【js控制页面的模糊程度】【lenis禁止页面滚动】
在项目中，我们经常会遇到弹窗功能，当弹框弹出时，背后的页面禁止滚动，且模糊处理。这里总结了当弹框弹出时，给弹框的背景模糊处理，禁止滚动的方法，使用插件来实现，不是用纯js写的。
2023-12-27 16:14:47
855
原创 【自定义顶部导航条跟随屏幕滚动显示隐藏】
由于在网页中顶部导航条占用位置太大，首页的展示效果不完美，所以决定当滚动条向下滚动的时候隐藏滚动条，向上滚动的时候显示滚动条。以达到更玩完美的显示页面内容，避免顶部导航占用页面空间造成页面无法显示完整。,如果有什么问题，可以留言，有可能代码中有漏掉的部分。
2023-12-27 12:13:00
765
1
原创 【绘制某个链接地址的二维码】【qrcodejs2绘制二维码】
在前端项目中，用户扫描二维码的功能，有时候会根据不同的用户信息，跳转到不同的链接，甚至会携带不同的参数，这时候就不能使用UI给我们的切图来展现二维码，就需要我们根据不同的用户去绘制不同的二维码图片，让用户自行跳转到相对应的链接。这里推荐插件qrcodejs2来绘制不同的二维码。这里是qrcodejs2绘制二维码的全部过程。如有错误请朋友们留言补充。
2023-12-26 19:23:12
527
原创 【vue滚动条插件vuescroll】【vue自定义滚动条】
由于浏览器自带的滚动条比较不符合设计图，所以在大部分项目中，我们都会自定义滚动条的样式，来还原设计图，让页面更加的美观。
2023-12-26 18:52:29
2086
原创 【js判断移动端和pc端】【js判断是否是ipad（兼容ios13）】
在前端代码中，经常需要判断设备的类型，再来展示相对应的页面。也就是分为移动端和PC端。js中可以使用navigator.userAgent来输出当前设备的详细信息。JS怎样判断设备型号，怎样区分移动端还是PC端的方法
2023-12-26 17:59:39
4654
原创 【H5页面分享框的标题和描述】
在H5 项目中，页面通常在浏览器或者微信,QQ中打开，经常会分享给自己的好友，此时用户就会看到当前网站的分享链接内容，如果不去编辑链接内容，用户将看到张空白的分享链接，不利于用户的观看，因为不利于网站的传播。下面我们来了解一下property=og的用途。property=og 标签是一种开放内容协议（Open Graph Protocol）的标签，它可以让网页成为一个“富媒体对象”，并被其他社会化网站如Facebook、百度、谷歌等引用和展示。
2023-12-26 16:40:44
1248
原创 【自定义el-date-picker，type=“week“】
el-date-picker：type="week"增加此属性，elementUI自然周选择器，默认选取周日到周六的自然周。修改默认开始时间为自然周的周一。
2023-08-02 18:18:35
2135
原创 【echarts自定义tooltip,给tooltip增加百分号%】【tooltip换行，两列】
echarts自定义tooltip,给tooltip增加百分号%。换行
2023-07-24 18:22:20
2539
原创 【使用fetch+streamsaver对文件进行导出】【解决浏览器下载txt格式的文件，直接打开的问题】
一开始使用a标签来下载.xlsx文件，没有发现什么问题。方法如下elink . href = "文件地址";但是使用这种方式下载txt文件会在浏览器直接打开，不触发下载的功能。
2023-03-10 19:55:10
2232
2
原创 vue双向绑定,子组件修改父组件的值，不需要在父组件中添加方法来接收变化, 用.sync来触发
vue双向绑定,子组件修改父组件的值，不需要在负组件中添加方法来接收变化, 用.sync来触发
2022-07-20 19:52:24
597
原创 el-table-column嵌套el-table-column ，多级表头横向滚动的bug
elementUI的el-table组件，要做到的效果是：多级表头，前两大列固定，后面的列横向滚动。
2022-07-14 19:38:16
3932
1
原创 【JS给元素添加属性：setAttribute；classList.remove；classList.add；】
JS给元素添加属性：setAttribute；classList.remove；classList.add；
2022-06-22 11:07:46
2056
原创 【webpack5图片的引入出现的问题和使用方法】
1、给一个div设置背景图；2、html的img标签设置图片；3、动态修改img的src属性1、背景图也找不到，2、img图片找不到，3、动态修改图片img的src时找不到图片。1、图片未被打包当使用的图片url是动态拼接的，可能会出现webpack没有检测到该图片被引用的问题，所以打包后图片因为不存在而找不到。2、图片路径错误当一个图片被多次引用，当使用的是动态拼接为打包前图片存放的路径会找不到图片，因为打包时会把动态生成的路径直接存下来，不会将其二次转译为打包后相对路径。3、引入webpack需
2022-06-21 19:57:03
1179
原创 【webpack5配置favicon.ico】
一个简单的html页面，配置了webpack5去进行打包，没有用任何框架。纯html+ts+lessGET http://localhost:8080/src/favicon.ico 404 (Not Found)运行起来回报这个错误，在入口文件index.html页面添加下面代码，不行还是会报错，找不到图片，但是换成网页链接就可以这个是可以的（网页链接，没有直接从本地引入）：原因分析：可能是webpack5的原因，图片地址的引入会受影响，不能直接这么引入吧。也有可能是我猜错了，反正我也不知道为
2022-06-21 19:28:39
1006
原创 【使用elementUI的el-upload实现上传文件的功能，上传文件不直接调接口，而是使用按钮提交】【文件上传接口的调用需要使用FormData()构造函数】
项目场景：点击按钮选择文件，然后再点击按钮上传文件（点击按钮的时候调用接口）。解决方法：action属性是必传值，选择完文件之后自动上传。这里需要把acion属性填成 #即：action=“#”使用element UI的 el-update 组件上传.xlsx文件。但是el-update默认是在选择文件的时候直接调用接口，我这边实际需求是，点击另外的按钮来向后台提交文件，调用接口。组件源代码：原因分析：action属性是必传值，选择完文件之后自动上传。action属性是必传值，选择完文件之后自动上
2022-06-21 19:06:09
7110
原创 vue2中provide/inject的使用和响应式传值
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结前言官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。一、基本用法在父组件中使用provide传值，在子组件中用inject接收。// 父组件data() { return { name: "卷儿" }},provide: function() { return {
2022-03-11 16:54:47
17038
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人