- 博客(27)
- 收藏
- 关注
RSS订阅
原创 wepy2 + vantweapp 实战总结 踩坑记录
wepy2+vant实战记录安装wepy2+vant微信开发者工具导入项目项目中引入vant组件使用组件小程序体验二维码安装wepy2+vant先安装wepy 2.x$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具$ wepy init standard myproj # 使用 standard 模板初始化项目$ cd myproj # 进入到项目目录$ npm install # 安装项目依赖包$ npm run dev # 监听并且编译项目具体
2020-08-17 11:43:27
1046
4
原创 wepy2 小程序根据滚动日期跟随（与tab跟随原理一样）vant-ui
需求：在列表页，根据滚动的距离，日期跟随。思路：记录每次滚动的scrolltop，用watch监听当前滚动高度，每500毫秒（可以根据需求修改时间）检测一次当前列表处在哪个日期区间。实现：html：<div v-if="transactionlist&&transactionlist.length > 0"> <div class="transactionlist-list"> <transaction-p
2021-01-25 16:17:19
268
转载 vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法
转载：https://blog.csdn.net/sunday_tutu/article/details/82018037我要实现的功能是在上传文件之前校验是否表格中存在重复的数据，有的话，需要弹窗提示是否覆盖，确认之后继续上传，取消之后，就不再上传。项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload".
2020-12-24 10:28:19
1783
1
原创 vue 使用keep-alive后，怎样清除缓存｜清除keep-alive
需求：从列表页进入详情页，再返回列表页时保留查询条件，但在切换其他tab时，清空查询条件。解决：保留查询条件很简单，直接引入keep-alive，但是清除的话，vue本身没有api直接清除，所以要单独处理。参考文章：http://aspedrom.com/5HD5router/index，拦截路由并做处理：beforeRouteLeave:function(to, from, next){ // 增加离开路由时清除keep-alive if (from &&
2020-12-14 17:39:07
4872
原创 wepy小程序聊天记录选择文件上传 wx.chooseMessageFile 带有进度条动画 支持文档打开 完整记录
#需求：从聊天记录中选择文件，支持的文件格式doc, docx, pdf，同时支持上传的文档打开文件选择与上传文件后展示模版代码：<van-cell title="从微信聊天记录中上传" value="选择文件" is-link @click="chooseMessage" size="large" /><div class="declare-file" v-for="(item,index) in chooseFileList" :key="index">
2020-11-09 11:03:10
2830
原创 vue 从excel中复制数据至el-tabel中 excel粘贴数据 el-tabel
需求：从excel复制数据快速粘贴到el-table中方法：利用vue的 @paste 拿到数据，用processData切割数据<el-table :data="costList" element-loading-text="加载中" border="" fit highlight-current-row :max-height="'600px'" > <el-table-column
2020-11-02 16:06:49
2283
原创 小程序 wepy2框架使用filters过滤 千位符过滤
需求：全部价格都用千位符过滤。wepy2框架不支持vue的filters，只能使用小程序本身的wxs来快速解决这个需求。1.新建filters.wxs文件，千位符参考博客：http://beteshis.com/6T2R//单价增加千位符function get_thousand_num(num){ var regNum = getRegExp('\d+', 'g'); var regThree = getRegExp('(\d{3})', 'g'); return
2020-10-28 10:08:38
294
原创 el-date-picker 禁用日期后 无法点击此刻按钮 禁用今天以后日期 精确到时分秒
问题：禁用今天以后日期不可选择，成功禁用后，点击组件中的此刻按钮无效。html：<el-date-picker v-model="ruleForm.finish_time" :picker-options="pickerOptions" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />return { pickerOptions: { disabledDate(ti..
2020-10-26 15:01:39
5314
2
原创 微信小程序生成图片 分享朋友圈 wepy 生成分享图
阿里云学生服务器 低至10元一月需求：点邀请按钮后，请求接口拿到base64格式的二维码，生成图片并且支持长按保存。工具：使用小程序wx.canvasToTempFilePath，以及wx.getFileSystemManager、wx.canvasToTempFilePathhtml：需要实现长按保存，所以加了一个图片，透明度设置为0。并且开启长按保存功能（小程序image属性） <div class="inviteshare" > <canvas ca
2020-09-23 15:24:05
739
原创 js 树形结构 通过子找到父 tree 查找数据 拼接成 A-AA-AAA-AAAA
以下结构，通过41查找，拼接成11-21-31-41const data = [{ id: 11, pid: 'a1', text: 11, children: [{ id: 21, pid: 'b1', text: 21, .
2020-08-11 16:22:12
866
转载 Element UI el-tree 保存当前展开节点，再次异步获取树结构数据时默认展开当前保存的节点
问题：设置默认展开的节点后，一顿操作，需要记录当前已经展开的节点，并且在获取数据重新渲染时设置默认展开<el-tree ref="tree" v-loading="treeLoading" :data="studentTree" :props="defaultProps" :highlight-current="true" node-key="id" :default-expanded-keys="defaultShowNodes" @node-click="handleTre.
2020-08-10 16:56:54
2992
3
原创 vue vant 引入pxtorem 移动端适配不成功 如何设置pxtorem 移动端rem适配
问题：在vue+vant项目中设置pxtorem，但是在移动端小屏下没适配失败解决：1.安装：npminstallpostcss-pxtorem--save-dev2.Vue项目中webpack配置步骤： 在vue.config.js 的下的loaderOptions中添加配置：module.exports = { publicPath: '/', productionSourceMap: false, css: { loaderOptions: { ...
2020-08-05 10:54:56
1486
原创 element 表格中 多个输入框 怎么校验 el-form 动态验证规则 el-table中检验多个input
问题：在element表格中需要验证多个输入框，如下图：解决：在表格中加入el-form-item，上代码<el-form ref="form" :model="form" label-width="120px" :rules="rules"> <el-form-item label="优惠券配置：" prop="payload"> <el-table :data="form.payload" border class="padloadTable"&g.
2020-07-23 11:54:30
6213
11
原创 el-table toggleRowSelection默认选中 elementui 弹窗中表格无法选中 toggleRowSelection 选中无效
问题：编辑的时候，表格是在弹窗中，每次打开弹窗都会重新获取表格数据，并且要选中对应的数据。比如：我默认选中的内容必须得通过接口或者其他方式来获取，然后再默认选中解决：// 这里通过循环选中列表multipleSelection，然后从所有列表tableData中找到需要选中的项来帮助选中，直接使用选中列表来设置可能会出错toggleSelection(rows) { this.$nextTick(()=>{ this.multipleSelection.forEach(row =
2020-07-22 17:35:48
1938
1
原创 移动端 输入框输入完成后 页面不回弹
问题：移动端在输入框获取焦点，调出键盘，页面被顶上去。输入完成后，点完成，键盘收起，但是页面不会回弹。 isWeiXinAndIos() { const ua = `${window.navigator.userAgent.toLowerCase()}`; const isWeixin = /MicroMessenger/i.test(ua); const isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua); ret..
2020-07-13 09:47:42
692
转载 element-ui el-tree选择子节点时同时选择并提交父节点逻辑问题
el-tree组件在获取选择的节点时，默认的逻辑是，选中父节点时所有的子节点会被选中（checked），但是当该节点下不是选中所有子节点的时候，主节点不会被选中，而是处于一种半选中状态，提交时通过 getCheckedKeys() 方法也不会提交父节点，因为半选中状态下 checked 属性是 false 的。项目中通常会有这样的需求解决办法通常如果只是为了提交数据，我们可以使用getHalfCheckedKeys()+getCheckedKeys()来获取需要的数据const d.
2020-07-09 14:52:45
5696
1
原创 wepy2 小程序 弹窗遮罩层阻止滑动穿透
问题：引入vant-ui框架后，用dialog弹窗，遮罩层下面的内容也可以滑动。解决思路，弹窗设置阻止滑动行为 catchtouchmove,需要滑动的内容引用小程序中的scroll-view，如果纵向滑动需要设置高度并且设置scroll-y="true",catchtap里的方法需要设置一个空函数。<van-dialog use-slot custom-class="step" show="{{ orderTrace }}" bind:con
2020-07-03 11:21:47
720
原创 wepy2 小程序 密码弹框 验证码弹框 模拟聚焦
需求：小程序中手机获取验证码后，自动弹出数字键盘，弹出输入验证码弹窗并且有光标闪烁效果验证码弹窗组件：<template><van-popup custom-style="border-radius:4px;height:460rpx;top:30%" show="{{showPayPwdInput}}" close-on-click-overlay="{{false}}" closeable bind:close="closeFn"> <div class="
2020-07-03 11:10:37
639
原创 解决element-ui 多个错误弹框问题 多个错误message
新建js文件 resetMessage.js/** 重置message，防止重复点击重复弹出message弹框 */import { Message } from 'element-ui';let messageInstance = null;const mainMessage = function DoneMessage(options) { // 如果弹窗已存在先关闭 if (messageInstance) { messageInstance.close(); } .
2020-06-11 15:14:47
1625
原创 vue 监听页面滚动 滚动一定高度添加动画
mounted(){ const elOffsetTop = document.getElementById('advantage').offsetTop const docScrollTop = document.documentElement.scrollTop - 230 if (elOffsetTop >= docScrollTop && elOffsetTop < (docScrollTop + window.inne...
2020-06-04 16:11:33
1564
原创 element-ui el-cascader 动态加载省市区 三级联动
<template> <div id="zoning"> <el-cascader ref="cascader" :options="options" :clearable="true" placeholder="请选择省市区" :size="size" :props="props" @active-item-change="handleItemChange" @cha.
2020-06-04 15:30:11
3811
原创 js 前端多层树型结构做搜索功能 前端如何做搜索、过滤、filter、map
前端如何做搜索，多层树形结构怎么过滤const arr = [ { name:'第一层', children:[ {name:'第一层的孩子',children:[name:'第二层的孩子']} ] } ...]html...<el-input v-model="category_name" size="small" placeholder="分类名称" maxlength="8"> <el-button slot="app
2020-05-16 19:59:07
3979
1
转载 JS中数组快速转换成Number类型或String类型
1.将string数组转换为number数组let x1 = ['1','2'];console.log(x1);//["1", "2"]x1 = x1.map(Number);console.log(x1);//[1,2]2.将number数组转换为string数组let x1 = [1,2];console.log(x1);//[1, 2]x1 = x1.map(String);console.log(x1);//['1','2']...
2020-05-13 10:46:51
6500
转载 【转载】flex弹性布局学习总结
一、简要介绍 css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是简单、方便、快速。 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀，以下不再重复说明。 下图为flex的相关概念的示意图 使用flex布局的容器（flex container）
2020-05-11 19:36:31
170
转载 [转载]解决Element resetFields()重置表单不生效的问题
前言由于最后在做公司后台在使用 element-ui 框架，开发过程中出现 resetFields表单无法重置的问题，在此记录下解决的办法，也能帮助到以后的同学少踩点坑1.问题重现因 “添加” 和 “编辑” 字段是一样的，所以我把它们放在了一个弹框表单里面，也节省了代码资源开销，如果你是分开写的弹框也就不会出现这个问题了。重现步骤：进入列表页后，先打开编辑框，然后打开新增框，新增...
2020-05-07 19:29:18
778
原创 为什么vuex的getter拿不到最新的属性 vuex中state状态改变了但是getter没有更新
问题背景： <newer :newrModalShow="$store.getters['order/getNewer']"v-if="newerDatas" :newerDatas="newerDatas"/> 如上：一个页面引入一个组件，通过vuex状态去控制显示隐藏，通过浏览器看的state状态改变了，但是getter却没拿到最新的状态解决：...
2020-04-28 15:34:52
5092
原创 Vue ElementUI tree组件 动态渲染编辑时 选择父级时会全选所有的子级（el-tree数据回显父节点和子节点都会被选中）
问题描述：当el-tree 需要从后台拿到数据动态展示出来时，会出现一个父节点下面的所有子节点全部被勾选了，如图：解决方案：<el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="...
2020-04-24 11:56:36
5437
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人