共享博客 - 简单搜索

js正则过滤金额输入时限制只能输入数字与1个小数点，且0开头第二位则不能为0

2024年03月25日今天写小程序时，有个充值功能，需要输入充值金额，我看了下支付宝的水电表缴费交互效果，发现调启数字键盘后“输入0后第二位则不能为0，只能为小数点”“第一位不能输入小数点”“保留两位小数”“同时也只能输入数字与小数点（在非数字键盘的情况下）”，看到这兴趣就来了，肯定得搞起来。代码如下// 调启数字键盘输入事件 valChange(val) { this.amount += val; // 只能输入"数字"和"."

正则效验正则金额效验金额

object-fit:cover;在小程序中不起作用，小程序图片变形了如何处理

2024年03月25日前几天写了一篇文章 css防止图片变形 object-fit: cover;使用object-fit: cover;来防止图片变形，说巧也巧，这两天自己开发玩玩的zblog小程序“污污情话”封面刚好被挤压变形，于是，就给图片添加了这个css属性。what？但是添加了并没有任何卵用，刚开始我还以为我自己记错拼写了，还特意复制过来试了下，还是没有任何作用......截图小程序页面先看看对比效果吧，左侧的轮播图是被挤压变形了，而右侧轮播图是没有被挤压变形，保留原始尺寸，多余的被裁剪

小程序小程序开发微信小程序小程序图片变形 css图片变形 css图片自适应

uniapp小程序实现录音 uniapp小程序长按录音点击播放等功能（CSS实现语音音阶动画效果）

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

uniapp 录音 uniapp录音小程序录音长按录音小程序长按录音 uniapp长按事件

vue中调用百度地图获取经纬度

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

vue 经纬度地图百度地图 vue调用地图地图调用经纬度经纬度获取 js获取经纬度

elemtnui 表格如何修改某行文字颜色

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

elementui vue table tbale文字变色文字颜色 css修改表格颜色

uniapp中text-indent不起作用，uniapp首行缩进不管用如何解决？

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

uniapp text indent 首行缩进 text indent不起作用首行缩进不管用

js替换字符串某个字符，js修改字符串中指定字符

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

JS替换字符串替换字符串指定字符替换字符串字符修改字符串字符

小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId

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

网页跳转小程序 h5跳转小程序小程序获取参数获取openId 微信授权小程序授权公众号

使用HBuilderX将vue或H5项目打包app

2024年03月24日好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第一步：我们将vue项目使用npm run build进行打包，打包后默认获得dist文件（如果是纯HTML网页等，可忽略此步骤）；第二步：我们下载HBuilderX，可前往官网下载 https://www.

HBuilderX HBuilder 打包如何打包app 网页打包app vue打包app 软件打包

nvm常用命令有哪些？nvm如何切换node版本？nvm如何下载node？

2024年03月24日之前公司有很多老项目，需要切换node低版本才能正常使用，但是还有使用node高版本新项目，总不能每次更换项目就卸载重装对应版本的node，所以就使用了nvm来管理node版本。每次使用时，nvm命令就记得很清楚，可是长时间不使用，就会有点遗忘，所以还是记录一下，方便日后使用！首先，没有安装nvm的，可以去下载安装 https://github.com/coreybutler/nvm-windows/releases在安装nvm之前，请先卸载node；成功安装后，我们在cmd

nvm常用命令有哪些 nvm如何切换node版本 nvm如何下载node nvm安装包 nvm node安装包

vue按钮限制连点封装自定义指令限制连点

2024年03月24日最近测试提出连点bug，但是记得之前都加了连点限制，想了想才想起部分按钮用的a标签或者其他标签实现的，之前限制连点用的 display:none; 属性，在针对button按钮时是可以限制连点的，但是对于span、a等标签是无法限制连点，所以就用到了CSS中的 pointer-events: none; 属性，这个属性在鹏仔之前写的网页水印插件中也有使用 https://www.lmcjl.com/post/200.html 属性具体大家可百度了解。好了，下面是对应代码以及添

连点 vue限制连点连点限制按钮连点

elementui多选上传 before-upload 格式效验错误总会触发before-remove （el

2024年03月24日今天鹏仔项目中使用elementui做一个批量上传附件时，遇到了以下问题，那么顺便分享一下解决方案。问题通过elementui的 :before-upload="beforeAvatarUpload" （上传文件之前的钩子）beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isJPG2 = file.type === 'i

before remove before upload elementui 上传

（安卓/IOS）APP调用H5事件，H5调用APP事件

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

app ios h5调用app事件 app调用H5事件 vue中调用app事件

VUE中实现点击打印功能 vue网页打印 vue-easy-print

2024年03月24日首先，我们在vue中输入命令安装vue-easy-printnpm install vue-easy-print --save接着，我们需要在需要用到的页面引入插件import vueEasyPrint from "vue-easy-print";继续将需要打印的部分，使用下放标签包裹即可<vue-easy-print ref="easyPrint" tableShow></vue-easy-print>点击触发

vue 网页打印 vue打印点击打印网页打印

css防止图片变形 object-fit: cover; 属性介绍

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

object fit css css3 前端图片变形解决图片变形 css图片压缩图片裁剪 css图片裁剪