- 博客(91)
- 收藏
- 关注
原创 vue3 watch 停止监听以及重新开始监听
vue3的watch终止监听,只需要将watch赋值给一个变量,当达到条件调用watch赋值的那个变量就可以终止监听了。开启监听:把监听器重新赋值给变量。
2024-06-21 10:06:36
171
原创 vue3 + echarts-wordcloud 绘制词云图
词云图,是一种文本数据的视觉展示,由词汇组成类似云的彩色图形。echarts-wordcloud是基于echarts的一个词云库,本篇主要介绍它的使用方法。
2024-06-21 09:54:27
220
原创 git 怎么让一个文件不提交
无论使用哪种方法,被忽略或取消暂存的文件都不会被提交到Git仓库中。请注意,这些文件的变动仍然可以被本地保存,但是不会被推送到远程仓库或被其他人获取到。2. 打开该文件,在每一行写入一个要忽略的文件或文件夹的路径,可以使用通配符匹配多个文件。1. 在项目根目录下创建一个名为 “.gitignore” 的文件。1. 在进行提交时使用 “–exclude” 参数来排除特定文件。6. 提交代码时,被忽略的文件将不会被包含在提交中。2. 也可以使用通配符来批量排除多个文件。方法二:命令行排除文件。
2024-06-07 15:08:34
472
原创 react-redux与@reduxjs/toolkit的使用,代码示例
React Redux是一个Redux库的React绑定版本,它提供了一种在React应用程序中使用Redux状态管理的方式。Redux是一个JavaScript状态容器,可管理不同组件之间的共享状态,以及应用程序的整体状态。React Redux提供了一组API和钩子,使得访问和更改Redux状态在React组件中更加容易和简单。
2024-06-07 13:51:11
874
原创 在Vue3中nextTick的使用详解
是Vue.js的最新版本,带来了许多改进和新特性。其中一个重要的改进是对nextTick API的重构和改进。在Vue3中,nextTick的使用方式与Vue2有所不同,本文将详细介绍在Vue3中如何使用nextTick。
2024-05-11 14:49:35
1123
原创 elementui组件@change事件想要传递多个参数,除了事件默认返回的参数,还传递自定义的参数
通常想在组件自带的函数会返回默认的值,有时候想要传递一些自定义的参数。方法1:使用$event。
2024-05-11 14:47:44
758
原创 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
741
原创 JavaScript中的Promise、Async和Await
是JavaScript中用于处理异步操作的一个关键概念。它代表了一个尚未完成但预期在将来完成的操作。使用Promise,可以避免所谓的“回调地狱”,即多层嵌套的回调函数,从而使代码更加清晰和易于维护。它可以暂停async函数的执行,等待Promise的解决(resolve),然后以Promise的值继续执行函数。关键字,可以将任何函数转换为返回Promise的异步函数。语句实现,这使得异步代码的错误处理更加直观。的另一个优点是可以通过链式调用。方法来处理复杂的异步流程。中,错误处理可以通过传统的。
2024-04-13 18:01:42
326
原创 js str字符串和arr数组互相转换
只能使用逗号作为分隔符,如果需要按照其他方式连接数组中的元素,需要用其他方法。对每个元素进行操作,适用于需要对字符串进行转换的情况。可以自定义连接方式,通过回调函数对每个元素进行操作。可以使用指定的分隔符连接数组元素。返回的是原字符串的数组。返回一个新的数组实例。
2024-04-08 22:25:11
218
原创 vue2使用axios封装请求数据
第二步:导入完成之后,在script里面编写请求代码,可以写在methods让按钮调用数据,也可以写在created()里面,在这里我写在methods里面,然后让created调用数据。(2)下面的这个文件,包括封装请求,以及拦截器,还有设置了请求头(里面的代码需要根据自己个人需求修改)第一步:在自己的vue组件当中,导入我们刚刚写好的封装(仅供参考,可以参考下面代码,根据自己需求修改)下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、先下载好axios请求依赖。
2024-03-31 22:58:30
445
原创 Git 的 cherry-pick
使用 cherry-pick 操作,我们可以复制指定的提交,然后将其应用到当前分支上,这个提交就成为了当前分支上的一个新的提交。cherry-pick 操作可以方便地将某个分支上的某个功能或修复应用到另一个分支上,而无需将整个分支合并过来。有时候,我们需要将某个分支上的某次提交(commit)应用到当前分支上,这时候就可以使用 cherry-pick 操作。它可以帮助我们将某个分支上的某次提交复制到另一个分支上,而无需将整个分支合并过来。
2024-03-24 20:54:25
310
原创 前端实现websocket通信讲解(vue2框架)
一、首先写一个websocket的工具,方便直接调用websocket方法。二、写一个状态机来管理数据,将后端传来的数据存到state.message。
2024-03-15 16:36:09
649
原创 【echarts】xAxis鼠标事件失效问题
出现x轴标签文字过长重叠问题,在pass掉标签倾斜、换行方案之后最终决定限制文字长度,超出以…占位,鼠标悬浮时显示完整tooltip。无法触发,只有bar区域是可触发的。但编写过程中发现xAxis。
2024-03-08 16:44:45
511
原创 完美解决多个Echarts图表自适应窗口、父容器宽高,并进行性能优化
如果父容器是自适应的, 那么使用了就不需要再使用最后请不要忘记在页面销毁前调用取消关于更多请看。
2024-03-03 15:54:12
1495
原创 列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案
后台返回的分页数据需要实现滚动条触底加载下一页, 用了的指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。
2024-01-19 16:36:20
767
原创 Echarts图表坐标轴文字太长,省略显示,鼠标放上显示全部(vue)
【代码】Echarts图表坐标轴文字太长,省略显示,鼠标放上显示全部(vue)
2024-01-19 16:30:39
769
原创 Echarts图表如何利用formatter自定义tooltip的内容和样式
我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型图,除了横轴和纵轴表示的时间和成功率之外,希望额外展示另两种数据,并且小圆点要和线的颜色相同。在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据。此处主要利用回调函数的形式去实现。具体写法请参照ECharts官网。:用来格式化图例文本,支持字符串模板和回调函数两种形式。但是,官方提供的样式有时不适用所有的开发场景。
2024-01-12 09:59:41
2452
原创 Echarts—词云库(echarts-wordcloud)使用
echarts-wordcloud是基于echarts的一个插件,所以我们要首先安装echarts包,然后再安装echarts-wordcloud的包,这里我的练习项目安装的版本;当然,你可以随意安装你需要的版本;
2024-01-05 16:49:17
1874
原创 Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
【代码】Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
2023-12-27 16:53:40
1284
原创 vue点击当前盒子以外任意地方隐藏当前盒子
方法一: contains方法 用于判断DOM元素的包含关系;需要注意的是:它以HTMLElement为参数,且返回布尔值。方法二: 可以给盒子加上阻止冒泡 .stop。
2023-12-22 17:21:11
1334
原创 vue3 element-plus 输入框 clearable属性 聚焦时宽度会变化
因为你的代码中el-input是没有宽度的, 所以实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度。可以写css固定el-input宽度来处理。
2023-12-22 17:17:15
2055
原创 input、el-input输入框输入规则
再改改样式,隐藏按钮,靠左对齐,最后效果和普通的input无异。设置精度precision,即可四舍五入;这个是我最近才发现的,方便多了TT。
2023-12-09 19:01:06
1184
原创 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
498
原创 解决el-autocomplete组件远程搜索的区间匹配问题
是中一个常用的组件,用于实现自动完成的功能。然而,它的默认配置在远程搜索时存在一个问题:无法进行区间匹配。换句话说,即使输入的关键词是某个选项的子串或关键词的子串,也无法正确地搜索到该选项。本文将告诉你如何解决这个问题,实现更智能的远程。可以看到当我搜索一个值的区间时,直接就搜索不出来了,那要怎么实现区间也可以搜索出来呢,其实关键在于方法。要实现区间也可以搜索出来,你需要对方法进行修改。当前的实现是对输入的字符串与站点名称的前缀进行匹配,所以只能搜索到名称的开头部分。下面我们将方法的逻辑进行修改。
2023-10-17 09:41:10
138
原创 vue组件如何自己调用自己(组件递归)
在做侧边栏导航动态加载时,需要用到vue的组件递归,最开始打算直接写函数递归来解决问题,结果没什么卵用,越写越复杂。注意不要在组件内定义vue.components,否则会报错。直接在组件中调用即可。
2023-10-13 15:35:00
3491
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人