jsvascript
carlos.chang
这个作者很懒,什么都没留下…
展开
-
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 · 270 阅读 · 0 评论 -
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 · 1799 阅读 · 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 · 4943 阅读 · 0 评论 -
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 · 2849 阅读 · 0 评论 -
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 · 2303 阅读 · 0 评论 -
小程序 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 · 301 阅读 · 0 评论 -
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 · 5422 阅读 · 2 评论 -
微信小程序生成图片 分享朋友圈 wepy 生成分享图
阿里云学生服务器 低至10元一月需求:点邀请按钮后,请求接口拿到base64格式的二维码,生成图片并且支持长按保存。工具:使用小程序wx.canvasToTempFilePath,以及wx.getFileSystemManager、wx.canvasToTempFilePathhtml:需要实现长按保存,所以加了一个图片,透明度设置为0。并且开启长按保存功能(小程序image属性) <div class="inviteshare" > <canvas ca原创 2020-09-23 15:24:05 · 746 阅读 · 0 评论 -
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 · 1055 阅读 · 4 评论 -
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 · 882 阅读 · 0 评论 -
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 · 3074 阅读 · 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 · 1516 阅读 · 0 评论 -
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 · 6258 阅读 · 11 评论 -
el-table toggleRowSelection默认选中 elementui 弹窗中表格无法选中 toggleRowSelection 选中无效
问题:编辑的时候,表格是在弹窗中,每次打开弹窗都会重新获取表格数据,并且要选中对应的数据。比如:我默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中解决:// 这里通过循环选中列表multipleSelection,然后从所有列表tableData中找到需要选中的项来帮助选中,直接使用选中列表来设置可能会出错toggleSelection(rows) { this.$nextTick(()=>{ this.multipleSelection.forEach(row =原创 2020-07-22 17:35:48 · 1957 阅读 · 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 · 699 阅读 · 0 评论 -
element-ui el-tree选择子节点时同时选择并提交父节点逻辑问题
el-tree组件在获取选择的节点时,默认的逻辑是,选中父节点时所有的子节点会被选中(checked),但是当该节点下不是选中所有子节点的时候,主节点不会被选中,而是处于一种半选中状态,提交时通过 getCheckedKeys() 方法也不会提交父节点,因为半选中状态下 checked 属性是 false 的。项目中通常会有这样的需求解决办法通常如果只是为了提交数据,我们可以使用getHalfCheckedKeys()+getCheckedKeys()来获取需要的数据const d.转载 2020-07-09 14:52:45 · 5860 阅读 · 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 · 739 阅读 · 0 评论 -
解决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 · 1644 阅读 · 0 评论 -
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 · 1573 阅读 · 0 评论 -
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 · 3826 阅读 · 0 评论 -
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 · 4018 阅读 · 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 · 6525 阅读 · 0 评论