前端小火龙-CSDN博客

原创 vue + TinyMCE实现富文本编辑器

然后我们可以封装一个方法，以便于我们调用，这里我还加入了图片的上传，假设这个文件是utils/article。

2024-07-15 18:19:26 217

原创 vue3上传图片，进行图片压缩（image-compressor.js）

在图片上传的过程中，如果图片体量过大，会很影响效率，并且在做某些特殊业务的时候，可能对上传图片的大小有限制，我们要么就对上传的文件进行限制，要么就对图片进行压缩后再上传，我这里采用了compressor.js。这样我们就对不同大小的图片进行了一个简单判断，让其大部分保持在1MB左右，各位小伙伴可以根据自身实际情况写不同的算法，这里的。这样，我们就上传了一个压缩的图片，最大可以上传9MB的，并且会把较大的图片尽可能的压缩在1MB左右。就是压缩比例，一个7MB左右的图片，在0.1压缩后，会变成七百KB左右。

2024-07-15 17:59:29 193

原创 vue3进阶，渲染函数使用

vue渲染函数的使用

2024-07-03 18:03:22 1116

原创 VUE 中，过滤器的使用，v-filter

【代码】VUE 中，过滤器的使用，v-filter。

2024-06-28 15:30:10 103

原创前端实现文本复制

前端实现文本复制，vue文本复制

2024-05-15 16:54:33 118

原创 vue3+setup插槽（普通插槽，具名插槽，作用域插槽），超级简单的例子，看了就会用

普通插槽，具名插槽，作用域插槽在vue3+setup中的使用，清晰明了，看了就会用

2024-03-05 16:12:42 203

原创 2024春晚刘谦魔术代码解析

我这里用一个html+js的例子，这样大家可以更好的去看效果。1.根据名字的长度n，把数组的第一位放到最后，一次执行n次。7.好运留下来，烦恼丢出去，依次保留放在最后，丢出牌。2.取出前三张牌，随机插入到牌组中的任意一项中。6.见证奇迹的时刻，七个字，依次放在最后一位。4.南方人北方人：随机数 1-3，插入中间。5.男生女生：随机数1-2，去除。

2024-02-10 18:27:52 436

原创 JS 异步执行在同步之前

用async和await即可。

2024-01-23 15:38:25 428

原创 vue3+vite微信二维码扫描登录教程，简单易懂，提供多种方法，写这个的时候也是遇到很多坑，记录并分享一下心得体会

vue3微信二维码登录

2024-01-08 15:48:36 2860

原创 vue3+vite 连mqtt （遇到的坑的简单的demo）

当然，这只是我个人的一些收集和理解，在后续项目上线过程中，我会在这篇文章中持续更新遇到的坑和需要注意的东西，如果对文章中的内容有不同意见或者发现我文章中错误的地方，可以评论或者私信我。上面就是一个简单的发布订阅和断开链接的demo，这里写的非常详细，因为我是做的支付，所以我这里默认的qos就是2了，这里的qos根据你不同的需要去更改，具体如下。，那是因为直接返回过来的是一个二进制数组，我们需要转化一下，当然，如果你需要的就是二进制数组就不需要转换了。下面就是写了，我这里有一个简单的订阅的例子。

2023-12-27 18:13:02 1132

原创 npm和node版本正常，下载依赖报错，权限不够怎么办,cnpm证书过期解决方法(CERT_HAS_EXPIRED)

找到nodejs文件夹，然后右击，做好相关配置即可。

2023-12-27 16:34:26 506

原创 vue3+vite项目打包注意事项和相关问题，babel使用，ie,es5兼容

vue3+vite项目打包后，可能会出现很多问题，这里我先写一部分，后面慢慢补充首先是配置问题，在vite.config.js中，配置生产可以又以下几种常见的如果你需要然后加入我上面写的中的内容即可，如果那么，这是因为在项目中，vite需要使用terser进行代码压缩，但是terser并没有安装，需要安装这样就可以继续打包了。

2023-12-25 10:37:30 3608

原创前端实现日历，天干地支，黄历，农历，节日，生肖，星座

还有一个中国农历的库，这个可以不装，因为第一个已经有了npm i chinese-lunar-calendar。需要下载一个新的依赖npm install lunar-javascript，取农历黄历星宿天干地支等。还需要一个获取一个月每天日期的库npm i calendar。

2023-12-11 17:17:00 617 1

原创前端如何实现emoji表情

在前端开发中，其实我们的utf-8字符库中，包含了上万种的字符符号，我们直接用就可以，支持十进制和十六进制两种，其实很简单，我写个demo。下面我写了一个简单的例子，循环出来了一些表情包，喜欢的朋友们直接拿去用就可以了。这一段代码循环出来是这样的，相信已经可以满足绝大部分场景了。这就是下面这个表情了，

2023-11-13 22:16:35 795

原创 node版本过高导致项目无法启动，nvm use切换之后，node-v无效

这里需要补充一点，在切换的时候，可能会出现nvm use 失败的情况，但是他也不报错，这个时候需要你创建一个nodejs文件夹。nvm install 14.15.1（请安装上面我让你记住的那个版本，必须安装，没得选）里面包含了nvm安装包，内置了node14和node6，npm也在里面了，是64位的。在输入>nvm use 14.15.1(你想用哪个版本就用哪个版本)打开nvm-setup，先安装nvm（也可以自己百度资源下载）以上结束，其实切换失败就是node先安装了导致的。nvm ls 验证下。

2023-11-13 14:43:44 326

原创前端传参不直接传对象，直接传对象报错，使用FromData()

这是 FormData 的默认行为，因为它通常用于处理表单数据，而表单数据中的字段值都是字符串。使用 FormData 对象的主要优点是它允许你模拟表单数据的发送，这对于上传文件和其他二进制数据非常有用。这样，只有当 this.uploadFile 不是 null 时，才会将文件对象添加到 FormData 中，而当它是 null 时，不会添加任何数据。通常情况下，前端可以以不同的方式将数据发送给后端，包括直接发送 JSON 对象、使用 FormData 传递表单数据、发送 URL 参数等。

2023-11-08 09:55:03 271 1

原创 VUE3中，transition 过渡组件使用

首先上咱们第一个例子，这里我需要实现一种类似轮播图的效果，只不过我这个没有滑动，切换的时候过渡隐去第一个，然后后面的出来，这里的thisImg.img是一个双向绑定的变量，我让他每隔5s换一个src源（transition是vue中自带的一个过渡组件，非常的好用方便，通过这个组件，我们可以在使用 v-if，v-show或者v-for循环中定义一些过渡的渐变效果，下面直接上代码。然后上第二个例子，这里我用v-show去展示或隐藏这个盒子，原理同上，只不过不需要去绑定一个key了。这个定时器切换就不写了哈。

2023-10-18 17:40:01 353 1

原创 vue3+setup动态组件

然后给需要切换的东西添加点击事件，通过这个点击事件，去切换组件，比如这样。首先在主文件中，定义好动态组件，引入组件。引入，setup引入后直接可以用。

2023-10-17 11:21:26 558

原创 element组件库 el-popover气泡卡片手动关闭

首先获取DOM元素，然后直接调用里面方法即可，我这里是setup语法糖。然后给关闭按钮绑定事件，调用里面的方法（我这里只写了方法）

2023-10-11 11:00:54 1601 1

原创 vue3+vite多个生产源在同一个项目中，主生产源崩溃切换备用生产源方法

在前端开发中，如果我们的生产源有多个，我们一般可以采用不同的打包方式去切换不同的生产源，但是如果我们只打包一次，并且我们需要应如下情况：主生产源崩溃了或者无法使用，并且暂时没有人紧急维护的时候，这时候还想让项目正常运行，就需要自动切换使用我们的备用生产源，先让备用服务器顶着，然后等我们维护好再上。

2023-09-04 16:34:49 112 2

原创 vue3+setup语法糖+JS动态组件渲染与改变

【代码】vue3+setup语法糖+JS动态组件渲染与改变。

2023-07-24 11:15:16 241 3

原创 vue父组件向子组件的子组件通信，爷孙通信，provide,inject高阶用法

我们在vue中，如果遇到组件层级嵌套过深的时候，需要父组件向子组件或者子组件的子组件通信的时候，可以使用provide,inject去实现。使用这种方法，无论层级嵌套多深，在祖先组件中暴露方法或数据，都可以在后代组件中拿到。然后在下面的每一个子组件或者子组件的子组件中可以通过injict获取。在祖宗组件中使用prvide向下每一个子组件暴露方法或者数据。

2023-05-24 09:47:55 243

原创 Chrome插件manifest.json文件详解

6. browser_action 定义插件的图标后，点击图标时弹出的页面，以及插件的标题，建议始终保留一个，不设置这个属性图标会是灰色的，设置了后才会亮起来；版权声明：本文为CSDN博主「aiguangyuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。8. content_scripts 内容脚本，可以指定在什么时机向什么页面插入什么脚本或者css资源；7. background 背景页，扩展进程的背景运行环境，可以拦截修改请求等等；1. name 扩展名称；

2023-05-17 14:38:48 1181 1