- 博客(84)
- 收藏
- 关注
RSS订阅
原创 微信打开h5页面键盘弹起后页面上滑，导致页面中的按钮功能区域错位
最近在做个项目，其中有个页面是申请登录页面，在手机上测试的是用vscode的live-server，把地址链接发到微信上打开就出现问题了。点击按钮以外的区域也会触发这个按钮才有的事件。就因为这个老大叼了我一顿，说我布局有问题，委屈巴巴~~~好在通过百度找到了问题所在。 看网上的解释就是因为当 input失去焦点，页面被顶起没有还原，按钮或者input还在原来的位置。 所以就有以下的方法来处理...
2019-02-21 14:15:48
1214
转载 微信小程序6位或多位验证码/密码输入框
在做小程序过程中做一个6位验证码输入框，本以为很简单，但是在写的时候遇到各种各样的阻力，在网上查阅资料也寥寥无几，后来经过一番思考，终于敲定下来本人最满意的方案，特意发出来让大家参考一下，希望能帮到大家！一、效果图如下：二、代码部分wxml：<form bindsubmit="formSubmit"> <view class='content'> &...
2018-05-29 11:36:18
3283
2
原创 封装能搜索的小程序picker
这个组件用到了vant 这个框架 里的vant-search ,也可以不用自己写个input,方法都是一样的。需求是这样子的，微信原生的满足不了这种，所以自己封装了个组件。在引用的页面 wxml上写。
2023-01-03 16:11:02
761
原创 先获取打印的模板，用户选择过的模板通过接口要回显出来，预览只显示key的值，value是前端写死
需求:先获取打印的模板，用户选择过的模板通过接口要回显出来，预览只显示key的值，value是前端写死
2022-09-30 17:36:37
313
原创 new map() 处理数组 追加属性
追加属性rowspan - 按name 统计数量；追加属性rowHeader—按name 分组后，第一个设置为1，其余设置为0；
2022-09-30 17:10:32
537
原创 vant3+ts+pinia tab选项卡列表页面点击进详情，详情页返回tab高亮在原位置，刷新高亮默认在第一项
主要实现逻辑就是在vuex里面存一个变量，用来判断是详情还是列表页面在点击详情的时候，把tab存进去在onMounted加载的时候从vuex 里面取出来， 在setup 里面先存0，下面的判断就会走else点击头部左按钮返回的时候给置为true...
2022-06-09 14:37:40
725
2
原创 vant3+ts DropdownMenu 下拉菜单，数据多能滚动加载
vant3+ts DropdownMenu 下拉菜单，数据多能滚动加载
2022-06-09 14:19:09
1005
1
原创 vant3 +ts 封装简易step进步器组件
公司需要这样的step 进度条，vant组件提供的有点难改，所以自己就在网上找了一个，做了一些改动 step 组件 用的时候改变stepActive的值
2022-06-08 16:51:06
638
原创 vant3+ts 封装uploader上传图片组件
因为项目中多次用到这个组件 所以就自己封装了下vant的组件需要在：after-read 之后把图片上传到服务器手机上选择或者拍照 返回的格式是[{name:xxx，data:base64，xxxxx},{name:xxx,data:base64，xxxxx}]而 组件的回显是根据flie对象或者URL所以就需要上传前 把 返回的base64转成file对象图片上传到接口前还需要把图片压缩一遍 整个组件的代码如下公司的上传图片的逻辑是 第一步，把fileNames 上传到后台提供的接口 返回的格式是{url
2022-06-08 16:42:39
2357
2
原创 vant3+ts h5页面嵌套进app 与原生app通信
最近的项目是vant3+ts 做的h5 嵌套在app里面，有扫码和拍照的功能需要与原生app 交互用到的插件是dsBridge在需要调用页面的地方 这样写，处理自己想要的逻辑
2022-06-08 15:40:07
521
原创 4.2日最后一次上线 vue3+ts+elementPlus+vite项目总结和代码记录
## VScode插件支持WindiCSS IntelliSense： WindiCSS 自动完成、语法突出显示、代码折叠和构建等高级功能TypeScript Vue Plugin (Volar)： 用于 TypeScript 服务器的 Vue 插件Vue Language Features (Volar)： Vue3.0 语法支持Iconify IntelliSense Iconify： 预览和搜索i18n： Ally 国际化智能提示Stylelint： css 格式化D...
2022-04-02 21:40:12
3131
原创 正则实现 6-12密码需要包含大小写字母和数字及特殊符号
let pass ==/^\S*(?=\S{6-12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%*&]))\S*$/vscode 里面有正则插件 按f1快捷键操作
2022-03-21 20:19:35
2007
原创 把后台接口反的数据 处理成想要的数据实现 点击加号数据会追加，不能重复选择
<template> <view class="content-box" style="min-height: 100vh; background: #F5F5F5;"> <common-header>申请发货清单</common-header> <view class="address-box"> <view v-if="customerInfo.consignee_name"> <view clas.
2022-03-20 20:28:30
583
原创 把点击过的每一项筛选出去
<template> <view class="brand"> <view v-for="(item,index) in subList" :key="index" class="brand_item"> <view class="brandList_left"> <u-form labelPosition="top" :model="item" > ...
2022-03-20 20:18:08
239
原创 3-18 上线 处理后台返回 不同字段的值 并合成一个数组 页面上在取值
根据需求无论是哪个节点 实际需求那里取的是distributionInfoList里面的值如果有发货信息 就取sendGoodDetailInfo 里面的值但是待签收状态 消耗库存 只有组件的发货信息 是从 storageDeduct 取值审核，备货，代签收，签收审核，完成 这五个节点下 组件逆变器，并网箱显示的页面是不一样的数据就需要处理成这个结构如下图，没有截图完全<template> <view class="page_det...
2022-03-20 20:05:27
316
1
原创 请求接口计算数量
需求就是 一个大list 拆分成 逆变器，并网箱， 组件 红框那里都需要计算 <view class="cell_list"> <!-- 逆变器 --> <view class="cell" v-for="(item,index) in distributionListVOS" :key="index"> <view class="cell_title" @click="item.show=!item.show">...
2021-11-10 17:33:33
459
原创 uview select封装单选和多选
uview是没有多选的，根据业务需求就自己封装了一个组件一般多选的话是要加字段，根据字段判断，这个思路值得记录下<template> <view class="slot-v"> <!-- 单选 --> <u-input v-model="inputValue" type="select" @click="selectShow = true" :placeholder="placeholder" /> <!-- 多选 --&g
2021-10-29 16:26:04
5084
2
原创 小程序图表 f2-canvas
官网地址所有图表 | F2The Grammar of Graphics in JavaScripthttps://f2.antv.vision/zh/examples/gallery/ //绘制直流电压，电流图 drawCurrenVoltage:function(id,data) { var that = this var dataArr = [] var listLength = 0 var tempDataX=that.data.tempDataX
2021-10-29 16:14:08
412
原创 前端当接口请求异步的时候 可以传个callback函数
有个需求是在vue 文件 main.js里面 请求接口 返回的值在其他页面上用import { getOnlinekey } from "./api/common.js";Vue.prototype.$GetOnlinekey=(callback)=>{ getOnlinekey().then(res=>{ let {code,result}=res.data console.log(result,"getOnlinekey") Vue.prototype.$KEY = {
2021-10-29 15:20:28
466
原创 vue 列表页面的分页
/** * @param {Object} isLoad 是否翻页 */ getHelpList(isLoad) { if (isLoad){ //如果是翻页 if (this.pageNo * this.pageSize <= this.helpList.length) { //如果当前列表满足整页，说明可能有下一页存在 this.pageNo += 1 } else { //如果不满足整页，说明没有..
2021-10-29 14:52:52
602
1
原创 echart 实现地图坐标轴带图标
需要实现设计图的效果 // 排名图 drawColumbar () { var icon = { frist: require('@/assets/images/icon/1.png'), second: require('@/assets/images/icon/2.png'), thrid: require('@/assets/images/icon/3.png') } let columchart...
2021-08-25 16:06:20
1092
1
原创 echart 报错Cannot read property ‘getAttribute‘ of undefined
要等dom加载完之后在加载图表否则就会报这个错误加上这句代码 就能解决this.$nextTick(function(){this.drawpowerline()})
2021-08-25 15:02:33
280
原创 保留两位数字，保留三位数字 ，添加千分位并保留两位小数，根据后台返回状态转换文字
// //保留三位小数 或两位小数 export const forMatMoney=(num,type)=> { var result = parseFloat(num); if (isNaN(result)) { console.log('传递参数错误，请检查！'); return false; } result = Math.round(num * 100) / 100; var s_x = result.toString..
2021-08-13 01:13:51
288
原创 获取近一月，近3月，近6月，近一年，近3年
/** * 获取最近n个月/年 * @param {*} type 类型month, year * @param {*} num 数目 */export const getRecentlyDate = (type, num) => { let t1 = '' let t2 = '' switch (type) { case 'month': t1 = new Date() t2 = t1.setMonth(t1.getMonth() - num).
2021-06-30 16:23:55
376
原创 记录代码 省的忘记
对于返回数据的key是不固定的字段 比如是中文或者是数字，直接处理数据。 task.gettaskDetail(parma).then((res) => { this.detailInfo = res.result.nodeInfo; this.detail = res.result; this.detailInfo.forEach((v) => { v.showButton = false; v.s.
2021-06-30 15:12:40
94
原创 5.13日公司上线内容总结 antd vue table 表格 和数据处理的一些代码
最近用的是 antd design vue这个框架如果 数据有空白项tasklist foreach那行代码现在有个业务需求是根据id请求列表，但每个请求回来的列表不一样，筛选条件也不一样，要根据接口返回的来显示可以返回字段的接口返的数据是这个样子的，1是可以显示，0是不可以显示核心代码就是this.coulmns return 那里，最后在push进去操作项 。效果就是需求的那样查询条件那里我一开始不知道怎么绑定v-model，因为是动态的，点击查.
2021-05-13 20:27:05
254
2
原创 antDesign-vue select :value 不支持传入对象，但选择的时候想获取当前选中的整条数据
//流程配置选择表单编码 handlecodechange(item){ this.config.processcode = item this.currentcodelist=this.codeList[item] console.log(this.codeList[item]) // this.currentformCode=e.key },根据下标来去codeList里面找 codeList 就是整个接口请...
2021-04-30 17:51:18
2025
1
原创 记录代码
通用模式到操作者是一个接口返回的， 下面的是另一个接口返回的返回的，这种情况 是循环取的，前端不能这样做，（对性能有很大影响）需要后端改接口//获取配置记录 getInstructionLogs () { this.isRender = false let token = 'Bearer ' + uni.getStorageSync('token') uni.request({ url: this.$config.deviceurl +...
2021-02-19 16:00:31
262
原创 vue中扩展函数，除了原有的事件中传的参数增加自己传的参数
<input v-for="a in as" @change="change" :disabledDate="disabledDate" >change(a,b){}disabledDate(a){}改成<input v-for="a in as" @change="change(...arguments, a)" //最主要的是这句:disabledDate="(current)=>disabledDate(current, a)" >.
2020-11-06 17:56:53
1242
转载 前端正则如何匹配双引号
<script language="javascript">//var pattern = /[^"]*/; // 校验字符串中是否都是非双引号的字符var pattern = /["]+/; // 校验字符串中是否有双引号的字符//var pattern = /["][^"]*["]/ // 匹配的是位于单引号或者双引号之内的 个或多个字符var value1 = "The best things in life are free"; // 没有双引号的字符串var va.
2020-11-06 17:46:01
2864
原创 微信小程序可以点击左右按钮切换，一次7天
我们的需求就是这种效果实现的代码html部分data: { show: false, active: -1, weekDate: ['日', '一', '二', '三', '四', '五', '六'], dateArr: [], isTodayWeek: false, todayIndex: 0, lastweek: true, nowdate: new Date().getDate(), datetip: false..
2020-10-23 17:33:24
1179
原创 记录代码
getcode() { let _tip = this.i18n.obtain console.log(_tip) console.log(this.codemessage) var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (this.codemessage != _tip) { return } if (this.formd...
2020-10-22 16:06:12
136
原创 记录代码
<template> <div> <div class="success_div" v-if="invalidflag"> <img src="../../pc/assets/images/green_success.png" alt="" class="success_img"> <div class="font">{{userparam.language=='zh-CN'?cn.successline1:e.
2020-09-29 15:25:22
189
原创 正则校验6-18位字母加数字密码
const checkpass = value => { debugger if (value.length < 6) { return 0; } var ls = 0; if (value.match(/([a-z])+/) || value.match(/([A-Z])+/)) { ls++; } // if (value.match(/([0-9])+/)) ...
2020-09-29 15:23:46
3100
原创 记录代码
正则邮箱只要 @后面是字母就行 var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
2020-09-14 16:48:05
132
转载 Axios发送请求时params和data的区别
在使用axios时，注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。 因为params是添加到url的请求字符串中的，用于get请求。 而data是添加到请求体（body）中的， 用于post请求。比如对于下面的get请求：axios({method: "get",url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",params: {info: ".
2020-08-27 22:04:09
413
原创 微信小程序列表的多选
wxml<view> <view class="search_list"> <view class="search_item" bindtap="selectInfo" wx:for="{{list}}" wx:key="index" data-name="{{item.formName}}" data-id="{{item.tId}}" data-ind="{{index}}"> <view>{{item.formNa...
2020-07-23 19:51:13
3175
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人