- 博客(65)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 JS实现轮播图的三种简单方法。
Js实现轮播图01实现思路这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：实现效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图实现01</title> &
2020-08-13 23:55:00
79668
60
原创 2026年Vue前端面试准备
本文总结了Vue项目性能优化的多个方面：1）首屏加载优化：通过路由懒加载、分包/Tree Shaking、按需引入组件库、CDN加速和图片优化（WebP/懒加载/压缩）减少首屏资源；2）渲染优化：合理使用v-if/v-show、key属性和computed缓存；3）组件优化：keep-alive缓存组件、虚拟列表技术优化大数据渲染；4）网络优化：防抖节流、请求缓存和并发控制；5）浏览器层优化：使用transform/opacity替代top/left减少重排。作者还分享了实际项目中应用这些优化手段的经验。
2026-05-09 17:14:18
416
原创 uni-app开发，为什么 H5 正常、微信小程序频繁踩坑？
JS 可以直接操作 DOM数据变化 → 视图几乎同步更新v-model都是“最终裁判”JS 线程↓DOM↓页面立刻变化这是一个单一运行环境。可以命令式（ref / 调方法）必须声明式（状态驱动）v-show 在 th / td 不生效H5 是“我命令页面怎么变”小程序是“我请求页面帮我变”当你真正接受这一点，80% 的坑都会自动消失。
2026-02-03 11:50:07
603
原创 微信小程序中的 UnoCSS：哪些能用，哪些一用就报错（[ WXSS 文件编译错误 ] ./app.wxss(7997:2599): unexpected `\`）
UnoCss部署到微信小程序报错，[ WXSS 文件编译错误 ]./app.wxss(7997:2599): unexpected `\` at pos 170113(env: Windows, mp, 1.06.2504060; lib: 3.14.0)
2026-02-02 11:01:14
683
原创 uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS（避坑版）
本文介绍了在Vue3+uni-app项目中使用UnoCSS的配置方法及选型建议。主要内容包括：1) 通过pnpm安装UnoCSS稳定版0.55.7；2) 配置uno.config.ts和vite.config.ts文件；3) 在main.ts中引入。文章分析了不推荐Tailwind和unocss-preset-weapp的原因：Tailwind体积大且配置复杂，而preset-weapp的rpx单位会与uView Plus的px单位冲突。最终建议：uView Plus+uniApp项目推荐使用UnoCSS，
2026-01-09 17:34:43
570
原创 vue3+ts在uniapp项目中实现自动导入 ref 和 reactive
摘要 本文介绍了在uni-app + Vite项目中正确使用unplugin-auto-import插件的解决方案。由于最新版本(20.x)与uni-app存在ESM兼容性问题，建议安装0.18.6版本。配置步骤包括：安装兼容版本、修改vite.config.ts配置、在tsconfig.json中包含auto-imports.d.ts声明文件。最终实现Vue3常用API(ref/reactive等)的自动导入，同时解决TypeScript报错问题。文章特别强调版本选择的重要性，0.18.6是uni-app
2026-01-09 11:28:42
758
原创 Vue3 + TypeScript 实现文本差异高亮（diff viewer）
于是，我决定基于 diff-match-patch 库，封装一个轻量级的 Diff 文本对比组件，用以直观地展示两段文字之间的差异。通过 diff_cleanupSemantic 合并相邻的小改动，让结果更符合人类阅读逻辑。在最近的项目中，需要实现文章内容对比功能，以便清晰展示文本中新增、删除和修改的部分。使用 diff_main(original, polished) 得到差异数组。这是 Google 开源的文本差异算法库，能快速计算出两个字符串的差异。
2025-10-31 15:15:18
406
原创 Vue3+TS 实现页面选中文字后弹出悬浮操作按钮（插入 / 复制 / 收藏）
当选中文字时，都会出现一个悬浮的操作按钮，在选区上方自动显示浮动操作框，支持「插入」、「复制」、「收藏」三种操作，也可自定义扩展。
2025-10-16 11:27:14
527
原创 vue实现批量导出二维码到PDF（支持分页生成 PDF）
前端根据每条数据生成对应的二维码（Base64 图片）。将二维码和名称排版插入到 PDF。当一页二维码放满后，自动分页。导出并保存 PDF 文件。整个过程纯前端实现，无需后端参与
2025-10-14 15:27:32
351
原创 vue使用html-docx基于TinyMCE 导出Word 文档
1.从 TinyMCE 获取 HTML 内容（如果是 Markdown，可以先转成 HTML）。2.使用 html-docx 把 HTML 转换为 Word 的 Blob 对象。最近有个需求基于TinyMCE富文本插件导出word，导出并保持富文本样式不变，3.动态创建 a标签，触发浏览器下载。
2025-09-23 11:44:26
569
原创 vue2使用WaveSurfer实现简易的音频播放
本文介绍了在Vue2后台管理系统中使用wavesurfer.js实现专业音频播放器的方案。针对原生audio标签在拖动进度条时的问题，作者选用wavesurfer.js实现音频波形可视化、进度跳转、播放控制等功能。文章包含完整的Vue2组件代码，详细展示了如何初始化波形图、处理时间格式化、实现播放/暂停/停止功能，以及调节播放速度。该方案通过直观的波形显示和流畅的控制交互，有效提升了PC端播放移动端录音文件的用户体验。
2025-08-25 15:14:18
590
原创 数组处理方法总结：改变与不改变原数组
改变原数组的方法:push()、pop()、shift()、unshift()、splice()、reverse()、sort()、copyWithin()、fill()。不改变原数组的方法:concat()、slice()、map()、filter()、reduce()、reduceRight()、join()、includes()、indexOf()、find()、findIndex()、every()、some()。
2024-09-06 13:04:07
1144
原创 前端XLSX解析Excel数据处理多种日期格式转换问题
Excel的时间和XlSX解析之后获取的时间会不一致。例如 2024/6/19 获取的时间为 Wed Jun 19 2024 23:59:17 GMT+0800，少了43秒，为了解决这个问题，需要特别处理一下。 支持转换的时间格式 - 2019.07.09 - 2019/07/09 - 2019年07月09日 - 44642; // Excel 日期 转换为"YYYY-MM-DD"或"YYYY-MM-DD 格式
2024-06-20 15:53:17
1712
1
原创 前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据
【代码】前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据。
2023-08-13 11:59:48
2952
原创 正则表达式常用的函数及用法说明
test()：测试一个字符串是否符合某个正则表达式的规则，返回布尔值。match()：在一个字符串中查找符合某个正则表达式的内容，返回匹配结果的数组或 null。replace()：将一个字符串中符合某个正则表达式的内容替换为指定的字符串或函数，返回替换后的新字符串。search()：在一个字符串中搜索符合某个正则表达式的内容，返回第一个匹配结果的位置，如果没有找到则返回 -1。split()：将一个字符串按照符合某个正则表达式的内容进行分割，返回分割后的数组。例如：
2023-05-12 15:26:12
2851
原创 枚举的基本用法（声明、取值、遍历、枚举转数组、枚举转字符串）
因为枚举的遍历比较特殊，会把枚举的名称和值一起输出，所以在使用时，我们要根据自己的使用场景转换成自己需要的类型。
2022-12-14 11:22:36
1798
原创 Vue3+Ts＜script setup＞组合式API的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject、Ref用法
一、页面效果图二、父组件代码<template> <div class="user-box"> <div> <h2>父组件:</h2> <p>propRef：{{ propRef }}</p> <p>propReactive：{{ propReactive }}</p> </div> <div>
2022-05-29 19:58:23
4555
原创 Vue3+ts的setup()函数和＜script setup＞通过ref获取子组件值和方法的两种用法
一、setup()函数通过ref获取子组件的值或方法父组件<template> <div> <Child ref="childRef" /> </div></template><script lang="ts">import { onMounted, ref, reactive, nextTick, toRefs, computed, provide } from 'vue';import Chi
2022-05-29 19:50:07
3778
原创 Vue3+Ts的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
Vue3的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
2022-05-29 17:43:06
4619
原创 vue引入SlickList, SlickItem实现元素的拖动
HTML最近看到vue有直接实现拖动的小组件，试了试，感觉还挺简单的，就可以实现元素的拖动，直接数组的元素的位置移动。 <div> <SlickList v-model="items" axis="xy" :distance="5" style" display: flex; gap: 10px;flex-wrap: wrap;"> <SlickItem v-for="(item, index) in items" :key="index
2022-04-21 10:54:39
1303
原创 数组根据对象id去重的几种方法
arr = [ { id: 1, name: '张一', age: 20 }, { id: 1, name: '张一', age: 20 }, { id: 2, name: '张二', age: 20 }, { id: 3, name: '张三', age: 20 }, ];方法一通过forEach再通过some方法判断数组是否包含当前对象id，不包含则添加 some() { let some: any = []; this.arr.forE..
2022-03-16 17:17:56
6401
原创 Vue2+Ts之Provide / Inject用法
Provide / Inject的定义Provide / Inject： 父级组件向其所有子孙后代注入一个依赖（@Provide ），不论组件层次有多深，都可以通过（@Inject）接收父级组件传过来的任何类型的值，并在其上下游关系成立的时间里始终生效。最近在写项目的时候，常需要对多个子组件的表单进行编辑/查看模式的切换，一开始用Prop进行传值进行控制，当组件多的时候使用Prop还是挺繁琐的，这样的话，使用 Provide / Inject就可以快速实现功能的切换父组件<template&g
2022-03-16 15:34:21
3829
原创 用vue+ts实现元素鼠标拖动完整代码
实现效果相关使用属性 // clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； // clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； // element.offsetTop 指 element距离上方或上层控件的位置，整型，单位像素。 // element.offsetLeft 指 element距离左方或上层控件的位置，整型，单位像素。 // element.offsetWidth 指 element控件自身的宽度，整型，
2021-11-05 10:43:38
1012
原创 ts(TypeScript)中?.和??分析及运用
今天在写个人项目功能开发中，在给对象属性赋值过程中总是报一些莫名其妙的错误，经过调试发现在赋值的过程中有些属性为null或者undefined的时候会报错。具体用法如下：?.用法当?前的属性或者值为真时返回当前属性的值，否则返回null或者undefined//a?.b ---> a && a.b ? a.b : undefinedthis.toDoListEditData.name = this.person?.name;//相当于this.person&&
2021-09-22 17:58:44
1051
原创 Vue动态添加、删除对象属性
最近对对象相关操作处理比较多，然后发现对象还可以这么玩 let student = { id: 1, name: '学生1', class: '001' }; //通过student['对象新的属性key']来给对象添加新的属性 student['sex'] = '男'; student['age'] = 18; console.log(student); //通过delete可直接删除对象的属性 delete student.class; c
2021-08-27 11:27:58
4708
原创 Vue路由跳转的几种方式及解释说明
一、router-link（声明式路由，在页面中调用）在Vue中，router-link称为声明式路由，常放在页面中，:to绑定为跳转的目标地址，通过点击实现跳转，路由的跳转主要有两种形式，一种是通过name，另一种是path。1.1 路由不带参数 <router-link :to="{ name: 'word' }">路由name方式跳转首页</router-link> <router-link :to="{ path: '/word' }"&g
2021-08-07 00:29:27
13758
原创 yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。
最近在安装yarn的时候，突然给我报了这个错，试了好久才发现是这个问题yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Po licies。所在位置 行:1 字符: 1+ yarn+ ~~~~已解决：报错是因为没有权限，只需要指
2021-07-30 16:20:33
641
原创 js数组常用方法（返回Boolean,索引，当前元素，数组，遍历）总结
forEach let arr: any[] = [1, 2, 3, 4]; arr.forEach((item,index)=>{ console.log('值:',item,'索引:',index); });includes let arr: any[] = [1, 2, 3, 4]; let result = arr.includes(1, 2); //第一个参数为搜索的元素，第二个是开始搜索的位置,返回值是true或false
2021-07-23 10:17:07
6719
3
原创 Vue在页面和方法中分别通过遍历对象获取对象的键（key）和值（value）
最近通过对对象相关知识的深入学习，我发现对对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的key和value。情况一：在页面中遍历对象获取对象的键和值定义一个变量 obj:object={a:1,b:2,c:3};//用于在页面中调用在页面中使用v-for遍历出对象的key和value <div> <h1> 获取对象的key和value </h1
2021-07-22 17:24:10
46840
5
原创 JS的null和undefined的深度理解与比较
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。null==undefined//truenull===undefined//falsenull转数值为0，undefined转数值为NaN
2021-07-16 15:05:11
392
原创 vue+ts：全局过滤器和局部过滤器从注册到具体使用的详细过程
在Vue.js中Filter过滤器是什么在Vue.js中Filter常用于拦截数据，对数据进行进一步处理和展示，分为全局过滤器和局部过滤器，在网页开发中，最常用到的是对时间的处理，比如我们创建个时间，new Date（）时间是中国标准时间（Tue Jul 13 2021 16:50:43 GMT+0800 (中国标准时间)）这样我们就可以通过使用过滤器处理展示为我们日常看到的时间格式：2021-07-13 16:50:43，说到底，过滤器就是拦截数据对数据进行再次处理并返回数据，在Vue.js中常在
2021-07-13 17:42:14
1843
原创 antv自定义表单验证方法以及具体实现（身份证，手机，邮箱验证）
实现效果实现思路通过antv表单验证api接口得知，如果想自定义表单校验规则需要使用validator字段调用自定义校验方法，自定义方法需要传rule, value, callback这三个参数。知道这些就可以动手敲代码了，具体实现如下HTML模块 <h1>表单正则验证</h1> <a-form-model :model="checkData" :rules="rules" ref="ruleFo
2021-07-07 10:44:22
1874
原创 ant对a-date-picker做时间限制处理（选择下个时间不能早于上个时间）
HTML标签模块 <a-row> <a-col :span="12"> 开始时间：<a-date-picker style="width: 100%" @change="onChange" valueFormat="YYYY-MM-DD" v-model="startTime" :disabled="readon
2021-07-05 17:03:53
2127
原创 [antdv: FormModel] model is required for resetFields to work
今天在用Vue+ant的UI框架进行表单绑定的时候出现报错 Warning: [antdv: FormModel] model is required for resetFields to work.通过不断测试才发现是因为没有在表头使用 :model="xxx"进行数据绑定 <a-form-model :model="form" :rules="rules" ref="ruleForm" :layout="'horizontal'" :labelCol="{ span: 5 }">
2021-06-01 11:15:12
22014
4
原创 vue+ts：Vue.set在对象和数组中的具体运用
VUE+TS的Vue.set为对象设置（添加）一个属性有时候在使用的时候需要一个唯一的主键绑定，如果没有唯一主键就可以使用Vue.set给对象新加一个属性（组合属性）作为一个唯一值 this.operationRecordData = JSON.parse(JSON.stringify(this.table1.operationLogs)); this.operationRecordData.forEach((item, index) => { //item为数组
2021-05-27 11:28:41
1794
原创 vue ts父组件使用ref调用子组件的方法或获取子组件的值
vue2.0 ts父组件使用ref调用子组件的方法和值父组件中用ref绑定子组件，然后通过this.$refs.名字就可以获取子组件的值或调用相关方法。父组件<template> <div> <div class="parent"> <h1>父组件名字:{{parentName}}</h1> <a-button type="primary" size="large" @click="refGetCh
2021-03-05 12:20:30
3189
7
原创 vue ts 子组件使用Emit给父组件传值
vue ts 子组件使用Emit给父组件传值在子组件:中使用 this.$emit(‘getChildInput’,value)函数给父组件传值，父组件:使用 @getChildInput="getChildInput"来接收传过来的值，其中"getChildInput"为接收的方法，需要自己定义，其中参数为子组件传过来的值，具体用法见代码实现。子组件<template> <div> <div class="child"> <div&
2021-03-05 11:56:19
2853
原创 vue ts使用Prop向子组件传值
vue ts使用Prop向子组件传值在父组件中想要给子组件传值，可以在子组件使用 :parentName(子组件通过@Prop获取该值的变量名)=‘parentName’（想要传的值），这样，在子组件里可以通过 @Prop({ default: “default value” }) parentName!: string;获取父组件传过来的值了。父组件<template> <div> <div class="parent"> <h
2021-03-05 11:35:05
2420
基于vue+ts的数学口算功能项目的实现
2020-11-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人