- 博客(49)
- 收藏
- 关注
RSS订阅原创 forEach引起的异步问题
已知方法aa(),aa方法中存在一个forEach循环，循环中调用方法bb（），bb成功之后调用cc(),外部调用aa之后调用dd（），dd（）方法正常是要等待bb成功之后cc也成功才被调用，现在会存在问题，dd会在cc之前调用。一旦 aa() 返回（注意：它实际上在所有 dd(item) 开始后几乎立刻返回），ee() 将继续执行并调用 this.cc()，然后等待其完成。通过这种方式，ee() 将正确地等待 aa() 内的所有 dd(item) 操作完成后才继续执行 cc()。ee() 的执行流程。
2024-12-05 09:55:35
303
原创 vue3使用Notification 通知如何自定义样式
需求： vue3使用Notification，通过接口拿到了定义好的消息提示的末班背景色，标题背景色，标题颜色，内容颜色信息，需要根据返回的这些颜色值设置到Notification的弹出模板层上面。首先Notification的定义方法在js文件中进行定义的，需要在js文件中引入一个scss文件，用来定义Notification的样式。在scss文件中需要写相应的样式。
2024-08-21 11:38:19
433
原创 vue3输入单号和张数，自动生成连号的单号
需求： 输入连号事件，需要在表格中输入物流单号，物流号码，生成的数量，名称，点击确定自动生成固定数量的连号物流单号。点击保存时，将弹出层输入的单号，号码，和数量进行数据组装，然后放入到tableData中，关闭弹出层。点击输入连号自动先插入一条空数据，用于输入相应地内容。
2024-02-28 17:12:57
711
原创 vue3使用elementPlus进行table合并处理
虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示。const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到。elementPlus中table合并部分列。
2024-02-26 17:34:38
861
原创 已知两个时间，算时间差，相差几天几时几分几秒
测试案例: getDateDiff(‘2024-1-1 10:10:00’, ‘2024-1-5 12:10:10’)两个时间，算时间差，差几天几时几分几秒。结果：4日2时120分10秒。
2024-01-27 16:21:06
226
原创 input输入金额，千分位和取消千分位
input 输入金额，失去焦点自动转化成百分位展示，编辑focus的时候自动取消百分位。需要定义两个方法，一个是失去焦点转化千分位，一个是获取焦点取消千分位。
2024-01-25 10:42:21
732
原创 数组对象，名字相同的对象进行合并
需要注意：temp[name] = JSON.parse(JSON.stringify(item))需要使用深copy，要不会导致合并之后的数据值不对。需求： 数组对象，name字段相同的进行合并，并将每条数据中的num累加，金额为合并之后的num*price。现在需要将数据合并为以下展示形式：日期进行合并为多个数据合并之前的日期区间。原始数据tableData。
2024-01-24 11:44:20
704
原创 Vue3 使用Element Plus表格单选带checkbox
官方给出的多选带checkbox，单选直接选中当前行高亮，有时候不想要单行高亮，想要带checkbox的单选，需要对多选进行改造。只需要在事件handleSelectionChange中添加两行代码。
2023-11-11 15:51:49
1382
原创 uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
官网提供的api进行的开发，自我感觉没啥问题，但是在不同的端上好像有的好使有的不好使，暂时不知道啥问题。
2023-06-20 09:44:46
1045
原创 uniapp 树形结构展示
rangeKey是关键，如果不设置rangeKey，有可能加载出来数据是不展示的，只能看到树形结构的图标，rangKey对应的是数据的字段名,:range="rangeList"绑定数据，confirmLeftTree点击树形结构确定的事件触发。实现树形结构，在官网插件市场找了tki-tree进行改造，自行下载：https://ext.dcloud.net.cn/plugin?需要注意的是： 点击图片展示树形结构只能用固定语法。将原有的树形选中方法进行优化。
2023-01-31 11:28:45
3525
4
原创 SpreadJs的导入导出功能
继上一篇博客落下的导入导出页面布局： <div class="options-container"> <div class="option-row"> <div class="inputContainer"> <input type="file" id="fileDemo" class="input" @change="changeFileDemo" /> <in.
2022-05-26 15:05:18
688
原创 spreadJs实现基本的表格编辑 导入导出
需求：报表形式展示，根据时间获取接口返回的数据，绑定到用spreadJs实现的excel上面，这个excel能正常的编辑，导出，别的excel能导入进来初体验只能去官方啃文档：官方链接把相应的依赖先装好：//使用以下命令在项目中导入SpreadJS Vue模块：npm install @grapecity/spread-sheets-vuenpm install @grapecity/spread-sheets//使用以下命令在项目中导入Excel IO Vue模块和FileSaver V.
2022-05-26 14:43:53
1069
原创 uniapp ios实行息屏传输实施地理信息
需求：uniapp开发原生ios，息屏之后将高德获取到的经纬度传输给后端// ios实时定位getIOSLocation (id) { var watchId = plus.geolocation.watchPosition( function ( res ) { // console.log( "监听位置变化信息:" ); // console.log( res ); let params = { "staffId": id, //（用户ID） "long.
2022-04-24 15:34:33
3109
原创 大屏常见图形option总结
自己常做的几种大屏用到的图表option的基本设置第一种2 pieFinishOption: { title: [ { text: '完成率', x: 'center', top: '26%', textStyle: { color: '#fff', fontSize: 12, f.
2022-03-24 16:05:50
214
原创 uniapp循环遍历多个radio
uniapp使用uview 实现表单遍历多个radio页面代码实现：data中定义radioList表单进入之后的默认数据回填：查接口获取数据 然后进行对应字段的赋值this.radioList.forEach(item => { item.value = this.form[item.text]})保存数据的时候，就是提交表单this.radioList.forEach(item => { this.form[item.text] = item.value}).
2022-03-24 11:37:32
2771
1
原创 大屏antdesign走马灯轮播加图形渲染
项目是vue+antdesign，要做大屏，实现的效果是轮播切换，每五条一组，分别有柱状图和饼状图首先父组件布局 图标类的为子组件父组件的大概数据格式为本来是多条数据，分成每五条一组子组件内渲染数据一开始使用getElementByClassName 会导致轮播和双重循环出现问题，数据对应不上，方法错误，直接用一层ref搞定...
2022-03-24 11:22:49
2053
1
原创 uniapp使用高德的离线地图
uniapp使用高德的离线地图需求分析：使用uniapp开发原生android和ios，要做一个离线地图的操作，无网的情况下能正常查看地图，只是前期的demo演示，不做特别详细的说明使用高德地图 相关的配置和申请去官网就可以（不想细说）使用openlayer使用原生sdk封装高德的离线地图在uniapp中用第一种：使用openlayer加载离线瓦片瓦片需要自己去下载ol.css和ol.js两个文件我们可以到官网去下载源文件。官网地址：前期准备工作自行度娘吧，直接上demo
2021-12-20 10:36:45
4226
13
原创 uniapp原生android开发证书申请
mac 使用uniapp开发原生android 生成证书首先安装java的sdk （这个去官网安装就可以）安装成功与否可通过此命令查看/usr/libexec/java_home -V2.在控制台进入相应的路径中cd /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home然后输入 ls 查看当前路径下的文件信息证书生成命令sudo keytool -genkey -alias xxx.keystore -keyalg R
2021-12-09 14:11:29
2108
原创 uniapp附件上传及预览
uniapp 实现表单中包括上传附件uniapp做的原生android开发，动态表单数据录入的时候有时候需要上传附件和拍照视频功能1.进行android平台的判断if (plus.os.name.toLowerCase() != "android") { uni.showModal({ title: '提示', content: '仅支持Android平台', success: function(res) {} }); return false}let main = pl
2021-09-15 14:10:58
2342
原创 uniapp proxy配置代理在h5端和app端
proxy代理uniapp官网明确指出配置是在h5属性下进行配置，由于app端是不存在跨域的情况，不存在跨域的情况，所以不需要考虑app端代理，只需要将配置信息配对就可以了我是用的uview封装的请求方式，在main.js中配置服务器地址，一开始我没考虑到app端不存在跨域问题，我统一用了一个地址Vue.prototype.$url = ''mainfest.json中添加："h5" : { "devServer" : { "port" : 8000, "di.
2021-07-26 11:35:13
5286
原创 android studio 如何热替换模拟器
RN的项目,在Android studio中启动后，自动打开模拟器，我在vscode中对代码进行编辑，想实现：vscode编辑完成之后，模拟器自动更新首先在vscode终端用npm start启动项目，启动之后就可以自动更新到android studio中，模拟器自动就更新了，如果不更新，手动进行更新，window下rr快捷键在android studio无法正常打开终端的情况下，在vscode中手动命令打开android studio 只是打开模拟器，一切编辑代码工作可以在vscode中进行.
2021-07-06 17:34:52
619
1
原创 Android studio 报错Multiple annotations of type `dalvik.annotation.EnclosingClass`
在Android studio中报错Multiple annotations of type dalvik.annotation.EnclosingClass看不出来什么问题，然后在vscode代开自己的代码，查看被修改过得文件，如果有build.gradle ,对比发现： dependencies { classpath 'com.android.tools.build:gradle:3.1.4' // NOTE: Do not place your appli.
2021-07-06 14:27:01
428
原创 解决swiper悬停延迟情况
写了一篇demo原生的swiper轮播，但是发现一个问题，就是鼠标放上之后达到暂停的效果，但是swiper是等到本次轮播走完再执行暂停，但项目需求是放上去就暂停，移开之后继续播放将上篇中的两个方法给改掉 //鼠标移入悬停 $('.swiper-container').on('mouseenter', function () { mySwiper.stopAutoplay(); }) //鼠标移出滚动 $('.swiper-container').on('mouseleave'.
2021-06-30 16:30:26
1388
1
原创 uniapp 环境配置（开发，测试，生产）
平时开发会在测试环境，生产环境，开发环境等环境下进行来回切换开发，测试，新建config.js用来写公共的环境配置的代码首先声明变量 当前环境为空let env = '';然后就是声明的三个环境的变量，这个用哪个就打开哪个，其他的注释掉env = process.env.NODE_ENV === 'development' ? 'prod' : 'prod';//生产环境env = process.env.NODE_ENV === 'development' ? 'prodDev' : '.
2021-06-30 16:20:30
4664
原创 js原生swiper轮播demo
默认放4张，然后自动轮播循环，首先用的是swiper 我用的网上的地址引入的：<link rel="stylesheet" href="http://www.jq22.com/jquery/swiper.min.css"><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="http://www.jq22.com/jquery/swiper.min..
2021-06-29 13:55:57
311
原创 eslint简单的保存校验格式配置
这是根据网上那种比较全的eslint格式修改的，因为我有的插件没用这个在setting.json中进行配置，，就是vscode中的文件=》首选项=》设置{ "eslint.codeAction.showDocumentation": { "enable": true }, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSiz.
2021-06-28 17:55:57
241
原创 ant design添加校验FormModel的坑
场景：二级弹层为一个table，table中的形式如下图：select下有两个选项A,B，当为A时，其他全部为必填，为B时c是disabled场景已经看到了，看着很简单，select的时候类型为b的时候把c设置为disabled就可以了，但是，如果刚才选完A出发c的校验，c的校验信息出来之后，直接操作select选B，这样c置为disabled的同时，校验信息依然存在：解决方案： <template slot="hammerPrintLap" slot-scope="text, record"
2021-06-25 14:31:17
1470
原创 uniapp pages.json中分包的处理
uniapp在实现多端打包的情况下，由于小程序的打包限制大小，因此前期会提前做好分包好处：小程序的分包，除了联网分段下载外，还可以减轻启动时加载的js数量，可以提升启动速度。从uni-app 2.7.12+ 开始，App-vue平台也兼容了小程序的分包配置，但默认并不开启。在manifest配置以下节点，可以在App端启动分包。启用之后，就需要在pages.json中配置具体的分包规则（与小程序的配置相同），注意：就是一旦在pages.json里配置分包，小程序一定生效，而app是否生效，
2021-06-21 16:08:08
2026
原创 uniapp 前端获取历史搜索记录
场景：搜索页，搜索栏下方的历史搜索场景分析：每次搜索的关键词都要放到历史搜索里面，首页关键词是要定义的keyname，这个关键词可以放到cookie或者sessionStory里面，我用的uniapp，放到了本地缓存里面，实现方式：获取搜索词添加历史搜索清除历史搜索获取历史搜索，代码中去掉重复的搜索词 getHistory(keyname) { let that = this let words = '' if(uni.getStorageSync(keyname
2021-06-21 15:52:16
1264
原创 uniapp canvas绘制弧形圆环
项目uniapp 绘制弧形圆环首先说下：uniapp 插件市场有一个弧形进度条，作为组件引用的话是不兼容小程序，所以我做的是直接在本页面中进行绘制，刚开始也是作为组件进行引入的，但是小程序不兼容，无法展示，所以就抛弃掉官网的组件了，之前写过一个h5的vue绘制圆环，就改了改，改成都能兼容的了，具体弧度不会算的可以看我的另一篇文章UI效果先确定效果图展示效果可以看出两个圆环，一个背景圆环，一个进度圆环，所以要声明两个canvas层我的图层是130*130的，uniapp的适配rpx，所以ce
2021-04-21 15:59:22
4970
原创 base64图片流的处理以及保存分享
场景实现：后台返回base64的图片流，是一个小程序码，进行渲染在页面，并保存，分享，实现效果见下图首先，对就扣图片流进行处理进行base64转化本地图进项保存getQrImgBase64: function () { var that = this; var url = netWork.config.apiHost + netWork.urlValue.fxBase64; var param = { "bizType": 19, "bizValue":
2021-03-26 15:26:39
918
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人