念你那丝微笑-优快云博客

原创 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 79162 60

原创 Vue3 + TypeScript 实现文本差异高亮（diff viewer）

于是，我决定基于 diff-match-patch 库，封装一个轻量级的 Diff 文本对比组件，用以直观地展示两段文字之间的差异。通过 diff_cleanupSemantic 合并相邻的小改动，让结果更符合人类阅读逻辑。在最近的项目中，需要实现文章内容对比功能，以便清晰展示文本中新增、删除和修改的部分。使用 diff_main(original, polished) 得到差异数组。这是 Google 开源的文本差异算法库，能快速计算出两个字符串的差异。

2025-10-31 15:15:18 177

原创 Vue3+TS 实现页面选中文字后弹出悬浮操作按钮（插入 / 复制 / 收藏）

当选中文字时，都会出现一个悬浮的操作按钮，在选区上方自动显示浮动操作框，支持「插入」、「复制」、「收藏」三种操作，也可自定义扩展。

2025-10-16 11:27:14 287

原创 vue实现批量导出二维码到PDF（支持分页生成 PDF）

前端根据每条数据生成对应的二维码（Base64 图片）。将二维码和名称排版插入到 PDF。当一页二维码放满后，自动分页。导出并保存 PDF 文件。整个过程纯前端实现，无需后端参与

2025-10-14 15:27:32 224

原创 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 379

原创 vue2使用WaveSurfer实现简易的音频播放

本文介绍了在Vue2后台管理系统中使用wavesurfer.js实现专业音频播放器的方案。针对原生audio标签在拖动进度条时的问题，作者选用wavesurfer.js实现音频波形可视化、进度跳转、播放控制等功能。文章包含完整的Vue2组件代码，详细展示了如何初始化波形图、处理时间格式化、实现播放/暂停/停止功能，以及调节播放速度。该方案通过直观的波形显示和流畅的控制交互，有效提升了PC端播放移动端录音文件的用户体验。

2025-08-25 15:14:18 451

原创数组处理方法总结：改变与不改变原数组

改变原数组的方法: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 1013

原创前端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 1548 1

原创前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据

【代码】前端常用的上传下载文件的几种方式，直接上传、下载文件，读取.xlsx文件数据，导出.xlsx数据。

2023-08-13 11:59:48 2872

原创前端面试理论基础

【代码】前端面试理论基础。

2023-07-17 08:59:56 941

原创正则表达式常用的函数及用法说明

test()：测试一个字符串是否符合某个正则表达式的规则，返回布尔值。match()：在一个字符串中查找符合某个正则表达式的内容，返回匹配结果的数组或 null。replace()：将一个字符串中符合某个正则表达式的内容替换为指定的字符串或函数，返回替换后的新字符串。search()：在一个字符串中搜索符合某个正则表达式的内容，返回第一个匹配结果的位置，如果没有找到则返回 -1。split()：将一个字符串按照符合某个正则表达式的内容进行分割，返回分割后的数组。例如：

2023-05-12 15:26:12 2714

原创枚举的基本用法（声明、取值、遍历、枚举转数组、枚举转字符串）

因为枚举的遍历比较特殊，会把枚举的名称和值一起输出，所以在使用时，我们要根据自己的使用场景转换成自己需要的类型。

2022-12-14 11:22:36 1757

原创 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 4496

原创 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 3738

原创 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 4576

原创 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 1274

原创数组根据对象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 6334

原创 Vue2+Ts之Provide / Inject用法

Provide / Inject的定义Provide / Inject：父级组件向其所有子孙后代注入一个依赖（@Provide ），不论组件层次有多深，都可以通过（@Inject）接收父级组件传过来的任何类型的值，并在其上下游关系成立的时间里始终生效。最近在写项目的时候，常需要对多个子组件的表单进行编辑/查看模式的切换，一开始用Prop进行传值进行控制，当组件多的时候使用Prop还是挺繁琐的，这样的话，使用 Provide / Inject就可以快速实现功能的切换父组件<template&g

2022-03-16 15:34:21 3787

原创用vue+ts实现元素鼠标拖动完整代码

实现效果相关使用属性 // clientX 鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变； // clientY 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变； // element.offsetTop 指 element距离上方或上层控件的位置，整型，单位像素。 // element.offsetLeft 指 element距离左方或上层控件的位置，整型，单位像素。 // element.offsetWidth 指 element控件自身的宽度，整型，

2021-11-05 10:43:38 984

原创 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 1019

原创 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 4679

原创 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 13709

原创 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 627

原创 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 6644 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 46638 5

原创 JS的null和undefined的深度理解与比较

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。null==undefined//truenull===undefined//falsenull转数值为0，undefined转数值为NaN

2021-07-16 15:05:11 363

原创 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 1800

仿小米商城html+js.rar

基于vue+ts的数学口算功能项目的实现

空空如也