- 博客(30)
- 收藏
- 关注
RSS订阅原创 git常用命令
指定名称和邮箱git config --global user.name "Your Name"git config --global user.email "email@example.com"
2022-08-24 09:57:02
170
1
原创 [Intervention] Unable to preventDefault inside passive
滑动的时候报错： [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.解决方案：全局css样式添加* { touch-action: pan-y; }
2021-12-24 16:39:32
455
原创 Warning: Can‘t perform a React state update on an unmounted component.
报错如下：Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.原因：react组件已经
2021-12-23 09:25:22
990
原创 防止按钮点击重复请求数据
let isflag = 0;onChange = () => { // 点击按钮 isflag++ if(this.isflag == 1){ ... setTimeout(() => { this.isflag = 0 }, 3000); }}
2021-12-15 08:52:52
282
原创 React + antd导入表格
引入import { Button, Upload , message} from 'antd'导入// 导入excel表格getImport = () =>{ let _that = this; const props = { name: "file", action: Api // url及接口参数 accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, app
2021-10-21 11:34:58
386
原创 小程序跳转到H5再跳转到小程序支付页面
全局index.js中引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>使用function program(param) { window.wx.miniProgram.getEnv(function(res){ if (res.miniprogram){ //发起小程序支付 window.wx
2021-10-20 09:29:19
550
原创 React实现移动端图片预览组件
安装npm install --save react-wx-images-viewer或者 yarn add react-wx-images-viewer引入import WxImageViewer from 'react-wx-images-viewer';使用<WxImageViewer onClose={this.onClose('isOpen')} urls={imags} />完整代码import WxImageViewer from 'react-wx-ima
2021-10-19 11:12:21
1427
原创 两种导出excel表格方式
一、使用 FileSaver.js安装：npm install file-saver --save引用：import FileSaver from 'file-saver'api文件：导出文件记得加上 responseType: ‘blob’import axios from 'axios';Export: (params) => { return axios({ method:'get', url: 'url', responseType: '
2021-08-03 16:52:38
707
原创 H5移动端px转rem格式 1rem = 100px
export default { mounted(){ setRem() },} function setRem() { var whdef = 100/750;// 表示1920的设计图,使用100PX的默认值 var bodyWidth = document.body.clientWidth;// 当前窗口的宽度 var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 doc
2021-07-12 14:24:25
804
原创 Vue项目api.js
一、安装axiosnpm install axios//引用import axios from "axios"二、安装qsnpm install qs//引用import qs from "qs"三、安装ant手机组件npm install antd-mobile --save//引入需要使用得组件import { Toast } from 'antd-mobile'//获取当前文档的服务器域名var url = document.domainif (!url ||
2021-07-07 10:45:51
1108
原创 h5 input type=file 文件上传取消事件
Error in v-on handler: “TypeError: Cannot read property ‘type’ of undefined”Error in v-on handler: “TypeError: Cannot read property ‘size’ of undefined”当点击右上角取消时，会出现以上的报错打开控制台输出发现是file为undefined解决方法：判断file是否为undefined// 图片上传 getFile(e){ l
2021-06-17 10:12:20
1691
原创 vue子组件获取父组件几种方法
1、使用this.$parent.event直接调用//父组件<template> <div> <child></child> </div></template><script> import child from '~/components/dam/child'; export default { components: { child }, method
2021-06-15 15:24:00
16067
原创 如何获取url地址栏?后面的参数
// 获取url中参数export function paramUrl(url) { if(!url) return {}; let search = url.split('?')[1] if (!search) { return {} } search = decodeURIComponent(search); let obj = {}; search.split('&').forEach(item=>{ const [key, value] =
2021-06-10 14:49:11
586
原创 vue+h5移动端实现对上传图片超过1M进行压缩上传
HTML：<div class="picker_photo" > <input ref ="leftFile" id="upload" type="file" capture="camera" @change="getFile($event)" accept="image/*" style="display:none"> <span v-if="fileList"> <img v-for="item in ImgList" :key="item"
2021-06-10 14:28:39
872
原创 vue+vant实现动态时间联动
效果图一、找个位置创建个index.js引入以下代码// 月份，日期转化，个位数加0function doHandleFormat(month) { var m = month; if (month.toString().length == 1) { m = "0" + month; } return m;}// 获取每一天的年月日日期function getDay(day) { var today = new Date();
2021-06-09 16:00:36
565
原创 includes的使用
includes的使用includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。看下图，这是我最开始写的判断，实在是太长了…使用includes后
2021-06-09 15:22:43
282
原创 GET和POST两种请求方法的区别
个人理解get和post的区别有以下几点：1.发送请求get请求无消息体，只能携带少量数据post请求有消息体，可以携带大量数据2.携带数据的方式：get请求将数据放在url地址中post请求将数据放在消息体中3.GET请求请提交的数据放置在HTTP请求协议头中，而POST提交的数据则放在实体数据中；4.GET方式提交的数据最多只能有1024字节，而POST则没有此限制。...
2021-04-23 20:00:58
415
原创 Vue2.0父与子之间的传值方式（父传子、子传父）
前言在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 emit 给父组件发送消息。1.父传子(props)父组件<template> <div> 父组件: <input type="text" v-model="data"> <br> <!-- 引入子组件 --> <child :input=
2021-04-23 19:31:14
751
原创 Vue项目打包上线的流程
1.1、使用npm run build打包成最终要上线的代码npm run build然后会生成一个dist文件夹，然后把dist文件夹放到服务器中或给上线人员就可以了。
2021-04-23 17:33:31
296
原创 vue单页面刷新效果
在页面操作某些数据后，想要页面重新加载数据。1、this.$router.go(0)这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事。2、跳转空白页再跳回原页面创建一个Vue文件，在里面写入：beforeRouteEnter(to, from, next) { next(vm => { // 此处跳向指定路由,即可实现该路由的刷新 vm.$router.replace(from.path) })},在需要页面刷新的地方写上：this.$
2021-04-23 17:18:15
224
原创 时间与时间戳之间的转换
什么是时间戳？时间戳是指格林威治时间自1970年1月1日（00:00:00 GTM）至当前时间的总秒数。它也被称为Unix时间戳（Unix Timestamp）。时间戳是能够表示一份数据在一个特定时间点已经存在的完整的可验证的数据，通常是一个字符序列，唯一地标识某一刻的时间1、时间戳转换成时间模板获取需要转换的值<template slot-scope="scope"> {{time(scope.row.gmtLastLogin)}}</template>m
2021-04-23 16:52:12
710
原创 Vue封装element-UI Tag组件(包含右键点击+纵向滚动)
废话不多说，上完整代码：<template> <div class="tags-view"> <el-scrollbar style="height: 60px; white-space: nowrap" ref="elscrollbar"> <el-tag :key="tag.index" v-for="(tag,index) in Tages" closable :disable-transitions="tru
2021-04-20 11:46:00
1108
转载 解决vue + element Cascader级联选择器最后一级出现 暂无数据的问题
项目问题场景：在使用element组件Cascader 级联选择器中，请求后台数据时，总会在最后一个出现暂无数据，导致选中不了。解决方案：这里有两种解决方案一、使用递归方式，把最后的children设为undefined// 渲染spu树Spugoods(){ Tree().then((res)=> { if(res.data.errmsg == '成功'){ this.categorygoods = this.getTreeData(res.data.data
2021-04-20 11:18:06
1992
转载 vuecli3.x使用tinymce的步骤
前言：本文章是网上看到的，适用我的vue版本，不会报错，所以记录一下，仅作为笔记翻阅1、安装依赖npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S2、找到node_modules中的skins文件夹，然后在项目中的public下新建tinymce文件夹，然后将刚刚找到的整个skins文件夹拷贝到public的tinymce目录下。接着去官网下载语言包，解压，将langs文件夹拷贝到public的tinymce文件夹下(和skins文
2021-04-20 10:36:07
604
原创 vue.js 二次封装axios + 实现令牌刷新
文章目录前言一、封装axios二、实现令牌刷新效果总结前言为什么要封装封装的作用：代码具有可重用性和更好的维护性一个api的可能在其它的地方多次被调用，通过封装减少代码量，达到更好的维护效果提示：以下是本篇文章正文内容，下面案例可供参考一、封装axios1：npm安装axios至当前项目中，如下npm install axios --save 2：新建文件夹api，在里面创建js文件，如下图3：再创建util文件，在里面再创建Http.js文件，如下图4：再Http.js
2021-04-19 20:20:34
720
1
原创 导出表格为Excel内容
vue+element 导出表格内容1、首先 安装如下命令：npm install xlsx file-saver -S2、在要导出的页面引入import XLSX from 'xlsx'3、使用html<el-button type="primary" icon="el-icon-download" @click="Summary">汇总</el-button>method Order.pool(list).then((res)=> { //请求接口
2021-04-19 19:22:29
216
1
原创 初学React笔记（一）
文章目录前言一、React二、JSX简介三、元素渲染四、State&class四、事件处理一、ReactCreate React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5
2021-03-23 11:41:31
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人