- 博客(28)
- 收藏
- 关注
RSS订阅原创 前端压缩字体包方法，8MB可压缩至900K！
等待片刻后你的font文件夹会变成这样，会多出来一个.font-spider文件夹，这个文件夹里是你的原始字体包，原来位置的字体包会变成压缩后的。2、在body里定义要保留的内容，我已经把常用字、字符、字母等等都放在里面了，如果有缺失的直接在里面加上就行，用不到这么多就把不需要的删除掉。最后等待转换完成后下载，可以看到原来8MB的字体包已经变成了900K！2、新建个文件夹，把要压缩的字体放进去，然后新建一个html，如下图。可以看到压缩后的字体包仅有1.6MB，但这还没完，接着往下看。
2025-01-01 14:14:19
359
原创 uniapp炫酷导航按钮及轮播指示器组件
一个拥有炫酷动效的导航按钮和指示器uniapp组件，帮你构建更炫酷的官网、宣传页、产品介绍等页面。这个是固定定位展示，不随页面滚动，且为手动调用内部方法展示隐藏，这在swiper等组件内时非常有用。目标页面出现在可视区域内，显示导航按钮，即将离开可视区时隐藏按钮，按钮出现时机可传参数自定义。目前测试了vue2语法在h5和微信小程序的适配，其他平台理论上也能用。指示器显示和隐藏展示，可以暂停轮播，以动态进度展示当前轮播进度。欢迎大家提意见和bug反馈。
2024-12-16 11:43:38
369
原创 vue3封装一个快速查询表格数据的hook，高亮搜索关键字，减少重复代码，提高产出速度
** 使用此hook快速获取表格数据及实现分页等功能逻辑* @param {Object} params 查询参数* @param {Function} queryApi 要调用的接口* @param {Function} handleRes 自定义接口结果处理，如果接口返回字段和默认取的字段不一致，可传此参数* @param {String} matchFields 匹配字段名，搜索时匹配结果关键字进行高亮*/handleRes?: Fn,) {
2024-12-13 10:33:44
273
原创 uniapp扭蛋机组件
使用方法简单，具有待机动效、抽奖中动效、掉落奖品动效，可以替换奖品图片，足以满足大部分抽奖页面需求。仅测试了vue2、3、h5页面+微信小程序，理论支持全平台。做了一个uniapp的扭蛋机组件，可以前往。
2024-12-07 19:24:03
475
原创 在vue3里使用scss实现简单的换肤功能
先在文件定义并导出初始样式注意此文件必须以.module.scss结尾// while//dark:export {//while//dark然后在base.scss里定义不同模式下的css属性此文件可以随意命名:root {然后在mian.scss里引入这两个文件并使用css变量body {然后在store里定义需要的方法先定义下ts类型（没有ts的可以忽略）再定义个修改css变量的工具类。
2024-12-05 09:39:05
661
原创 uniapp实现一个地方导入，全部页面无需手动使用都能显示的组件
最近uniapp有个需求，要在所有页面都显示客服按钮，虽然使用easycom可以省略导入和注册这两步，但依然需要在每个页面的template里编写才行，感觉这样还是不太好，于是经过我辛苦的搜索，找到了在h5实现的方法。这样这个组件就不用在其他vue页面的template里编写了，所有的页面都能显示，不过只能在h5里用，如果有人知道怎么在小程序里实现这种效果，欢迎留言指导。在main.js里编写，整体实现方法其实和vue2编写js调用式组件差不多。
2024-11-19 16:52:57
380
原创 带后缀的域名，vue打包发布后打开页面空白，路由地址错误
然后找到创建路由的地方，在createWebHistory/createWebHashHistory里增加参数：import.meta.env.VITE_PUBLIC_PATH。如果域名格式为www.xxx.cn/base，且项目没有进行配置处理的话，线上访问会显示空白，无路由页面。打开vite.config.ts，在配置里添加如下代码，base根据实际情况修改。这样打包发布后就能自动拼接前缀，正常访问。
2024-10-18 16:52:05
322
原创 二次封装electron-vite，新增更新推送、最小化等功能
最近要做一个客户端项目，根据技术选型选择了electron，然后找到了一个封装好的框架。相关代码地址：src\renderer\src\App.vue。相关代码地址：src\main\update.ts。相关代码地址：src\main\tray.ts。系统通知及点击通知页面通信。手动检测更新且无新版本。最小化提示及托盘操作。
2024-10-08 17:36:53
418
原创 仿苹果官网底部动效导航按钮，动画核心使用css编写，已封装vue3组件版
苹果官网的动效挺多的，而且都很优雅，今天看到苹果底部的这个动效导航按钮感觉挺有意思，所以仿写了一个，做成了vue3的一个组件，源码地址看文末。先拆解一下动画：显示步骤为：放大显示出圆圈，收缩蓝色边框，显示加号按钮后展开，显示文字隐藏步骤为：先通过缩小隐藏加号按钮，隐藏文字，按钮由长变短为圆圈，然后缩小至消失
2024-09-05 17:12:04
545
原创 使用clip-path实现透明的流光边框卡片
最近看codepen，看到了这种带炫光的卡片效果，感觉很炫酷，实现原理也很简单，有两种实现方式：跑马灯效果：一个盒子，设置背景色，然后使用伪元素宽高比父元素大一点，然后设置渐变背景色，设置动画旋转角度流光效果：子盒子设置比父盒子小一点，能露出想要的边框边距就行，并设置背景色。然后给父盒子添加一两个伪元素，设置背景色，然后旋转伪元素本身。效果差不多就像下面这样↓流光效果
2024-09-04 17:49:44
463
原创 uniapp 踩坑记录：canvas生成海报并分享
最近做了一个生成二维码海报并拉起微信小程序分享的功能，因为要在多处使用，所以做成了一个组件，结果canvas怎么都无法绘制出来，在网上查询后得知，需要在创建示例时加上this。现在绘制问题解决了，可是使用canvasToTempFilePath导出为图片时又报错了，还是同样的问题，需要加上this。
2024-07-10 11:35:17
336
原创 uniapp写的h5页面怎么判断是否内嵌在小程序环境
最近有个需要，要把h5内嵌到他人小程序里，但是有个功能需要区分小程序和公众号来执行不同的操作，在网上搜到了解决办法，记录一下。安装weixin-js-sdk。
2024-07-05 11:48:26
407
原创 threejs学习之环境光和点光源
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影。创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影。添加点光源，必须把castShadow设为true，光源才能投射阴影。// 镜面指数，越高反射效果越强。// 调整渲染器窗口大小。// 加载物体纹理贴图。
2024-05-04 18:11:07
947
原创 threejs学习之自定义几何体BufferGeometry
第二种方法是只编写出需要的坐标，不编写完整绘制点，顺序也可以打乱，通过索引，控制编写的坐标应该按照什么顺序进行绘制。这次学习了两个自定义几何体的方法，第一个通过编写完整的顶点坐标，绘制一个正方形。去掉重复的右上和坐下坐标点，然后编写索引，这样就会按照索引来取坐标点进行绘制。几何体是由坐标点绘制成线，线绘制成三角形，多个三角形拼接成的。
2024-05-04 15:27:35
249
2
原创 threejs学习之材质贴图和环境贴图
使几何体拥有场景反射效果，需要准备好场景6个面的图片，加载到几何体上。反射效果并不是真的让几何体反射场景环境，而是把场景环境贴图加载到几何体物体表面实现。使几何体拥有如皮革、砖块、塑料等材质效果，需要使用对应的材质图片，使用如下方式加载到几何体中。
2024-05-02 19:38:07
510
原创 css响应式属性：clamp()、min()、max()
clamp()接收三个参数，clamp(最小值、首选值、最大值)，如果在页面上，首选值大于最大值，则使用最大值，如果首选值小于最小值，则使用最小值，否则使用首选值。
2024-04-27 12:45:25
1064
原创 前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能
前端聊天怎么实现艾特@功能？高亮@信息，仿微信、qq艾特功能以上篇文章的代码为基准，继续扩展实现艾特@功能，没看过的可以点击链接查看前端实现输入框表情输入及发送，仿b站、qq小表情输入此demo使用vue3源码已上传：源码地址实现效果图声明：这只是个demo，不涉及与后端交互，不过会在该交互的地方标记，如需实际应用于项目，请根据实际情况进行改造完善！父组件主逻辑处理首先修改消息输入框，增加输入事件，用以判断显示输入框。且在上篇中发送消息采用了
2024-03-06 19:12:19
2816
11
原创 前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显
前端实现聊天输入框发送自定义emoji表情功能
2024-03-01 20:32:56
1776
原创 原生JS实现碰撞广告效果
一个可以从左上角开始，往右下角移动，碰到屏幕边界时会往相反方向移动广告效果代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0;
2021-07-20 18:51:54
200
原创 原生JS实现div方块拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: red; p.
2021-07-18 13:24:55
419
原创 原生JS实现透明度轮播效果
js实现透明度轮播效果以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="animation.js"></script> <style type="
2021-07-03 16:26:35
423
原创 原生JS实现水平轮播动画图
JS实现水平轮播动画图具有自动轮播、点击左右切换按钮切换图片、点击下方小圆点切换到对应图片功能由于图片大小限制，只截取了这一段gif完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * {
2021-07-03 16:20:59
311
原创 css实现3d旋转图片魔方
css实现3d旋转图片魔方代码部分：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style type="text/css"> *{margin: 0;padding: 0;} ul li{list-style: none;} div{marg
2021-07-03 16:06:58
875
原创 原生JS实现弹幕功能
原生JS实现弹幕功能代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #box {
2021-07-03 15:43:17
273
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人