你好世界_-优快云博客

原创手搓视频回放时间轴、复制即用

该代码实现了一个时间轴组件，支持触摸和鼠标操作。主要功能包括：1) 24小时刻度显示，包含小时和分钟标记；2) 事件块展示，支持时间区间显示；3) 无限循环滑动效果；4) 当前时间指示器。组件采用三轨克隆技术实现平滑滚动，并处理了触摸和鼠标事件来实现拖拽交互。时间格式化使用moment.js库，支持自定义事件数据展示。

2025-11-28 17:40:53 256

本文实现了一个基于Vue.js的虚拟摇杆组件，主要功能包括：组件结构：包含触摸识别区域(toucharea)、摇杆球体(ball)和底部区域(bottom)三个主要部分核心功能：通过touchstart/touchmove/touchend事件实现触摸交互使用三角函数计算触摸点位置和移动方向提供方向识别功能(上、下、左、右) 摇杆可限制在指定半径范围内移动技术实现：使用requestAnimationFrame实现动画循环通过Math.atan2计算触摸角度采用两点间距离公式控制移动范围

2025-11-28 17:35:38 219

原创针对大屏Echarts的封装优化

Tips: 这样就结束了一个ehchats图表的创建绑定全过程、其实这里的options可以按照官网的柱状、折线、饼图等进行提取出来、然后根据传递不同的参数进行微调、就不用重复书写大量冗余代码、因为我这里就一个大屏首页使用、提取出来意义不大且这样比较易读、大家如果有大量的重复图表书写可以进行优化一下、供整个项目使用。然后抛出一个供调用传参的主函数 (形参分别对应需要展示echarts标识、挂载的dom、是否分配图表点击事件、传递过来的展示数据)首先引入echarts。

2025-01-14 15:13:19 250

原创【无标题】vue2 配置多环境

1、比如我现在需要在原有得开发和线上环境中添加特殊得联通和测试环境，那么我们需要在根目录".env.development"同级添加 “.env.liantong"和”.env.test"两个.dev文件、这些文件内部就是存放我们对应得环境变量和设置。3、这样当我们使用npm run liantong 命令之后我们代码编译之后使用的就是.env.liantong内部的环境变量了，2、当添加完env文件后我们需要去package.json中添加对应环境的启动以及打包命令，参照下图。

2024-06-12 17:17:54 567

原创 vue 插槽和具名插槽快速入门

组件中使用slotsolt的目的就是在使用对应组件的时候展示不同的dom、slot就是一个插槽，我们可以在引入组件的时候插入对应的需要在组件中额外展示的结构、组件中就需要使用slot插槽接受传入的dom结构、slot在组件中定义的位置会让我们传入的结构展示在组件中的对应位置slot有一种叫具名插槽、他会让对他只会渲染对应name值的结构、// 引入的inputNum组件<input-num :num="num" @AddUp="AddUp" @aaa="aaa"> //传递的参数和事件

2021-12-21 16:30:00 208

原创 vue的PC端和移动端分辨率适配

使用lib-flexible和px2rem实现移动端和PC端界面适配注释：lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题、现已不被推荐（因为目前比较主流的适配方案是使用vw和vh的方式进行适配）、lib-flexble是根据屏幕的大小自动分配对应的font-size大小，px2rem是将项目中所书写的所有px单位转换成rem单位。故当前所使用的适配方案其根本用的还是rem实现的适配一、通用步骤 1：下载lib-flexble和px2rem的npm依赖包npm i lib-

2021-12-07 15:11:00 2791

原创 vue2.0组件缓存和vuex辅助函数的理解

vue使用kee-alive缓存组件 1、当组件在使用keep-alive的时候会增加activated、deactivated这两个生命周期钩子函数、 2、需要在引入组件的时候使用keep-alive、并且需要根据条件进行判断、这里使用的是在路由对象中使用keepAlive这个标识进行判断当前渲染的组件是否被缓存<keep-alive v-show="$route.meta.keepAlive"> <el-col :span="20"><r

2021-09-07 16:31:25 295

原创 x2js实现json对象和xml文档格式之前的转换

前端使用webservice传递数据需要借助到 X2JS 插件、npm下载然后需要使用require引入使用new函数创建一个x2js的实例然后使用实例对象里面的方法进行json和xml的互相转换转换规则：（let obj = { uploadOpenMessage:{ _xmlns:'http://webservice.gunark.bjut.com/', arg0:{_xmlns:"",__text:'192.168.2.157'

2021-08-02 14:03:57 818

原创 Echarts使用小技巧

1、使用echarts柱状图时添加左右滚动功能dataZoom:[ { type:"slider",//slider表示有滑动块的， show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:35,//数据窗口范围的结束百分比,表示35%坐标 bottom:"20", }, ],

2021-06-24 11:09:44 9245 1