鹏仔工作室的秘密基地

还有个问题，就是多选文件上传成功时 :on-success="handleAvatarSuccess" （文件上传成功时的钩子） 此方法只会执行一次，多个文件只push到了一条数据。当上传文件为其他格式，效验格式错误时，总会触发 :before-remove="beforeRemove" （删除文件之前的钩子）我们只需在 :before-remove="beforeRemove" 事件时判断下当前文件是否为成功的附件即可。最终方案如下所示（等所有上传请求完成后，再给fileList进行push赋值）

好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。

上次做了一个选择多个数据生成多个二维码并下载，当时项目催的紧，就简单写了个循环生成二维码下载，一次性会下载很多文件，特别难整理；刚好这次项目又遇到类似这种功能，需要一次性批量下载多个文件，那么就安排下打包下载吧！需要用到的是file-saver、jszip两个插件首先，我们安装这两个插件，在控制台中依次输入下方命令执行上方依赖安装完成，我们在需要实现打包下载的页面中引入这两个插件在data中，我就简单定义一个数组 fileList ，用来存放要下载的文件链接接着就是在 methods 中写

这周开会又新增一个小功能，就是需要通过身份证号/手机号在地图查询（后台返回经纬度），标记位置，想着挺麻烦，做的时候发现没啥技术，分享给大家。然后每次查询，通过调后台接口，拿到对应经纬度，赋值给longitude和latitude，那么地图就会展示对应经纬度区域，如果同时想展示定位的图标，那就按上方方式给markers赋值，可标记多个位置。（获取到数据后，最好不要直接给markers赋值，先let随便定义一个赋值，再将let定义的赋给markers，否则会出现不显示标记点现象）围观地址 un

近期项目需要实现在后台管理添加一个大屏统计页面，大屏弹窗用到elementui的 对话框、选择器等ui插件，因为默认的elementui的样式与大屏样式格格不入，所以我需要强制修改他的样式，那么我就想着给当前组建的body添加一个独一无二的类名，再直接强制修改类名下的elementui样式。首先我们在mounted中写入mounted(){ document.getElementsByTagName("body")[0].className="body-class";}这样我们...

项目中，需要实现获取当前位置的经纬度，或者搜索某个位置并获取经纬度信息，我使用的的是vue，地图使用的是百度地图。默认自动获取当前位置经纬度拖动小红标 获取经纬度关键词 查询获取经纬度前期准备首先，我们需要取百度官方申请一个地图api秘钥，https://lbsyun.baidu.com/apiconsole/key进入后在应用管理，我的应用去申请即可。申请好以后，我们打开vue项目中public文件下的index.html文件，拼接百度AK值并引入&lt......

最近鹏仔刚接触uniapp，项目使用uniapp开发微信小程序，需要实现一个长按时进行语音录制，限制录制时间最大为60秒，录制完成后，可点击播放，播放时再次点击停止播放，录制完成长按实现删除功能，删除后又可重新录制（如上图所示）。视频演示https://v.qq.com/x/page/b325884hmr3.html下放为整体代码，可能不是很完美，没有想象中的那么流利，但是功能都有实现，欢迎借鉴（其中包含CSS实现语音音阶动画效果，自行复制即可获取）。HTML部分<...

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

上篇文章说了最近开发H5可视化编辑器，生成的H5需要嵌套在原生APP中，那么必然需要调用原生app的事件或者app调用我H5的事件。因为，H5首页内容可能会添加的丰富比较多，需求怕一次请求加载慢，所以让搞了分页，无限滚动加载，但是app把H5的滚动禁掉了，所以H5无法获取滚动事件，只能是app到底触发H5的事件，那么app如何触发H5事件。我是vue开发的，在mounted中，按下放方式定义，onScrollBottom为与app定义的事件名，this.onScrollBottom是...

最近用VUE开发的财务系统，牵扯了很多金额，金额几千上万，数字不好区分，需求需要实现金额三位一隔，每三位用逗号或者其他符号隔开，那么安排一下。// 金额三位间隔export const interval = (key) => { key += ''; let x = key.split('.'); let x1 = x[0]; let x2 = x.length > 1 ? '.' + x[1] : ''; let reg = /(\d+)(\d{3})/;...

这两天想着给网站写一个H5app玩玩，文章列表页想实现是否为当天发的文章，如果是当天那么显示一个NEW标识，后台返回的是发帖时的时间戳，我需要判断这个时间戳是否为当天时间即可。vue中直接在标签中判断如下（item.PostTime为发帖时间戳）<img class="new" src="@/assets/img/new.png" v-if="new Date(Number(item.PostTime)* 1000).toDateString() === new Date().toDat

经常用到，所以记录一下，刷新方法很多，用过这三个，所以只记录这三个，后面遇到在更新。第一种this.$router.go(0);第二种location.href = "javascript:history.go(0);";第三种window.location.reload();第一种和第二种，只支持安卓和PC第三种支持安卓、IOS、PC都支持，所以推荐第三种。原文围观地址http://www.sharedblog.cn/post/218.html个人博客..

vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能，就网上找了一下，清理了无用代码，简单方便，因为项目中多个地方需要使用，所以我将它整理为组件，通过ref和传值控制，下面代码我单独整理出来，可自行封装组件（只支持移动端，不支持pc端）。代码中，css自行修改一下宽高，背景之类即可。代码如下<template> <!-- 手写签名组件 --&g...

H5移动端看一些接口返回的参数，或者console打印的参数之类，没办法直接查看，用电脑f12切换移动端测试没有真机测试准确，所以使用Vconsole特别方便。安装麻烦，所以引入第三方cdn简单快捷。下面是bootcss提供的cdn外链<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><scrip..

vue中如何点击返回上一页，vue判断没有上页返回首页vue中返回上一页// 返回returnBtn(){ this.$router.go(-1);},返回上一页，先判断是否有上一页，没有则返回指定页面// 返回returnBtn(){ if (window.history.length <= 1) { this.$router.push({path:'/'}); return false } else { this.$router

苹果手机new Date()时候的坑最近开发H5小游戏，有一个游戏活动倒计时，后端给我提供活动结束时间为（2021-01-13 12:00:00）这种格式，我需要获取当前本地时间，用倒计时时间减去当前时间，那么我得先转为时间戳，我先将后端返回的时间通过new Date("2021-01-13 12:00:00") 复原，在使用getTime()转为时间戳，再将我们当前时间转为时间戳，通过结束时间的时间戳减去当前时间的时间戳，获得相差的时间，在转为 时分秒（01:15:10）。在电脑端f12正常.

项目中，实现调用摄像头拍照，进行人脸识别，需要传给后端，拍照后我转的格式是base64，需要给后端传file文件格式，安排vue中，自行在assets新建js，封装如下，复制粘贴进去即可/** * dataurl: base64 * filename: 设置文件名称*/export const dataURLtoFile = (dataurl, filename) => { let arr = dataurl.split(','), mime = arr[0].match..

网上找的个案例，略加整理，简已封装，挺完美的。功能是将数字金额转为汉字金额vue中，自行在assets新建js，封装如下，复制粘贴进去即可/** * 数字金额转汉字金额 * val为字符串类型 */export const toChies = (val) => { //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var cnIntR

elementui 日期选择器设置 开始时间不能大于结束时间，结束时间不能小于开始时间。简单容易，就不做详细解释了，复制粘贴，修改对应参数名即可。iView 日期时间选择器设置开始时间至结束时间限制。【推荐】前端软件下载。

测试小姐姐让输入框不允许输入空格，安排。刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以使用下面这个方法。input上添加下方代码（我用的vant也一样,包括elemenui等）@keydown.native="keydown($event)"methods中写入下方代码methods:{ // 禁止输入空格.

iView 日期时间选择器设置开始时间至结束时间限制开始时间不能大于结束时间结束时间不能小于开始时间<DatePicker type="datetime" :options="startOption" v-model="startTime" placeholder="开始时间" format="yyyy-MM-dd HH:mm"></DatePicker><DatePicker type="datetime" :options.

项目中，有选择开始日期和结束日期的，写好了分享给大家吧！如有问题，请多多指教，谢谢。功能是开始日期可选今日或今日之后的日期，结束日期必须在开始日期之后，用的是elementui，案例分享给大家。我的效果是 报名开始时间（当日起之后）、报名结束时间（报名开始时间之后）、会议开始时间（报名结束时间之后）、会议结束时间（会议开始时间之后）。根据下图所示，选择A之后（清除B、C、D），B只能选择A之后的日期，选择B之后（清除C、D），C只能选择B之后的日期，选择C之后（清除D...

原文http://www.sharedblog.cn/?post=211平时项目中，经常会做一些下拉菜单等效果，这种效果可能会需要通过一个按钮来控制显示隐藏，并且当点击页面其他空白区域时，也要将其隐藏。简单写个Demo <!-- 按钮 --> <button @click.stop="ShowHidden = !ShowHidden">显示或...

原文地址http://www.sharedblog.cn/?post=209附Demo下载地址https://www.lanzous.com/i8azkib首先，第一步，相信大家已经搭建好vue框架了，搭建好，启动如下图所示vue搭建好之后，我们开安装vuex首先，我们输入命令npm install vuex --save接着，我们启动项目n...

原文地址http://www.sharedblog.cn/?post=203首先，我们在src中创建一个公共js,index.js，文件名自己起吧,写入下方代码import Vue from 'vue'// 全局使用var bus = new Vue()export default bus其中 bus 是我自定义的命名，大家随便定义。接着，我们在传值页面中，引...

vue项目中，需要实现点击对应按钮，滚动到对应页面位置，下面分享一个简单实用的方法原文地址http://www.sharedblog.cn/?post=205<template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一&l...

举个简单的例子原文地址http://www.sharedblog.cn/?post=206输入框使用v-model双向绑定，使用maxlength属性做限制，最多只能输入50字符span中 使用最多限制的50，减去nameText当前的长度即可<input type="text" v-model="nameText" maxlength="50"><s...