vue
文章平均质量分 69
szx的开发笔记
精通Java,JavaScript,Python,C,C++,C#,GO,Vue,React,CSS等单词的拼写
展开
-
封装一个websocket,支持断网重连、心跳检测,拿来开箱即用
首先使用node编写一个后端服务,用于 WebSocket 连接。,用于美化控制台打印的,这个文件在其他地方也通用。至此一个 WebSocket 就封装好了。然后我这里编写了一个简单的demo页面。关闭连接后,消息就无法发送了。原创 2024-05-31 10:12:49 · 564 阅读 · 0 评论 -
大屏表格实现无限滚动效果
首先固定最外层的高度,并且设置超出高度后隐藏设置每一行的高度为固定35PX,默认显示10行,所以最外层高度就是 35 * 10 + 表头的高度遍历时克隆一份表格数据,用于视差效果显示设置滚动动画,让表格行所在的父元素 tableTr 不断往上移动,当移动到末尾数据时,此时定义的移动距离 position 刚好时总高度的一半然后重置 position 的距离为0,因为我们克隆了一份数据,此时便不会有闪跳的情况,给人的感觉就是继续往上滚动,从而实现无限滚动的效果原创 2024-05-28 11:04:15 · 513 阅读 · 0 评论 -
前端使用Compressor.js实现图片压缩上传
在使用ElementUI或者其他UI框架的上传组件时,都会有上传之前的钩子函数,在这个函数中可以拿到原始file,这里我用VantUI的上传做演示。afterRead 函数是上传之前的钩子,可以获取到原始file。可以看到压缩前的图片大小3.29M,压缩后343KB。下面是前后的图片对比。原创 2024-05-10 14:18:13 · 982 阅读 · 0 评论 -
使用 vue3-sfc-loader 加载远程Vue文件, 在运行时动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤
它是Vue3/Vue2 单文件组件加载器。在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤。import()原创 2024-04-11 09:57:14 · 2776 阅读 · 1 评论 -
前端接口请求支持内容缓存和过期时间
首先封装一下 axios,这一步可做可不做。但是在实际开发场景中都会对 axios 做二次封装,我们在二次封装的 axios 基础上继续封装,增加支持缓存功能。,当我们想用接口缓存时,就用 catchAjax 方法,不想用时还用上面的 request 文件,互不影响。我们在 1 分钟内连续点击按钮,发现只会走一次接口,但是控制台可以打印多次数据。支持用户自定义缓存时间,在规则时间内读取缓存内容,超出时间后重新请求接口。原创 2023-10-30 18:15:27 · 835 阅读 · 0 评论 -
讯飞星火大模型V3.0 WebApi使用
vue实现 讯飞星火大模型JS调用原创 2023-10-28 16:17:15 · 2495 阅读 · 18 评论 -
Vue3 + Echarts(5.x) 实现中国地图
下载地址:https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/china.js,下载到本地使用即可。在echarts5.x版本中,已经不再提供地图数据,所以需要我们自己手动下载,我这里已经提供好了下载地址。文件代码,这个文件主要是通过省份名称获取经纬度。在这个版本中的引入方式必须是下面这种方法。默认安装的是 5.x 版本。然后下面是地图实现源码。原创 2023-10-19 20:29:49 · 2548 阅读 · 8 评论 -
vue3自定义全局Loading
如果完整引入了 Element Plus,那么上会有一个全局方法$loading,同样会返回一个 Loading 实例。名称说明类型默认targetLoading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入以获取到对应 DOM 节点stringbody同v-loading指令中的body修饰符booleanfalsefullscreen同v-loading指令中的fullscreen修饰符booleantruelock同。原创 2023-09-25 17:38:51 · 2812 阅读 · 0 评论 -
自定义v-resize指令并发布到NPM
用于监听绑定元素的宽高变化,当元素宽高发生变化时触发回调并获取最新的宽高。原创 2023-09-25 09:28:01 · 507 阅读 · 0 评论 -
vue3项目快速开发模板
本项目采用 vue3 + webpack 的方式来开发,已经引入了常用功能,不需要再去配置路由、请求、pinia 等,上手直接开发页面即可,真正做到开箱即用你可以直接拉取我的仓库来直接使用,也可以按照本文教程自己操作仓库地址:https://gitee.com/szxio/vue3-template。❥(^_-)原创 2023-04-04 15:51:32 · 2109 阅读 · 1 评论 -
JS监听元素滚动
使用监听 scroll 可以实现监听页面滚动或者元素滚动是否到底案例代码运行效果原创 2022-12-05 16:24:37 · 5579 阅读 · 0 评论 -
js实现接口请求重试
首先新建 haveload.js ,文件中对Ajax请求进行二次封装,代码如下。我这里的get请求地址并不存在,但是我让他循环3次重复调用,来看运行结果是什么。在控制台连续输出了三次404,如果把地址改成正常的,则效果如下。在文件中引入上面的文件,然后编写自定义方法并导出。通过查看请求发现接口只调用了一次,并吧结果返回。原创 2022-11-28 09:42:34 · 967 阅读 · 0 评论 -
使用vue3从0开发一个后台管理系统
https://gitee.com/szxio/zx-vue-next本项目是使用 vue3 来开发的后台管理系统模板。页面简单大方,使用悬浮式的风格,将菜单栏,顶部面包屑,中间操作区域等合理划分,功能丰富,支持主题颜色自定义,一键开启黑色主题,浅色、深色菜单动态切换等。路由采用动态路由,依托若依后端接口,拥有强大的权限管理功能。对若依感兴趣的点此跳转,希望各位小伙伴能够在学习本项目的过程中或多或少的有所收获。如果感觉对你有所帮助,请点击 Star,感谢支持。本文档同步至以下网站:本项目后端借用了若依的后台原创 2022-10-28 16:10:34 · 10759 阅读 · 12 评论 -
Vue3设置动态ref
【代码】Vue3设置动态ref。原创 2022-10-17 16:31:04 · 4017 阅读 · 0 评论 -
Vue3使用tinymce富文本编辑器
tinymce 富文本编辑器功能强大,效果如图。原创 2022-09-30 14:55:55 · 2486 阅读 · 3 评论 -
Vue 3.2的新特性
执行命令在命令行中输入项目名称然后cd到项目根目录下查看vue版本启动后首页起初 vue3.0 暴露变量必须 return 出来,template 中才能使用。这样会导致在页面上的变量会出现很多次。vue3.2 只需要在 script 标签中添加 setup 可以帮助我们解决这个问题:组件只需引入,不用注册。属性和方法不用返回,也不用写setup函数,也不用写 export default。甚至是自定义指令也可以在我们的 template 中自动获得组件内容使用defineProps 用来处理父子原创 2022-06-27 11:22:27 · 569 阅读 · 0 评论 -
动态合并表格行
将客户一样拜访次数列合并成一行展示原创 2022-06-16 10:23:41 · 229 阅读 · 0 评论 -
处理 element-ui Table组件使用fixed=“right“后显示错位问题
当给表格添加fixed="right" 后,切换页签重新获取数据时会出现下面的问题在获取数据后添加下面的代码即可解决// 重新布局表格this.$nextTick(() => { this.$refs.multipleTable.doLayout(); // el-table加ref="multipleTable"});...原创 2022-03-21 11:48:57 · 2616 阅读 · 0 评论 -
使用ElementUI从零开始搭建后台管理系统教程
vue + ElementUI 搭建后台管理系统记录本文档记录了该系统从零配置的完整过程项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点一个小星星,O(∩_∩)O新建项目vue create vueadmin安装 less-loader安装这里是一个小坑,安装 less-loader 时推荐安装指定版本,如果安装默认高版本会导致项目出错cnpm i less-loader@6.0.0 -D使用<style lang="原创 2021-11-19 17:32:49 · 3265 阅读 · 1 评论