- 博客(58)
- 收藏
- 关注
RSS订阅原创 vue项目导入excel成功后下载导入结果(后端返回的list数组)
需求：点击批量导入按钮，弹出弹窗。下载模板如图二上传后，如果有错误，会弹出提示，如图三点击查看失败原因，会自动下载失败的excel如图四。请求参数和返回结果1. vue项目导出表格功能实现步骤npm install [email protected] install [email protected]需要的页面引入详细看src/utils/exportExcel.js2. 页面实现<template> <div> <el-button type
2023-04-18 17:16:24
948
1
原创 微信小程序WeUI中half-screen-dialog底部弹窗相关问题
如图需要从页面底部弹出一个弹框，弹框里的内容超出最大高度时，可以滚动。弹窗样式只能写在pages父组件中。
2023-03-20 16:40:15
2170
原创 JS判断两个时间区间是否有交集？判断某个时间是否处于某个时间段内？
如：时间’2023-01-16 23:59:59’, ‘2023-01-17 23:59:59’是否在’2023-01-16 00:00:00’, ‘2023-01-18 23:59:59’,范围内，如果在就返回true，不在则返回false。
2023-01-16 17:33:42
781
原创 vue后台实现点击图片放大
点击小图可以放大，放大后，通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。代码父组件：子组件base/image/image-viewer.vuedom.js/util.js/types.js
2022-11-30 14:35:24
4528
2
原创 Unknown custom element: ＜el-image＞无法使用该组件，升级element-ui版本后项目报错
升级element-ui版本后报非常多错，后面又降回原老版本，并通过其他方式实现图片放大功能。
2022-11-30 10:23:50
1262
原创 微信小程序 表单 选择跳转新页面，选择后，返回上一页面保留原页面已填写的值
表单页有很多项需要填写，个别项数据较多，需要跳转到新的页面去选择后，带着结果返回。此时，想要返回时，已经填写过的内容保留不变，不被清空。在下一页去获取上一页data中的数据，并修改，再通过。返回上一页，页面不会刷新，且所有数据都在。
2022-10-28 21:04:14
3902
1
原创 微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定
微信小程序提交表单多个input输入框，通过一个bindinput方法实现双向数据绑定
2022-10-28 20:51:43
3383
原创 微信小程序底部按钮通过position:fixed定位后遮挡正文列表
使用`position:fixed; bottom: 0; `定位后遮挡正文内容，此时通过给底部按钮设置`margin-top`并不生效。需要给正文设置`padding-bottom`即可。
2022-10-28 20:34:29
879
原创 小程序wx.setStorageSync后，在用getStorageSync获取数据有时会获取不到
小程序wx.setStorageSync后，在用getStorageSync获取数据有时会获取不到；改为异步获取。
2022-07-21 17:18:36
4272
原创 微信小程序列表滚动到底部，当元素高度增加时，自动滚动出后面的元素
场景：场景1、列表使用scroll-view标签的bindscrolltolower实现的分页滚动加载场景2、列表使用view标签和onReachBottom结合实现的分页滚动加载当滚动到最后一页最后一条数据时，该条数据可以通过按钮展开收起部分元素，默认是收起的状态，当点击按钮时会在该条数据后面展开一些元素。此时该条数据的整体高度是增大的，整个页面的高度也是增大的。由于在展开元素前，滚动条已经滚动到最底部了，此时无法监测到页面高度增加了，导致展开的元素在最底部没有展示出来了，需要手动滚动页面后，才会
2022-05-16 22:55:05
2502
原创 微信小程序scroll-view重新加载数据，滚动条回到顶部
问题：微信小程序切换了筛选条件后，列表滚动条没有滚动回顶部。场景：wepy+原生通过<scroll-view>实现列表滚动方案：1、通过wx:if设置列表元素的展示隐藏通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏，去重新加载列表。直接设置无法生效，滚动条依旧保留在上次滚动的地方；加一个延迟，放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完
2022-05-05 21:11:53
3968
原创 vue 打印功能
需求：请求到后端数据，渲染成表格，通过打印机打印出来代码实现：list.vue<template> <div> <div class="printBox"> <div> <el-button type="primary" @click="printBtn" size="small">打印</el-button> </div> <div ref=
2022-03-29 16:02:50
2093
原创 vue上传并读取Excel，格式化成数组传给后端，返回文件流导出Excel到本地
需求：列表有上下架状态的一列，在数据过多的时候需要，统一修改。1、点击批量上下架按钮2、弹出批量导入弹框，如图13、点击下载模版，如图2，该模版是由前端定义的两个字段4、点击请选择文件，可选择本机相关文件，如图35、点击导入，会把上传的excel读取校验每一行数据是否合格，然后转化成数组作为参数传给后台，如图46、后端会返回一个文件流，前端直接下载到本地excel涉及知识：1、使用js-xlsx库，前端读取Excel报表文件2、读取本地文件理解FileReader对象的方法和事件以及上传
2022-03-29 15:08:20
4466
原创 vue中使用axios下载java后台返回文件流导出excel文档
需求：表格上方有一个导出按钮，点击后，调用后台接口，后台返回数据流，下载成功后并在本地可以打开excel。代码实现：<el-button type="primary" size="mini" icon="el-icon-download" @click="formatExportFile">金税格式数据导出</el-button>import Storage from '@/utils/localStorage'import ApiUrlconfig from '@/
2022-02-28 11:02:36
1261
原创 this.$set使用 及 element组件（input远程搜索el-autocomplete）使用
场景：element中的 input远程搜索el-autocomplete组件 使用如图，当输入商家编码时，会根据输入的内容发起接口请求，请求数据展示在搜索下拉列表里；当点击选中某个编码时，回显对应的商家名称。具体在下面代码中有实现。问题：在关闭弹框时，需要清空内容。此时直接清空了form对象，在选中商家编码后，商家名称没有进行回显，打印后却有值。vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图.
2022-02-22 15:15:25
746
原创 首次使用阿里云云效拉取代码
首先，需要公司给权限，把你加入公司项目团队。其次，使用公司给的阿里云账号、密码去登录登录https://codeup.aliyun.com/通过公司人员给开的权限点击加入团队使用RAM用户登录，输入阿里云账号，点击下一步3. 输入阿里云密码，点击登录登录手机阿里云app，生成安全码输入，点击提交验证提交验证后就进入云效代码库了，可以看到所有的项目点击左上角个人姓名处，进入个人设置配置SSH公钥，点击 生成它 进入阿里云配置SSH密钥步骤将生成的公钥复制到下面，点
2021-10-10 16:18:28
8430
1
原创 小程序跳转H5实现长截图功能；vue-cli3通过rem适配
Error:Loading PostCSS Plugin failed: Cannot find module ‘postcss-pxtorem‘报错解决
2021-08-05 17:39:28
2323
1
原创 微信小程序预览pdf，页面缓存下载过的pdf
需求： 点击预览图标查看该pdf报告问题： 1、最早是直接将请求倒的url放入到<web-view src="{{realUrl}}"></web-view>中展示，ios可以，安卓显示无法查看。 2、通过微信自身的API实现：wx.downloadFile({})、wx.saveFile({})、wx.openDocument({}) 3、对于文件较大的，下载较慢，需要点击过的进行缓存，再次点击无需下载，直接打开。 将点击过的下载的url添加给list的tem
2021-07-12 19:42:11
2892
原创 小程序中动态改变月历数组的数据
需求： 月历循环2017年1月至当前年当前月数组结构如下：// 想要的格式是 // serviceTypes该数组需要显示2017年1月至当前年当前月 // 每一年都是个大对象{ type: '2021年',id: '2021',services: []}// services该数组是该年的所有月份，如果是当前年则显示到当前月份 serviceTypes: [ { type: '2021年', id: '2021', service
2021-06-23 14:21:43
98
原创 vue中封装搜索功能并注册为全局组件
场景： 在列表的上方总会有一个模糊查询的搜索框，通过输入内容，点击搜索按钮，对列表进行查询并更新内容。思路：使用的是ui组件库是element ui，首先复制一个基本的input和一个button组成上面的搜索框。input输入框v-model绑定的值即是从父组件列表页传过来的需要搜索的值；button按钮则@click绑定搜索事件，将搜索值通过该事件发射到父组件页面，父组件页面通过接收该事件，并给参数赋值，调用接口刷新页面。在main.js中将该组件注册为全局组件，供该项目任一页.
2021-06-21 15:02:22
450
原创 深拷贝和浅拷贝---操作临时变量时，原始数据不改变
需求：如下图，点击更多指标时，底部弹出多选项，选中的选项则替换列表后两列的表头及该表头对应的表体数据。最多可选两项，当选择后没有点确认按钮则不改变列表数据；只有点了确认才会改变列表数据。思路：1、选择选项的时候，需要将选中的项放到临时数组里，如果点击了确认则将临时数组的数据赋值给原始数组；如果点击了关闭，则将原始数组的数据重新再赋值给临时数组。始终保持关闭弹框时，临时数组和原始数组的数据一致。2、最初，直接讲原始数据赋值给临时数组，导致改变临时数组时，原始数组里的数据也会被改变。后面通过..
2021-06-09 12:43:04
465
原创 echarts饼图series里的label超出边界显示不全
问题： 小程序中使用饼图，在分布均匀的情况下label内容不会被遮挡（如图一）；如果存在几个小数据分布在一侧的话会出现个别label超出上边界被遮挡（如图二）；需要调整使label文字不被遮挡，调整后的（如图三）。解决方案：推荐修改 startAngle 的起始角度值，让图表重新摆放 label 的位置。通过修改echarts饼图角度起始角度位置和生长方向minAngle: 15,//最小角度 startAngle:270, //起始角度代码：import * as echarts
2021-05-26 19:46:38
23806
1
原创 小程序scroll-view滚动组件，左边导航栏与右边内容联动，选择区间实现
效果具体思路同 小程序scroll-view滚动组件，左边导航栏与右边内容联动效果实现不同的是上面的文章为单选，这里是选择范围可以选择两个月份。思路主要是在选择月的时候通过判断一个数组，如果数组里有两个值，则再次点击会清空数组重新选择第一个push进数组；如果数组里有一个值，点击的时候会push进第二个；可以允许选择的两个值相等。具体代码<!--pages/monthOfficeModule/monSectCalendar/monSectCalendar.wxml-->..
2021-05-24 13:35:53
876
原创 小程序scroll-view滚动组件，左边导航栏与右边内容联动效果实现
效果左侧为年份，右侧为该年对应的月份，点击左侧2020年，则右侧的2020年灰色区域的标题滚动到最顶部；滚动右侧区域当2020年滚动到顶部时，左侧选中2020年高亮显示。思路使用scroll-view组件分别包裹左侧及右侧内容，点击左侧年份时，给其动态设置样式并让右侧区域滚动到指定位置；通过给右侧的scroll-view标签绑定scroll-into-view属性，值为某子元素id，根据id滚动到该元素。给右侧每一年份区域设置id值，左侧点击事件携带该点击项的id值，并将该值动态绑定给scroll.
2021-05-24 13:16:04
3994
3
原创 微信小程序中使用vant中的Calendar 日历组件
需求： 小程序需要实现日历的需求，可以单选、可以选择区间、节假日和周六颜色高亮、返回本月。具体如图，类似猫眼app的日历选择。思路：参考市场上含有日历的小程序及app，确定是自己实现还是使用组件，骨朵使用的是Pikaday。确定使用Vant Weapp组件库中日历。需要对源码进行一些修改，首先样式的修改、包括顶部周日到周六、节假日及周六日日期的颜色、返回本月按钮的添加及样式。前后实现了三种展示日历的不同方式4-1. 第一种，根据官方示例引入日历组件，平铺整个页面。选择日期后会跳转返回列表
2021-05-17 12:31:09
8480
2
原创 微信小程序体验版new Data(data).getTime()返回NaN的问题
场景：在开发者工具上，没有任何问题；发布了体验版后，在苹果手机看的时候，所有的日期都显示NaN定位问题：苹果手机，new Date(data).getTime()如果传入的时间格式是2020-07-22 12:00:00，就会返回NaN。解决办法：new Date(date.replace(/-/g, ‘/’)).getTime()，将横杠转为斜线格式。参考文章：苹果中的new Data(data).getTime()返回NaN的问题微信小程序new Date()方法失效问题解决方法..
2021-04-25 15:57:30
1264
1
原创 微信小程序如何通过npm安装组件库
微信小程序中引入组件库vant1、安装npm包 微信开发文档在小程序项目的目录下打开终端，执行命令npm install2、安装组件库npm i @vant/weapp -S --production3、构建npm点击开发者工具中的菜单栏：工具–>构建npm4、勾选“使用 npm 模块”选项：详情–>使用 npm 模块5、具体的组件引入和使用根据官方文档示例即可。参考文章：微信小程序如何引入npm包？如何在微信小程序用npm引入组件库...
2021-04-25 15:35:51
1471
1
原创 微信小程序实现一键长图并保存图片到相册
效果：类似骨朵的一键长图骨朵剧集排行榜通过点击按钮实现长截图，并可以滚动，长按保存或者转发。思路：参考骨朵数据，使用的是html2canvas，骨朵的小程序是个空壳，所有的页面都是H5写的，是一整个H5项目通过<web-view src="{{realUrl}}"></web-view>嵌入到小程序中，一键长图通过用html2canvas插件生成长图。原生小程序是无法使用html2canvas插件的。微信小程序提供了webview组件以承载web页面。有了这个组件就可
2021-04-19 11:24:58
7654
1
原创 微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表
需求需要解决下方图中的问题，当底部弹出弹出框时，需要除弹出框外的元素置为透明灰色。下图是真机效果。此时，echarts图表依旧高亮显示，需要去掉该高亮效果。下图是微信开发者工具效果，开发者工具显示正常，真机echarts图表则会高亮。问题所在通过微信小程序Echarts覆盖正常组件问题解决该文章知道：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。cover-view 可以覆盖在原生组件之上。解决方式将写弹出层使用的 view 组件全部替换成 c..
2021-04-18 16:51:33
2327
原创 微信小程序中列表滚动到顶部表头吸顶效果
效果具体实现// 通过样式实现顶部吸顶效果// 核心样式.stickyClass{ position: sticky ; top: 70rpx; // 距离顶部还有多少时候产生吸顶效果 z-index: 9999;}<view class="tableList"> <view class="listHead stickyClass"> <view>排名</view> <view>日期.
2021-04-18 16:21:38
891
原创 小程序中通知消息栏的内容自动上下滚动
效果图通过微信小程序swiper组件实现swiper | 微信开放文档<view class="newNoticeBox"> <view class="newNoticePicBox"> <image class="newNoticePic" src="../../../images/newNotice.png"></image> </view> <swiper class="swiper_zi" v..
2021-04-18 15:48:31
1009
原创 在微信小程序中使用 ECharts
示例下载首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。其中，ec-canvas 是官方提供的组件，其他文件是如何使用该组件的示例。引入组件创建图表
2021-04-18 15:34:29
356
原创 原生小程序实现对称加密AES
需求： 前端请求到后端返回的数据，涉及到一些敏感的数据，需要进行加密处理，前端进行解密。思路：后端加密，前端解密；后端生成加密的key值，告诉前端，前端解密的时候也需要使用该key值去解密。小程序无法引入cdn插件crypto.js，复制该插件的源代码：https://blog-static.cnblogs.com/files/gygg/crypto-js.js，将源码粘贴在utils下新建crypto-js文件下封装一个公共的解密函数。在具体的vue组件中直接调用解密函数。步骤：
2021-03-24 17:12:14
353
原创 vue项目在pc端实现对称加密AES
需求： 前端请求到后端返回的数据，涉及到一些敏感的数据，需要进行加密处理，前端进行解密。思路：水印通过变量进行赋值，登录成功后，将用户名及手机号后四位拼接。均匀平铺在页面上，通过文章发现有三种方案，分别是：div/css、canvas、svg。还有明水印、暗水印的区分及破解。问题：除了登录页，其余页面都要展示水印。点击系统右上角的退出按钮，退出到登录页后，登录页存在水印。token失效后，跳转登录页，登录页存在水印。登录成功到首页后，点击菜单切换后，点击退出按钮，登录页存在水印
2021-03-24 15:35:49
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人