自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(84)
  • 收藏
  • 关注

原创 在Vue3中nextTick的使用详解

是Vue.js的最新版本,带来了许多改进和新特性。其中一个重要的改进是对nextTick API的重构和改进。在Vue3中,nextTick的使用方式与Vue2有所不同,本文将详细介绍在Vue3中如何使用nextTick。

2024-05-11 14:49:35 653

原创 elementui组件@change事件想要传递多个参数,除了事件默认返回的参数,还传递自定义的参数

通常想在组件自带的函数会返回默认的值,有时候想要传递一些自定义的参数。方法1:使用$event。

2024-05-11 14:47:44 245

原创 vue3中el-tree设置默认选中节点和展开节点

【代码】vue3中el-tree设置默认选中节点和展开节点。

2024-04-28 17:02:40 519 1

原创 websocket 连接,http 协议下用 ws, https 协议下必须要使用 wss

为了保证在 HTTPS 网站下的数据安全与一致性,必须使用“wss"。如果在 HTTPS 网站下使用“ws”,浏览器会报错,因为它将“ws"视为不安全的链接,因此它会阻止建立此类连接。“ws”通过 http 传输,"wss"通过 https 传输。在 Https 请求中,每个数据传输包都被加密,在浏览器与服务器角度,安全性要显著高于 Http。https 相当于使用 http+ssl 认证,使用 https 时 websocket 访问(比如建立链接时)必须要使用 wss。

2024-04-19 17:28:14 406

原创 JavaScript中的Promise、Async和Await

是JavaScript中用于处理异步操作的一个关键概念。它代表了一个尚未完成但预期在将来完成的操作。使用Promise,可以避免所谓的“回调地狱”,即多层嵌套的回调函数,从而使代码更加清晰和易于维护。它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。关键字,可以将任何函数转换为返回Promise的异步函数。语句实现,这使得异步代码的错误处理更加直观。的另一个优点是可以通过链式调用。方法来处理复杂的异步流程。中,错误处理可以通过传统的。

2024-04-13 18:01:42 321

原创 js str字符串和arr数组互相转换

只能使用逗号作为分隔符,如果需要按照其他方式连接数组中的元素,需要用其他方法。对每个元素进行操作,适用于需要对字符串进行转换的情况。可以自定义连接方式,通过回调函数对每个元素进行操作。可以使用指定的分隔符连接数组元素。返回的是原字符串的数组。返回一个新的数组实例。

2024-04-08 22:25:11 195

原创 vue2使用axios封装请求数据

第二步:导入完成之后,在script里面编写请求代码,可以写在methods让按钮调用数据,也可以写在created()里面,在这里我写在methods里面,然后让created调用数据。(2)下面的这个文件,包括封装请求,以及拦截器,还有设置了请求头(里面的代码需要根据自己个人需求修改)第一步:在自己的vue组件当中,导入我们刚刚写好的封装(仅供参考,可以参考下面代码,根据自己需求修改)下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、先下载好axios请求依赖。

2024-03-31 22:58:30 406

原创 Git 的 cherry-pick

使用 cherry-pick 操作,我们可以复制指定的提交,然后将其应用到当前分支上,这个提交就成为了当前分支上的一个新的提交。cherry-pick 操作可以方便地将某个分支上的某个功能或修复应用到另一个分支上,而无需将整个分支合并过来。有时候,我们需要将某个分支上的某次提交(commit)应用到当前分支上,这时候就可以使用 cherry-pick 操作。它可以帮助我们将某个分支上的某次提交复制到另一个分支上,而无需将整个分支合并过来。

2024-03-24 20:54:25 292

原创 前端实现websocket通信讲解(vue2框架)

一、首先写一个websocket的工具,方便直接调用websocket方法。二、写一个状态机来管理数据,将后端传来的数据存到state.message。

2024-03-15 16:36:09 585

原创 【echarts】xAxis鼠标事件失效问题

出现x轴标签文字过长重叠问题,在pass掉标签倾斜、换行方案之后最终决定限制文字长度,超出以…占位,鼠标悬浮时显示完整tooltip。无法触发,只有bar区域是可触发的。但编写过程中发现xAxis。

2024-03-08 16:44:45 461

原创 完美解决多个Echarts图表自适应窗口、父容器宽高,并进行性能优化

如果父容器是自适应的, 那么使用了就不需要再使用最后请不要忘记在页面销毁前调用取消关于更多请看。

2024-03-03 15:54:12 1285

原创 js 如何判断对象自身为空

判断一个对象是否为空时,使用方法最为完美。

2024-02-25 19:34:21 673

原创 列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案

后台返回的分页数据需要实现滚动条触底加载下一页, 用了的指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。

2024-01-19 16:36:20 578

原创 Echarts图表坐标轴文字太长,省略显示,鼠标放上显示全部(vue)

【代码】Echarts图表坐标轴文字太长,省略显示,鼠标放上显示全部(vue)

2024-01-19 16:30:39 669

原创 Echarts图表如何利用formatter自定义tooltip的内容和样式

我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型图,除了横轴和纵轴表示的时间和成功率之外,希望额外展示另两种数据,并且小圆点要和线的颜色相同。在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据。此处主要利用回调函数的形式去实现。具体写法请参照ECharts官网。:用来格式化图例文本,支持字符串模板和回调函数两种形式。但是,官方提供的样式有时不适用所有的开发场景。

2024-01-12 09:59:41 1665

原创 Echarts—词云库(echarts-wordcloud)使用

echarts-wordcloud是基于echarts的一个插件,所以我们要首先安装echarts包,然后再安装echarts-wordcloud的包,这里我的练习项目安装的版本;当然,你可以随意安装你需要的版本;

2024-01-05 16:49:17 1707

原创 Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)

【代码】Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)

2023-12-27 16:53:40 1155

原创 echarts图表默认选中高亮

【代码】echarts图表默认选中高亮。

2023-12-27 16:49:03 1247

原创 vue点击当前盒子以外任意地方隐藏当前盒子

方法一: contains方法 用于判断DOM元素的包含关系;需要注意的是:它以HTMLElement为参数,且返回布尔值。方法二: 可以给盒子加上阻止冒泡 .stop。

2023-12-22 17:21:11 1280

原创 vue3 element-plus 输入框 clearable属性 聚焦时宽度会变化

因为你的代码中el-input是没有宽度的, 所以实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度。可以写css固定el-input宽度来处理。

2023-12-22 17:17:15 1913

原创 vue3+leaflet天地图开发

【代码】vue3+leaflet天地图开发。

2023-12-15 18:46:37 894

原创 input、el-input输入框输入规则

再改改样式,隐藏按钮,靠左对齐,最后效果和普通的input无异。设置精度precision,即可四舍五入;这个是我最近才发现的,方便多了TT。

2023-12-09 19:01:06 1121

原创 Vue中下载不同文件的几种方式

当在中需要实现文件下载功能时,我们可以有多种方式来完成。下面将介绍五种常用的方法。

2023-12-03 22:30:18 2718

原创 element 的 Notification 通知,自定义内容

【代码】element 的 Notification 通知,自定义内容。

2023-11-27 12:58:03 775

原创 路由导航守卫

【代码】路由导航守卫。

2023-11-06 10:50:07 58

原创 pinia的使用和持久化存储

1、装包:npm i pinia-plugin-persistedstate。1、Pinia 是 Vue.js 的轻量级状态管理库,是vuex的升级版。这样就达到了pinia数据持久化的目的,再也不用担心刷新页面,数据就丢失的问题啦。//strategies:是设置默认持久化存储的位置,默认在。2、在main.js中和pinia配合使用。//enabled:是是否开启持久化存储。上面是登录的时候调接口并持久化存储用户信息。中存储,paths:为持久化存储的属性。持久化的代码是: {

2023-11-05 19:57:35 457

原创 vue使用AES加解密

【代码】vue使用AES加解密。

2023-10-28 17:10:13 2719 1

原创 图片放大镜效果

useMouseInElement 方法。vueuse 插件。

2023-10-25 16:52:29 76

原创 解决el-autocomplete组件远程搜索的区间匹配问题

是中一个常用的组件,用于实现自动完成的功能。然而,它的默认配置在远程搜索时存在一个问题:无法进行区间匹配。换句话说,即使输入的关键词是某个选项的子串或关键词的子串,也无法正确地搜索到该选项。本文将告诉你如何解决这个问题,实现更智能的远程。可以看到当我搜索一个值的区间时,直接就搜索不出来了,那要怎么实现区间也可以搜索出来呢,其实关键在于方法。要实现区间也可以搜索出来,你需要对方法进行修改。当前的实现是对输入的字符串与站点名称的前缀进行匹配,所以只能搜索到名称的开头部分。下面我们将方法的逻辑进行修改。

2023-10-17 09:41:10 126

原创 vue组件如何自己调用自己(组件递归)

在做侧边栏导航动态加载时,需要用到vue的组件递归,最开始打算直接写函数递归来解决问题,结果没什么卵用,越写越复杂。注意不要在组件内定义vue.components,否则会报错。直接在组件中调用即可。

2023-10-13 15:35:00 3068 1

原创 element组件el-table表头设置斜线

【代码】element组件el-table表头设置斜线。

2023-10-13 15:21:54 490

原创 echarts图表环形图设置默认一项为选中状态

【代码】echarts图表环形图设置默认一项为选中状态。

2023-09-25 09:17:02 490

原创 el-tree组件的锚点链接

这样的话点击el-tree的时候,所绑定的div就自动移动到顶部了。

2023-09-03 19:34:44 675

原创 Vue Router active-class 属性

点击后,无论怎么刷新页面,样式效果都不会去掉,除非跳转到其他页面。是 vue-router 模块的。标签被点击时将会应用这个样式。

2023-08-23 10:53:05 252

原创 vue3跳转统一页面,path一样,传递的参数不一样时页面不刷新

当路由的path都是一样的,quary不一样,在跳转的时候,不会执行onMounted等方法,页面也就不会刷新。

2023-08-23 10:23:40 1482

原创 vue的图片懒加载

useIntersectionObserver 方法可以获取元素是否在视口区域内,在的话就是true,不在就是flase。useIntersectionObserver 方法。vueuse 插件。

2023-08-22 15:36:37 196

原创 vue3页面吸顶的开发

要获取当前页面的滚动条纵坐标位置,用: document.documentElement.scrollTop;而不是: document.body.scrollTop;documentElement 对应的是 html 标签,而 body 对应的是 body 标签。提前定义好一个变量存储页面滚动卷去的高度,然后用watch监听数值的变化,再给吸顶组件的盒子增加或者溢出类名,可实现吸顶效果。这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。搜索 : useScroll方法。

2023-08-22 11:09:59 286

原创 vite+vue3使用@路径,报错处理

报错原因:未配置 @符号为指定路径别名,直接使用导致。

2023-08-21 11:11:18 1583

原创 new Blob()详解以及blob转file

Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。

2023-08-21 09:18:33 889

原创 vue3使用vue3-seamless-scroll插件

step参数是用来调整滚动速度的,数值越小,滚动速度越小。

2023-08-04 16:23:26 1949

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除