- 博客(20)
- 收藏
- 关注
RSS订阅原创 vue/vue3实现时间段选中面板封装组件
本文介绍了一个基于Vue3的时间选择器组件（timePicker.vue），用于选择时间段。该组件的横坐标为时间（0~23），纵坐标为星期（星期一~星期日），每个时间点分为两个小格，每个小格代表半小时。用户可以通过鼠标拖动选择时间点，支持点击选择整列或整行，并可以清空选择。选中的时间段会以0和1的形式输出，0表示未选中，1表示选中，共48*7个字符。组件与父组件实现双向绑定，父组件通过v-model接收选中的时间数据。代码部分详细展示了组件的模板、脚本和样式，并提供了父组件的使用示例。该组件可根据具体需
2025-05-20 14:08:50
480
原创 vue3实现视频上传获取视频的时长、宽高、码率等信息
视频的数据传输速率，单位是比特/秒（bps）：2500000（表示2.5Mbps）：185.56（表示3分5秒的视频）评估视频质量（码率越高通常质量越好）：将宽高组合成标准分辨率字符串。：视频的总播放时长，单位是秒。：视频的原始宽度（像素）：视频的原始高度（像素）分类存储不同分辨率的视频。限制上传视频的最大时长。视频播放前的占位图尺寸。响应式布局时计算宽高比。转码时确定目标分辨率。
2025-04-11 15:15:49
888
原创 vue3使用插槽方式来拖拽列表顺序，更改顺序使用拖拽方式
可以直接拖拽列表的顺序来更改列表的顺序，在一些需要拖拽更改顺序的场景中去使用；tableData.customFieldListNew是你的数据列表格式为[{},{}...]，注意插槽需要用#[index]去循环标记每一项，可以根据自己需求来更改子组件。可以直接拖拽列表的顺序来更改列表的顺序，在一些需要拖拽更改顺序的场景中去使用；子组件（通过slot插槽方式进行实现）vue3中列表循环拖拽项功能。
2025-03-31 16:25:27
334
原创 vue3实现一个图片瀑布流，封装成组件
1. 创建组件ImageWaterfall，template部分需要一个容器元素，ref为container，设置position: relative，内部用v-for渲染每个图片项，每个项的样式设置为position: absolute，根据计算的left和top定位，宽度为columnWidth，高度自适应。或者，组件内部根据容器宽度计算出合适的列数，比如设定每列的最小宽度为200px，然后列数是containerWidth / 200取整。所以在组件挂载后，需要获取容器的宽度，然后计算列数。
2025-02-14 11:51:23
1131
原创 vue2/vue3中vue-router路由跳转与打开新窗口携带参数
在一些需求中经常遇到跳转页面，但是产品让跳转页面的同时打开一个新窗口方便用户进行对比数据，接下来就是跳转页面打开新窗口的方法。
2025-01-07 11:33:44
2579
原创 vue3封装一个轮询hooks，优化（短）轮询方案，离开页面超过15秒不在轮询，15秒后回到页面立即调用需要轮询的方法然后开启新轮询
使用vue3封装一个hooks轮询，当用户切换到其他标签页或最小化浏览器时超过15秒后就不在轮询，回到页面后立即调用需要轮询的函数然后再开启新轮询，15秒内回到页面不会摧毁之前的轮询还会继续之前轮询，这样防止用户来回点击切换页面。封装hooks轮询函数（const {startPolling,stopPolling} = useVisibilityPolling([getList,getDate],15000)，其他页面需要直接调用hooks函数即可。
2024-09-19 15:55:03
1319
原创 js手写数组常用的方法（面试常问）push、pop、unshift、shift、splice、indexOf、concat、reverse、forEach、map、filter、every等方法
面试中经常会问到，比如让手写一个push方法等等，这期就写一些数组常用的方法喜欢的话可以关注一下博主。
2024-04-02 16:37:00
481
1
原创 前端vue，js封装常用的各种方法，处理数组，对象，关闭当前tab，返回上一页，清除登录信息，获取字典名称，根据生日计算年龄，手机号加密，随机数，等等
上一章封装了一些常用的正则表达式方法，这章封装数组、对象等方法（如果对正则感兴趣可以查看上一章博客）根据上一章的方法继续封装更实用的好方法，在我们前端中一个方法好几个地方用，那么你写好几遍就会增加代码体积，那么这期就封装一些实用的好方法，方便我们复用，简化代码。
2024-04-02 16:17:18
394
1
原创 Vue中封装前端常用的正则校验方法，正则表达式
我们在做Vue项目开发的时候，肯定会经常遇到正则表达式，例如手机号，邮箱，密码和数字，每次验证都需要去查询，浪费时间不说，也造成代码冗余，我也遇到过，那我就自己封装一个吧，方便大家使用查询。可以减少咱们的代码量还可以方便我们在前端各大项目中使用。
2024-03-29 16:40:56
552
1
原创 uniapp+vue+css手写步骤条组件
首先看需求是步骤条，然后看组件中没有自己想要的步骤条，那么就的自己去写因为有小圈还有大圈所有上面的主体部分的进行判断，很好理解的上面都有注释，当你的数组长度最大时就不显示线条，反之显示现在几乎实现了整体部分，但是bug出现了，就是你的部分如果高的话就会把下面部分挤出去，线条就不能正常链接了，这个问题怎么解决呢！！！别着急看下面
2024-02-05 16:37:08
1515
2
原创 vue使用print-js利用富文本编辑器mustache语法实现打印功能
很多人在接到打印需求的时候很迷茫，这里我就为大家讲解我的一种思路和做法前端框架使用vue，技术使用print.js库实现打印功能因为我们打印的时候不可能都进行一个编辑，只会编辑一个mustache语法进行循环遍历，所有我这里进行了一个判断遍历处理每个 td 元素，进行判断是那个list数组进行循环，然后就把他放在vue的实例上
2024-02-05 15:45:03
2511
1
原创 手写call、apply、bind原生实现
大家看这篇文章之前如果已经了解如何使用call、apply和bind了，那么请继续往下看。区别：三者都可以改变函数的this对象指向三者第一个参数都是this要指向的对象，如果没有这个参数或参数为undefined或null，则默认指向全局window三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind返回的是一个改变了this指向的函数，便于稍后调用，不像call和apply会立即调用；
2023-10-21 10:07:00
143
1
原创 vue3+node+Element-Ui+spark-md5实现大文件上传、断点续传、秒传、多大文件上传
在Vue项目中，大图片和多数据Excel等大文件的上传是一个非常常见的需求。然而，由于文件大小较大，上传速度很慢，传输中断等问题也难以避免。因此，为了提高上传效率和成功率，我们需要使用切片上传的方式，实现文件秒传、断点续传、错误重试、控制并发等功能，并绘制进度条。
2023-10-21 09:41:26
577
1
原创 Pinia和vuex的区别和优缺点
通过最近学习vue2和vue3,发现Pinia与VueX有相同之处，也有很多不同之处。提示：以下是本篇文章正文内容，下面案例可供参考。
2023-10-18 10:04:33
820
1
原创 uniapp+vue3+node实现视频通话（移动端）
/ 视频(跳转推流)Live()})tip: 3 //视频});})// 视频接收（socket）// })})});// 拒绝视频// // 对方拒绝发送服务器});})// // 对方拒绝接收console.log('拒绝接收222222', msggs);});// 接收视频// // 对方接收视频发送服务器});})// // 对方接收视频接收// console.log('接收视频接收', msggs);});// 接收语音。
2023-10-08 11:56:58
2847
4
原创 uniapp（vue3）+node.js+websocket（实现实时通信效果）
相较于面对面的沟通，人们在线上文字对话时较难感知对方的状态或情绪，而发送表情刚好可以弥补这一缺憾。如果还没有打开就会是未读消息，消息数加一，就在我们的头像右上角，大家可以看到小红数，当打开聊天框后小红数才会消失。语音可以帮助我们快速回复对方，在发语音时,我们可以通过声音来表达自己的想法和情感,与对方进行交流和互动。4.1、用户端uniapp是一个基于vue3的框架，首先在onMounted生命周期中判断是否链接后端。4.3、把你要发送的内容发给服务器，然后在看服务器是否接收。
2023-09-04 11:51:32
2136
1
原创 js和react基础
高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。将多个组件的相同逻辑代码，抽象到HOC中，让组件更有结构化，更易于复用。HOC不破坏传入组件的特性，只通过组合形成新组件。HOC是纯函数，没有副作用。比如redux中的connect;比如react-router中的withRouter。
2023-06-10 09:03:26
106
原创 react面试题
在react中每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享等，如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后期我们将比较难以维护，所以我们可以把数据进行集中式的管理，redux就是一个实现上述集中管理的容器的工具，redux并不是只应用在react中，还与其他界面库一起使用，如VueES6引入了一种新的原始数据类型Symbol，表示独一无二的值。
2023-05-25 09:50:22
352
1
空空如也
vue3批量上传，切换浏览器标签页不执行代码问题
2025-06-29
elementui上传结合oss接口断点续传，现在只差停止上传和继续上传，各大精英看下
2024-10-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人