自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 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 1045 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 4869

原创 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 2826

原创 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 5311 2

原创 微信小程序生成图片 分享朋友圈 wepy 生成分享图

阿里云学生服务器 低至10元一月需求:点邀请按钮后,请求接口拿到base64格式的二维码,生成图片并且支持长按保存。工具:使用小程序wx.canvasToTempFilePath,以及wx.getFileSystemManager、wx.canvasToTempFilePathhtml:需要实现长按保存,所以加了一个图片,透明度设置为0。并且开启长按保存功能(小程序image属性) <div class="inviteshare" > <canvas ca

2020-09-23 15:24:05 738

原创 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 862

转载 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 2972 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 1483

原创 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 6210 11

原创 el-table toggleRowSelection默认选中 elementui 弹窗中表格无法选中 toggleRowSelection 选中无效

问题:编辑的时候,表格是在弹窗中,每次打开弹窗都会重新获取表格数据,并且要选中对应的数据。比如:我默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中解决:// 这里通过循环选中列表multipleSelection,然后从所有列表tableData中找到需要选中的项来帮助选中,直接使用选中列表来设置可能会出错toggleSelection(rows) { this.$nextTick(()=>{ this.multipleSelection.forEach(row =

2020-07-22 17:35:48 1936 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 691

转载 element-ui el-tree选择子节点时同时选择并提交父节点逻辑问题

el-tree组件在获取选择的节点时,默认的逻辑是,选中父节点时所有的子节点会被选中(checked),但是当该节点下不是选中所有子节点的时候,主节点不会被选中,而是处于一种半选中状态,提交时通过 getCheckedKeys() 方法也不会提交父节点,因为半选中状态下 checked 属性是 false 的。项目中通常会有这样的需求解决办法通常如果只是为了提交数据,我们可以使用getHalfCheckedKeys()+getCheckedKeys()来获取需要的数据const d.

2020-07-09 14:52:45 5679 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 719

原创 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 638

原创 解决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 1563

原创 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 3809

原创 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 3972 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 6498

转载 【转载】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 5089

原创 Vue ElementUI tree组件 动态渲染编辑时 选择父级时会全选所有的子级(el-tree数据回显父节点和子节点都会被选中)

问题描述:当el-tree 需要从后台拿到数据动态展示出来时,会出现一个父节点下面的所有子节点全部被勾选了,如图:解决方案:<el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="...

2020-04-24 11:56:36 5432 7

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除