- 博客(51)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue高德地图H5定位及城市选择器控件实现详细教程
需求说明：H5实现初始化通过高德地图进行定位城市，用户也可以自行点击选择其他城市主要功能点：定位、城市选择器实现效果一、初始准备这里采用 高德地图 JS API去实现上述两项功能，使用高德地图 JS API 开发地图应用需要先注册账号并申请Key,https://lbs.amap.com/api/javascript-api/guide/abc/prepare首先，注册开发者账号，成为高德开放平台开发者，地址 https://console.amap.com/dev/id/choose.
2021-09-30 09:21:37
7322
2
原创 Angular + xlsx + xlsx-js-style实现多个sheel页Excel下载
需求：前端实现将后台返回的数组数据转化为多页excel，并自定义样式。
2023-02-06 15:21:47
930
3
原创 Angular基于ngx-translate实现国际化流程
1、下载ngx-translate的依赖库 2、在项目根模块（app.module.ts）中配置ngx-translate
2022-10-21 10:50:30
613
原创 angular同一页面跳转重新执行方法
问题：当收到导航到当前URL的请求，Angular路由器会忽略，重复点击同一链接页面不会刷新，也不会重新执行ngOnInit函数。
2022-09-28 10:43:43
2248
原创 unsafe value used in a resource URL context，angular框架下嵌入iframe报错问题解决
直接为iframe中src赋网址浏览器会报错。由于 iframe 的 src 属性是资源 URL 安全上下文，不可信源可以在用户不知情的情况下执行某些不安全的操作。所有要使用angular提供的DomSanitizer服务。
2022-09-27 13:49:37
1139
原创 vue项目拍照或上传图片并转化为base64格式（已实现）
需求：vue项目中，H5点击按钮触发上传图片或拍照上传，上传的图片使用base64位传输到后台，最终实现身份证拍照识别功能。实现过程（1）设置一个按钮和一个隐藏的input，点击按钮是触发按钮上传图片和拍照功能<div> <input id="filePhoto" type="file" ref="file" accept="image/*" hidden @change="onInputChange($event)" /> <div @click=.
2022-05-25 11:31:34
1547
原创 vue项目中基于qrcode.js实现二维码展示
需求说明：在vue项目中，根据后台返回借助qrcode.js动态生成二维码展示在页面上实现效果：qrcode.js下载地址：http://davidshimjs.github.io/qrcodejs/1、vue项目引入qrcodenpm install qrcodejs22、在二维码页面引入qrcodeimport QRCode from ‘qrcodejs2’3、使用//页面定义<div id="qrcode2" ref="qrcode2" class="icon-m2" s.
2022-05-23 09:59:28
1391
原创 vue项目H5调起高德或百度地图手机应用，或调起高德百度网页版实现导航功能（已实现）
需求说明：H5实现唤起高德和百度地图导航到目标景点的功能分析：用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版.........
2022-04-27 14:20:16
8635
3
原创 js浮点数计算精度问题---输入支付金额为19.9元时，提交却是19.89元
一、问题内容在码牌支付过程中，输入支付金额为19.9元时，后端保存的却是19.89元二、问题原因由于js在进行一个浮点数与任何Number数据运算时，可能会产生精度不准确的问题。问题代码：tradeFee = parseInt(Fee*100); //Fee为金额浏览器在执行19.9*100时得到的结果是1989.9999999999998，会存在0.0000000002的误差，再通过parseInt方法取整后就造成了结果为1989三、解决方案由于浮点型直接计算可能会出问题，所以可以将
2022-04-25 10:00:39
2251
原创 获取时间倒计时函数封装
需求：根据后台返回的失效时间进行倒计时计算，并实时进行倒计时内容变化效果：//倒计时计算 endDate格式：'2022-03-16 22:19:02' queryObtainTimeForEnd: function(endDate) { var interKey = setInterval( () => { let date1 = new Date().getTime() //处理火狐IE浏览器不兼容问题
2022-03-28 09:51:49
83
原创 H5实现使用clipboardjs复制页面信息至剪贴板
需求说明：在vue项目中，设置一个按钮，点击后将页面中某个信息复制到系统剪贴板。主要使用的clipboardjs插件一、引入clipboardjs可以使用npm命令安装，npm install clipboard --save但我使用的方式是下载了该文件包，将clipboard.min.js放入项目某文件夹中二、使用1、在需要复制功能的页面引入该文件import ClipboardJS from '@mvue/rights/common/util/clipboard.min.js2、代码.
2021-12-29 14:42:06
1344
原创 H5唤起手机电话功能
记录一个简单有趣的功能，通过h5点击电话图标唤起手机拨打电话功能，以为很难，发现好简单，简单的快乐 //拨打电话call: function(number) { window.location.href = 'tel:' + number; },传入number就可以直接显示出号码拨打...
2021-12-20 15:26:47
658
原创 vue中for循环作用域问题处理
最近在一个需求开发中，遇到闭包导致了疯狂报错需求是需要在一个数组中找到typeName为生活权益N选1的对象，将其中resourceList中所有对象的expenseId拼接起来作为入参进行接口调用，如果调用返回成功则设置该对象的isReceive为0rightsList列表格式："rightsList": [ { "typeName": "互联网权益N选1", "isReceive": '1', "resourceList": [ .
2021-11-11 10:34:48
1200
原创 vue中路由拦截router.beforeEach获取路径参数
vue中路由拦截router.beforeEach获取路径参数方式地址：http://localhost:8088/rights/card?rightsId=QY21JX0802X5V3&resourceId=ZY21JX0802HVHG在router.beforeEach获取路径参数方法
2021-11-10 11:12:40
3905
原创 [email protected] postinstall: `node lib/install.js` npm install 时候报错
解决：在命令后加参数 --ignore-scriptsnpm install --ignore-scripts
2021-11-03 10:59:07
1412
原创 error in ./src/assets/images/logo.png报错
vue项目执行时疯狂报错找不到图片解决：npm uninstall image-webpack-loadercnpm install image-webpack-loader --save-dev
2021-11-03 10:56:46
6489
3
原创 css的box-shadow属性创建带阴影按钮
新需求需要绘制一个带有阴影的按钮，如下图所示主要采用box-shadow属性，代码如下<div class="zfbotton-div"> <button class="zfbotton">支付</button></div>.zfbotton-div { position: absolute; top: 75%; height: 1rem; width: 100%; left: 50%; transform: t.
2021-10-13 15:44:07
242
原创 H5项目dialog弹框封装
需求：H5项目在删除地址时需要弹出弹框提示是否确认退出登录，但该项目体积较小，没有引入组件库，所以决定自己封装一个dialog弹框。子组件<template> <div v-show="dialogVisible"> <div class="van-overlay" style="z-index: 2008;"></div> <div role="dialog" class="van-dialog" styl.
2021-09-24 16:31:37
788
原创 hexo配置GitHub/gitee双部署
GitHub作为国外站点实在是比较慢也不太稳定，所以决定把博客搬到国内的gitee上，提高访问速度。gitee创建仓库1、首先登录gitee, https://gitee.com/ 创建仓库2、配置sshkey由于之前生成过，所以只需要找到之前的id_rsa.pub文件打开复制即可点击gitee设置，去配置sshkey点击SSH公钥，输入标题和复制的公钥进行配置hexo项目配置在hexo根目录的_config.yml中进行配置仓库地址配置完成，执行hexo g -d将博客推送到
2021-08-25 11:10:09
1006
原创 短信验证码功能编写
H5短信验证码功能，点击发送验证码调用后端接口，页面展示一分钟倒计时，倒计时结束重新显示发送验证码<li> <span class="ipt-name accounts"></span> <input type="tel" maxlength="11" placeholder="请输入手机号" v-model="phone" /> </li.
2021-08-25 11:02:04
254
原创 图形验证码功能编写
H5图形验证码功能，初始化显示图形验证码，点击图片切换验证码图片<li> <span class="ipt-name captcha"></span> <input type="text" maxlength="11" placeholder="请输入验证码" v-model="graphValidateCode" /> <img @click="chan.
2021-08-25 10:59:24
143
原创 jQuery获取url参数函数封装
路由跳转传参通过jquery进行参数获取，函数封装如下function getParam() { var url =window.location.href; let urlParams = url.split('?')[1]; let obj = {} if(urlParams){ let arr = urlParams.split('&'); for(let i = 0; i &.
2021-08-25 10:54:48
155
原创 vue-pdf实现PDF文件流展示
需求说明：后台返回PDF文件流，前端使用vue-pdf插件进行展示最开始搜索出的插件都是pdf.js，但由于该vue项目不是特别完整的结构，没有public/assets文件夹,一直报找不到那个文件，最后只好放弃换一个方式。最终采用了vue-pdf插件，可以直接安装，方便快捷下载vue-pdfnpm install vue-pdf -D页面使用<pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComp.
2021-08-25 10:52:50
3084
2
原创 layui 动态添加多个日期选择控件laydate
需求说明：如下图所示，点击循环周期选择不同类型循环周期，时间区间根据循环周期进行动态变化，若是选择周和月，时间区间可以通过点击加号动态增加多个功能要点：用户需要能根据自己需要动态创建多个时间选择器后端的需要的数据格式为malltRightsLoopInfoList: [{ loopType: '', //循环周期 loopCfg: '', //星期或月份 obtainBeginDatePart: '', //开始时间 obtain.
2021-08-25 10:39:25
3069
原创 vue根据后台数据设置多选框不可点击或选中
vue根据后台数据设置多选框不可点击或选中<input type="checkbox" true-value="1" false-value="0" v-model="mallCartItem.ifSelected":disabled="mallCartItem.orderTypeId == '28' || mallCartItem.orderTypeId == '30'" />我的博客主页 ：https://qingmuzhang.gitee.io/...
2021-08-25 10:27:40
1660
1
原创 jQuery select选择器使用
jQuery选择器使用 <select id="edit_channelId" name="" class="pdr-0 c-select" validInput="validInput" nullmsg="nullmsg" noInput="noInput"> <#list channelVOLst as channelVO> <option value="${channelVO.channelId}.
2021-08-25 10:24:06
617
原创 Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals‘
问题：npm run dev 报错Cannot find module ‘@babel/compat-data/corejs3-shipped-proposals’解决：npm update --depth 5 @babel/compat-data我的博客主页 ：https://qingmuzhang.gitee.io/
2021-08-25 10:22:38
327
原创 vue-router使用next()跳转到指定路径时会无限循环
需求：vue项目需要路由跳转时判断该用户是否已登录，若登录则可以进入页面，若不登陆则跳转登录页采用在router.beforeEach方法中查询后端接口根据返回字段来判断用户是否登录router.beforeEach((to, from, next) => { document.title = to.meta.title; if (to.meta.type == 'fit') { checkLogin().then(res => { if(res.resCod.
2021-08-24 17:15:47
1253
原创 vue创建全局变量
需求：vue项目需要将登录信息保存为全局变量window.localStorage最开始是使用window.localstorage来进行存取登录信息，方法如下封装了一个专门使用window.localStorage的js，需要时引入这个filter.js就行const setLocalStore = (name, content) => { if (!name) return if (typeof content !== 'string') { //win.
2021-08-24 17:13:10
692
原创 链式调用 多个接口调用完成后再执行后面接口调用
需求：由于页面请求查询数据并赋值，但所需赋值的选择框数据由几个接口查询获取，需要先执行完选择框接口查询，再执行数据查询单个函数执行完成执行如果只有单个选择框查询，可以在接口查询完成后成功回调函数中执行数据查询// 获取发布地市与发放渠道字典 function getRightActivityChoose () { $.ajax({ url: url, method: "post", data: JSON.
2021-08-24 17:10:26
2335
原创 列表加入滚动条并隐藏滚动条
需求：由于列表数据太长，超过页面长度，所以需要给列表加入滚动条，但由于原生滚动条太丑，所以需要隐藏滚动条滚动条实现通过设置height属性值，配上overflow属性可以实现在超过长度时页面出现导航条//overflow属性值为auto或scroll都可以出现导航条<ul style="height:500px;overflow-y:auto;width:380px"></ul>导航条隐藏法1：使用css方法（适用于chrome，存在兼容性问题）ul::-we.
2021-08-24 17:05:37
727
原创 datalist和input下拉框加入输入框可模糊查询数据
需求：由于下拉框中数据过多，用户翻看十分麻烦，所以提出新需求在下拉框中加入输入功能，进行模糊查询数据并展示在下拉框中。这里其实可以直接引入组件完成功能，但由于san框架组件引入报错，所以使用了datalist和input结合使用完成功能。datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。所有主流浏览器都.
2021-08-24 17:04:46
1298
原创 window.open(url)打开链接被浏览器拦截解决方案
H5下载发票是跳一个后端返回的链接，但直接用window.open有些会被浏览器（Safari）拦截在axios中进行window.open会被浏览器拦截法1：但用户自己点击的链接不会，可以创建a标签模拟用户点击；法2：在axios之前就window.openxx.addEventListener(‘click‘, function () { // 打开页面，此处最好使用提示页面 var newWin = window.open(‘loading .
2021-08-24 17:01:31
1441
原创 输入框val()获取不到小数点
输入框val()获取不到小数点input type设置为number会获取不到，且maxlength无效，需设置为text
2021-08-24 16:59:30
212
原创 同时绑定vue事件和jQuery事件
一个元素绑定一个vue事件一个jQuery事件，jQuery事件.click会失效<a class="thumbLinkCart" href="#" onclick="simpleCart()"></a> $(document).ready(function() { $('#demo12').click(function() { alert('Item added to cart'); }); }); 可以将多个事件(类似)绑定到同一个元素.但是.
2021-08-24 16:58:41
492
原创 将json数据复制到文本域，提取出JSON
记录昨天遇到的一个需求，需要编写一个接口查询页面，用户将JSON格式数据作为入参复制在文本域中，需要提取成JSON格式提交给后台，后台返回的JSON要正常显示在页面上。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候.
2021-08-24 16:57:20
749
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人