自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 vue3使用leaflet地图

下载全国省市区的json数据,可放在public目录下,也可放在后台服务器,有跨域问题,后端解决。

2025-08-14 18:30:10 317

原创 vue3大屏,缩放比例页面自适应

【代码】vue3大屏,缩放比例页面自适应。

2025-08-14 17:53:06 70

原创 vue3引用vue-ueditor-wrap组件

放在public目录下​。

2025-02-20 10:42:42 578

原创 vue3实现打印table订单表格

utils/commonFunction.ts 把数字转换成繁体中文封装函数。废话少说,直接上代码!

2024-12-20 15:39:24 472

原创 uniapp自定义树型结构数据弹窗,给默认选中的节点,禁用所有子节点

components/sonTreeNode/sonTreeNode.vue 封装成组件。实现逻辑:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。兼容H5、安卓App、微信小程序。data.js 定义树形结构数据。

2024-12-19 10:46:05 721

原创 vue3渲染el-tree组件,给默认选中的节点,禁用所有子节点

需求:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。

2024-12-18 12:36:52 570

原创 uniapp树型结构数据弹窗选择器

封装成组件:/components/peng-tree/peng-tree.vue,经修改过的源码。该组件进行了懒加载处理,可以更快的加载数据,支持多选、单选、级联选择。经过处理,支持数据反显,当选中子节点时,默认选中父节点。组件样式 style.css。

2024-12-17 22:40:32 872

原创 el-tree组件的父节点半选中状态—(选中和不选中的区别)

回显数据需要在el-tree组件添加default-checked-keys属性。

2024-12-17 16:46:33 698

原创 el-tree组件选中子节点默认选中父节点

当子节点未全部选中时,父节点为半选中状态,将选中的节点数组和半选中的节点数组组合。给el-tree组件定义ref,便于在script获取dom树。

2024-12-16 21:29:39 283

原创 Vue3+Element-Plus使用el-form和el-table嵌套实现表格编辑并提交表单校验

⑥ 整个html结构是一个大表单 el-form里边嵌套的el-table,而el-table中又嵌套了表单项 el-form-item支持编辑。④ :prop="`tableData.${$index}.name`" 绑定传入Form 组件的 model 中对应的字段name。① :model="formData" 给表单绑定数据,formData是表单的数据对象。② 表单数据对象formData中定义的tableData是表单内嵌套的表格显示数据。③ rules为表单绑定的校验规则。

2024-12-11 11:17:30 2329

原创 vue导出json文件

方法来创建一个可下载的JSON文件。在Vue中,您可以使用JavaScript的。

2024-12-03 11:02:09 409

原创 前端用express搭建本地服务器

在日常前端开发中,我们离不开数据,可能是用于页面内容展示方便调样式、测试接口问题等等。在合作的过程中,我们如果需要数据的时候,但前后端的开发进度不一致,我们作为前端开发者,可以先模拟本地服务器和假数据进行测试,实现简单的前后端通信。

2024-12-01 22:04:30 1196

原创 Vue3在PC端接入萤石云监控

【代码】Vue3在PC端接入萤石云监控。

2024-11-30 23:17:07 811

原创 vue实现弹窗输入验证码

实现思路:后端把验证码图片通过base64的字符传给前端,前端把字符当成图片展示出来,登陆的时候把验证码传给后端,后端判断验证码是否准确。/component/GraphCodeDialog /index.vue 封装成组件。前端获取验证码的接口。template代码。

2024-11-30 10:58:56 550

原创 vue实现echarts饼图自动轮播

echartsFn.ts 把echarts函数封装成一个文件。template代码。

2024-11-30 09:41:30 508

原创 uniapp App端在renderjs层渲染echarts获取不到service层id的问题

这样的写法App端有时在renderjs视图层获取不到server逻辑层的数据。解决方法:需要把数据(id)通过server层向renderjs层传值。

2024-11-29 23:26:57 606

原创 uniapp-vue2在App端引用echarts组件,解决无法渲染formatter问题

在App端option里面直接写上formatter,是无法执行方法的。需要在echarts组件里面给options再重新赋值。

2024-11-29 23:11:37 443

原创 VSCode的json2ts插件的使用

调整为Ctrl + Shift + Alt + V。

2024-11-29 09:26:52 720

原创 uniapp连接mqtt频繁断开原因和解决方法

心跳时间最小值可以为0,表示客户端不断开。为了保持mqtt长期在连接中,建议设置心跳间隔时间为1秒,即使在某种情况(手机缩小化、手机熄屏、网络问题)断开mqtt后,只要应用在线只需一秒钟就会自动重连。心跳间隔设置的目的是让客户端和服务器之间有一个正常的保活机制,避免因为网络问题或者长时间不活动而导致连接断开。心跳机制问题:MQTT有心跳机制,如果心跳间隔设置不当或者服务器端心跳检测机制严格,会导致频繁断开。调整心跳设置:根据服务器端的心跳检测策略调整客户端的心跳设置,确保心跳间隔不会被服务器端认为是断开。

2024-11-29 00:46:46 1939

原创 vue引入并调用electron插件在网页报错Dynamic require of “electron“ is not supported

这个错误信息表明你正在尝试在一个普通的网页环境中动态地引入('electron'),但是这是不被允许的。Electron是一个用于构建桌面应用程序的框架,它结合了Node.js和Chromium,并不能直接在浏览器中使用。把引用electron框架的代码封装成一个组件,并在App.vue引入,引用is-electron模块判断是否需要运行该组件。安装is-electron 该模块是一个简单的Node.js模块,用于检测当前环境是否在Electron应用程序中运行。

2024-11-28 23:32:33 923

原创 vue3+vite使用vite-plugin-electron-renderer插件和script-loader插件有冲突

报错问题是在使用vite-plugin-electron-renderer插件不支持import动态引入,该报错信息并不准确,实际原因是vite-plugin-electron-renderer插件和script-loader插件有冲突。果你的项目既需要 Electron 也需要 Vite 的快速热重载功能,你可能需要同时使用两种工具,分别为 Electron 的主进程和渲染进程设置构建环境。的功能,可以寻找 Vite 官方支持的插件或者加载器,或者自己编写 Vite 插件以实现类似的功能。

2024-11-28 22:59:20 613

原创 JavaScript的dayjs日期库

Day.js是一个轻量级、极简的JavaScript库专为现代浏览器设计,用于解析、验证、操作和显示日期和时间。这个插件以其超小的压缩体积(通常小于2KB)、广泛的浏览器兼容性以及提供的链式操作等特点而受到前端开发者的青睐。(Moment.js 的 API 设计保持完全一样)

2024-11-28 20:59:33 392

原创 JavaScript实用工具lodash库

Lodash是一个功能强大、易于使用的JavaScript实用工具库,它提供了丰富的函数和工具,能够方便地处理集合、字符串、数值、函数等多种数据类型。通过使用Lodash,开发者可以大幅度提高JavaScript编程的效率和可读性,使得代码编写更加快捷、简洁、易懂。

2024-11-28 20:39:02 439

原创 Vue使用Mockjs插件实现模拟数据

就如同救星一般出现了。Mockjs 是一款能够模拟生成随机数据,拦截 Ajax 请求并返回模拟数据的工具,它极大地提高了前端开发的效率,让前端开发可以独立于后端进行。在前端开发过程中,我们经常会遇到后端接口尚未完成,但前端需要进行页面构建和功能测试的情况。main.ts入口文件。

2024-11-28 17:53:45 574

原创 uniapp-vue2关闭sourceMap的生成,提高编译、生产打包速度

遇到问题:由于微信小程序引入了mpvue-echarts\echarts.min.js,文件体积超过 500KB,影响性能,本地运行到微信小程序模拟器太慢了。文件,可以关闭source map的生成,从而提高编译、生产打包的速度。

2024-11-28 14:20:30 1010

原创 uniapp实现小程序的版本更新

uni.getUpdateManager()是uniapp框架提供的一个API,用于管理小程序的版本更新。这个API返回一个全局唯一的版本更新管理器对象,该对象可以用于检测新版本、下载新版本以及提示用户重启应用以完成更新。

2024-11-28 12:00:49 1246

原创 原生微信小程序实现登录、获取用户信息、获取手机号

接口可以获取临时登录凭证(code),然后再把这个code传到开发者的服务器,服务器端再调用微信的接口来获取用户的openid和session_key。在微信小程序中,使用。

2024-11-28 10:03:10 1214 1

原创 原生微信小程序前端解密数据获取手机号

原生小程序RdWXBizDataCrypt是一个用于微信小程序的加密数据解密库。它提供了一个安全的方式来处理微信小程序的数据加密和解密。微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端,让后端解密,再提供接口返回给前端;但要是遇到一个比较一般的后端或者懒的后端的话,前端也可以考自己完成手机号解密,不需要后端的解密接口。2.下载RdWXBizDataCrypt 解密文件。3.在需要解密的最顶部引用该文件。1.使用授权手机号组件按钮。放在utils目录下。

2024-11-28 09:34:38 548

原创 uniapp在小程序连接webScoket实现余额支付

【代码】uniapp在小程序连接webScoket实现支付。

2024-11-28 00:17:48 623

原创 uniapp在App端定义全局弹窗,当打开关闭弹窗会触发onShow、onHide生命周期怎么解决?

解决逻辑:我们可以在vuex定义一个变量,默认为false,当打开弹窗(跳转弹窗页面)之前把该变量改成true,关闭弹窗(从弹窗页面返回上一页)之后把该变量改成false,在调用弹窗的页面的onShow、onHide函数判断如果该变量为true,直接结束函数。遇到问题:当打开弹窗(跳转弹窗页面)就会触发当前页面的onHide函数,关闭弹窗(从弹窗页面返回上一页)就会触发上一页的onShow函数。在页面调用弹窗和处理打开关闭弹窗多次触发onShow和onHide函数的问题。

2024-11-27 20:06:02 869

原创 html+css+js实现爱心表白动画画面

arr变量可以自定义开始时间。

2024-11-26 22:47:12 326

原创 uniapp-vue2引用ayy-modal全局弹窗组件

1、pages.json 注册页面路由(注意pages.json对json有严格校验,最后一个节点不允许有‘"," 所以以下代码{}前后是否需要加逗号看你将下面代码加在那个位置)1、安装 vue-inset-loader,该插件主要是在每个页面将组件标签写入。3、pages.json配置文件中添加insetLoader。2、需要重新设置弹窗的路径,否则在APP弹窗无效。2、配置vue.config.js。

2024-11-26 19:05:29 533

原创 uniapp-vue2引用了vue-inset-loader插件编译小程序报错

是node_modules目录的vue-template-compiler和vue依赖包的版本号不一样导致的报错。把vue依赖包改成和vue-template-compiler依赖包一样的版本号。在package.json的dependencies依赖管理自动改变版本。安装了vue-inset-loader插件编译微信小程序的报错信息。安装完vue依赖包版本自动改成安装的版本。

2024-11-26 17:03:15 930

原创 设置跨域谷歌浏览器

2、找到快捷方式,找到目标,目标输入框内容最后面加上 --args --disable-web-security --user-data-dir。1、可以先复制粘贴一个副本浏览器快捷键,再右键浏览器,点击属性。4、重新打开浏览器即可。

2024-11-26 11:04:14 1044 2

原创 uniapp定义new plus.nativeObj.View实现APP端全局弹窗

6.showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false。3.confirmBoxColor:"", //确认按钮文字背景色。/utils/AppPopupView.js 定义弹窗文件。5.confirmText:" //确认按钮文字",4.cancelText:"", //取消按钮文字。参数一:弹窗信息(可不填,会有默认值)2.content:"", //内容。1.title:"", //标题。参数二:点击确认按钮执行逻辑,参数三:点击取消按钮执行逻辑。

2024-11-25 16:08:39 1152

原创 uniapp实现APP版本升级

App.vue 直接上代码。

2024-11-25 14:59:22 735

原创 使用phpStudy小皮面板模拟后端服务器,搭建H5网站运行生产环境

例如:配置uniapp打包H5网站后的目录再例如:配置前端PC打包后的目录确认后效果重启服务最后在浏览器打开。

2024-11-25 11:47:24 604

原创 uniapp在H5使用vue-router路由返回上一页不会触发销毁函数解决方法

是Vue.js框架中的一个路由守卫,用于在离开当前路由前执行一些操作。在uni-app中,由于其是基于Vue.js开发的,因此也支持这个守卫。问题:uniapp在H5使用vue-router路由,如果在H5平台上进行页面刷新操作,再返回上一页,可能会遇到beforeDestroy、命周期钩子不被触发的问题。这是因为在H5中,页面的刷新实际上是整个应用的重新加载,导致了Vue实例的重新初始化。解决方法:你可以使用正确的导航守卫来处理页面离开的逻辑。守卫中添加离开页面时的清理逻辑。

2024-11-25 09:15:11 697

原创 uniapp的renderjs使用

在视图层操作dom,运行for web的js库(可以操作dom,意味着拥有window、document等这些全局变量,在app-vue的service层没有这些)通过RenderJS,可以在APP中操作DOM并实现与原生层的数据交互,解决H5技术栈在APP上的限制,实现高性能的地图功能和视图交互。平台,其作用包括降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力,以及在视图层操作DOM和运行Web的JS库‌。1.原生层数据通过监听传入renderjs层(可以通过调用原生层的方法触发)

2024-11-22 11:59:33 698

原创 uniapp接入高德地图

utils/map.js 需要设置你自己的key和安全密钥。,绑定服务选择《Web端(JS API)》下面代码兼容安卓APP和H5。

2024-11-22 09:37:59 893 7

空空如也

空空如也

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

TA关注的人

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