鹏仔工作室的秘密基地

哈喽，大家好，最近鹏仔开发的项目是学校校内车辆超速方面的统计检测方面的系统，在开发过程中发现有个小功能，就是用户移动端添加车牌号，刚开始想着就一个输入框，提交时正则效验一下格式就行，最后感觉不是很方便，所以就简单自己手写了一个H5车牌号软键盘，由于每天工作比较忙，就没封装成插件了，趁着晚上空闲，给大家整理一下demo，复制即可使用，或者自行封装一个组件调用也可以（代码中一些写法可能过于粗糙，时间有限，任务多，就粗糙写一下吧，反正功能是实现了）。第三、四、五、六位是字母和数字，不包含O；第八位是 电车选项。

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

之前公司有很多老项目，需要切换node低版本才能正常使用，但是还有使用node高版本新项目，总不能每次更换项目就卸载重装对应版本的node，所以就使用了nvm来管理node版本。最后，还需要注意的是部分使用nvm下载node版本，npm会有问题，如有问题，就切换下相近版本进行尝试。每次使用时，nvm命令就记得很清楚，可是长时间不使用，就会有点遗忘，所以还是记录一下，方便日后使用！然后再整理下常用的命令（注：使用nvm安装node时，会自动将对应的npm版本一起安装）首先，没有安装nvm的，可以去下载安装。

用HBuilderX打包安卓正式app时，我们需要使用自有证书，安卓证书是免费申请的，虽然HBuilderX有申请教程，为了自己后期使用方便，今天给大家分享下详细的申请教程！首先，我们去Oracle官网 https://www.oracle.com/technetwork/java/javase/downloads/index.html 下载jre安装包，根据自己操作系统去选择下载，我是Windows平台，如下选择。36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期。

因为这次属于一个二开项目，一些缘由下，需要对比合并修改，一开始没搞git、svn等，于是我就用到BeyondCompare软件来进行对比修改，需要这个软件的，可自行去下载，下载地址 http://www.qzhan.vip/post/8033.html将两份...,共享博客。因为这次属于一个二开项目，一些缘由下，需要对比合并修改，一开始没搞git、svn等，于是我就用到Beyond Compare软件来进行对比修改，需要这个软件的，可自行去下载，下载地址。这样，我们就成功过滤掉时间戳对比了。

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

刚开始想着是代码出现了问题，但是我用360浏览器发现正常使用，没有出现跨域问题，于是查了相关资料，最终发现是升级了谷歌浏览器后配置出现了问题。早期开发的一个后台项目，需要在浏览器中通过读卡器设备读取身份证信息，使用谷歌打开，报了如下跨域问题。查询后，修改为“Disabled”，并Relaunch重新启动下，点击后会自动重启浏览器。进入谷歌浏览器，在网址栏输入下方路径访问。重启后，就解决了此跨域问题。接着输入下方关键词查询。...

大家好，我是小编鹏仔，近期给学校用uniapp开发了一款校园小程序，小程序有一些活动、咨询、公告、请假等通知，需要通过微信推送提示，用小程序自己的订阅方法有一些限制，于是需求这边想用绑定的学校公众号推送，因为小程序获取用户的openId和公众号的openId不一致，所以必须要调用公众号授权，因为项目已经基本做完，突然加这个我感觉挺麻烦的，一开始想偷懒我是拒绝修改的...emo...，后来还是妥协了，还是突破下，研发吧！（因为开发工具端原因，上图凑合的预览下吧！...

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

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

平时用到elementui时，经常遇到多级树形结构，但是后端往往给前端反的每一级字段不一致，如果写个遍历循环将其改为一致麻烦的，不如直接将后台发的数组转为字符串，再将字符串中不一致的字段替换成一致的即可，下放为如何替换字符串中需要替换的指定字符方法。案例如下一、替换字符串中所有为a的字符为elet str = 'abcabcabc';str = str.replace(/a/g, 'e');console.log(str);// 打印结果： ebcebcebc...

今天在uniapp中写消息详情，给内容加个首行缩进，于是就直接加了text-indent，发现没有任何作用，如果是input输入框之类可以使用padding，但是文本标签只能使用text-indent了。解决方法 css加首行缩进的同时再加上 display: block; 属性，当然 inline-block 等也是可以解决的，根据具体需求去尝试下吧！围观地址：uniapp中text-indent不起作用，uniapp首行缩进不管用如何解决？今天在uniapp中写消息详情，给内...

项目中用到了elementui的表格，今天开会突然说要需要欠费的用户的一行文字为红色，那么安排一下。如上图所示首先，我们在el-table标签中加入 :row-class-name="tableAddClass" ，双引号自定定义命名。<el-table :data="tableData" :row-class-name="tableAddClass"></el-table>接着在methods中写入下放代码tableAddClass({row,...

项目中，需要实现获取当前位置的经纬度，或者搜索某个位置并获取经纬度信息，我使用的的是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部分<...

上图为转换前后对比平时页面链接传参为对象，我们需要转为字符串在传值，取值时又得转为对象，所以比较常用，就整理下吧！对象转为字符串JSON.stringify(obj)json字符串转为对象JSON.parse(str)原文地址 http://www.sharedblog.cn/post/228.html...

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

object-fit:cover;在小程序中不起作用，小程序图片变形了如何处理前几天写了一篇文章 css防止图片变形 object-fit: cover;使用object-fit: cover;来防止图片变形，说巧也巧，这两天自己开发玩玩的zblog小程序“污污情话”封面刚好被挤压变形，于是，就给图片添加了这个css属性。what？但是添加了并没有任何卵用，刚开始我还以为我自己记错拼写了，还特意复制过来试了下，还是没有任何作用......就这...​查了下小程序文档，原来微.

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

css防止图片挤压变形 object-fit: cover; 属性介绍最近给公司开发一个简单的H5可视化编辑器，如上图所示，左侧点击添加基础组件，在中间区域预览展示，右侧区域对中间展示组件进行一对一编辑，最终生成H5页面。提测给测试小姐姐，在右侧上传了图片，说中间图片被挤压了，那么安排下，如上图所示，添加了红色注释，已添加的属性和未添加的属性图片进行对比所示，图片都是嵌套到一个固定宽高的div中，并且图片width和height都为100%，未添加object-fit: cover;属性的会..

系统：zblog（微信）主题：青春小程序版本：1.0搭建准备1.域名（已备案，需配置https）2.服务器/主机/空间（支持https）3.已注册微信小程序账号4.已搭建zblog网站5.青春主题程序包6.zblog ONE小程序插件域名注册https://cloud.tencent.com/act/cps/redirect?redirect=1069&cps_key=df21697c67b66ff750ec30c5547f1edb&...

最近用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...

苹果手机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

在 utils 中自行新建文件 tool.js ，放入下放js代码/** * function: 60秒内（刚刚），60秒至60分钟（**分钟前），1小时至24小时（**小时前），1天至15天（**天前），其他为正常日期显示 * @number 時間戳 */function formatMsgTime(number) { var dateTime = new Date(number); // 将传进来的字符串或者毫秒转为标准时间 var Y = dateTime.getFullYe

<button class="operation-list" type="button" open-type="share">分享</button>做小程序时，给文章底部添加分享、收藏等功能，分享用的官方自带方法(onShareAppMessage)，必须使用button标签，并添加open-type="share"，我给button直接添加 border：none; 没反应，后来使用伪元素才去除了边框，如下.operation-list::after{...

话不多说，先上完整代码在utils文件下新建文件“http.js”，放入下方代码const host = 'http://www.iqzhan.com'; // 接口網址const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域// 接口地址拼接const urls = { home: host + domain + 'home', // 获取首頁接口 article: host + domain + 'article', // 获取文章詳情接口}

测试小姐姐让输入框不允许输入空格，安排。刚开始用的下面这个方法，因为我是电脑端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...

tp-watermark.js网页添加水印插件作者：鹏仔先生上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...那就自己简单写个网页添加水印插件吧， tp-watermark.js身为初级前端，写法比较low，但是功能很完善，请大家多多指导下载插件：点击下载DEMO...

query传参方式this.$router.push({ path: '/home', query: { id: '19961022' }})query取值方式mounted(){ this.id = this.$route.query.id;}param传参方式this.$router.push({ name: 'Home', params: { id: '19961022' }})param取值方式mounted.

结合之前文章，自定义子组件的使用，来实现一个子传父的功能，功能很简单，点击子级页面按钮，将值传递给父级中。首先，我们需要在子组件中，设置一个点击按钮<button @click="GetBtn()">点击按钮</button>接着在JS中，data定义一个参数ConKey,在点击事件中，使用$emit进行传参export default { name: 'childer', data () { return { ConK..

结合上篇文章，自定义子组件的使用，来实现一个父传子的功能，功能很简单，点击父级页面按钮，将值传递给子组件中。首先，我们在父级页面中，定义一个按钮标签（当然，父传子可以不需要设置点击事件，也可传值，在这里只是为了更加清晰演示）<button @click="keyBtn()">按钮</button>在JS中，我们给data中定义一个keys为传的参数，在点击事件 keyBtn()中，给keys赋值export default { name: 'app',.

首先在src下建立文件夹 components ，在里面随意创建一个子组件vue文件（我创建了一个childer.vue），创建好以后，编写子组件的内容。在父组件中，我们首先引入需要的子组件文件import childer from './components/childer';接着注册export default { name: 'app', data () { return { } }, components:{ childer: chil.

安装sass依赖npm install --save-dev sass-loadernpm install --save-dev node-sass安装完以后，在vue页面的style中添加 lang="scss"CSS<style lang="scss" scoped></style>添加后，自行写一段嵌套的css，如果有效果就OK了。如果报错，在package.json检查下sass-loader版本，可能是版本太高了，可以进行安装低版本即可。.