自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

记录美好生活

尽管遭受生活的毒打,我们依然要奋力向前。

  • 博客(75)
  • 收藏
  • 关注

原创 【vue 原理相关】

vue原理记录相关

2022-09-05 23:09:13 44

原创 Vue 高级特性总结

vue 2 高级特性汇总

2022-08-30 16:11:41 144

原创 记录npm安装依赖时报错

源文本中存在无法识别的标记

2022-04-20 14:50:53 661

原创 记录Form表单使用i-switch 报错 Value should be trueValue or falseValue.

<FormItem label="设为置顶:" prop="topStatus"> <i-switch @on-change="topStatusChange" v-model="formValidate.topStatus"> <span slot="open">开</span> <span slot="close">关</span> </i-switch></FormItem>js:data

2021-11-09 11:40:20 775

原创 fs.js ERR_INVALID_CALLBACK()

这个问题是由于node版本引起的,解决办法// node --version < v10.1.0// fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); // node --version > v10.1.0fs.write(fd, buf, function(err, written, buffer) {});

2021-10-19 15:07:40 73

原创 vue滚动抽奖

HTML<template><div id="app"> <div id="container" class="container"> <transition name="bounce"> <template> <div v-show="luckyDrawShow" id="luckyDraw" class="luckyDraw">

2021-02-04 17:09:43 1114

原创 小程序地址传参有长度限制怎么处理

/**1.在准备传参跳转的页面**/letcompetition = {}//这是一个很长的很多数据的对象//转成String编码一下competition = encodeURIComponent(JSON.stringify(competition))wx.navigateTo({ url:`pages/common/index?info=${competition}`})/**2.在接收参数的页面**/onLoad(options){ let info= decod...

2021-01-28 16:42:17 1005 1

转载 loaderContext.getResolve is not a function

loaderContext.getResolve is not a function解决vue-cli安装less-loader是报错直接使用命令npm install less less-loader --save dev运行项目时会出现以下报错:loaderContext.getResolve is not a function报错原因:less-loader版本太高解决办法:修改package.json文件:将less和less-loader版本改为上述版本,然后重新n

2020-10-23 14:12:23 306

原创 js常用的深拷贝

/*第一种*/var clone = function (obj) { if(obj === null) return null if(typeof obj !== 'object') return obj; if(obj.constructor===Date) return new Date(obj); var newObj = new obj.constructor .

2020-09-09 14:28:27 64 1

原创 vue中表格中column如何添加button事件?

1.在页面中的tabs中添加template为插槽的容器2.添加slot-scope属性,值为row和index,再添加slot在column中对应的key3.在column中设置对应的key,也就是这里的action简单记录一下iview中需要做到列合并,行合并的时候可以采用这种方式去实行!不喜勿碰,当然如果有我没写清楚的欢迎留言提问!最后,老样子,上福利:散会!!!!!!!!!!!!!!!!!!!!!!!!...

2020-08-05 14:03:38 2218

原创 vue结合vue-amap调用高德地图行政区划分并添加标记点

**1、到高德地图开放平台申请key2、npm安装vue-amap3、在main.js中引入并初始化**4、页面引用amap5.添加默认数据6.获取函数7.调用8.效果图

2020-08-04 13:40:02 1686 4

原创 小程序 input键盘弹出时,滚动页面,输入框内容错位问题

页面中内容超过一屏的时候,滚动到底部或者中间,只要是超过一屏的地方,—input聚焦的时候就会把焦点弹到页面最顶部我现在是直接写的一个包裹元素,然后给样式 height:100%; overflow:scroll; box-sizing: border-box; padding-bottom:80rpx;解决办法是:把最外层的包裹元素换成下面代码,然后把样式height:100%;overflow:scroll;去掉!!!view: <scroll-view scroll-y=

2020-06-16 14:18:53 2475 3

原创 JS实现遍历不规则多维数组的方法

我们有时候处理数据,可能会遇到一些不规则,那么拿到这种数据我们如何进行遍历操作呢?举个栗子:我们现在有这样的数据:let arr = [ { title: '一一级', key: '一一级key', children: [ { title: '一二级', key: '一二级key', children: [ { title: '一三级', key: '一三级key',

2020-05-27 16:05:34 742

原创 vue通过vuex-persistedstate持久化数据存储

在vue项目中,我们经常会通过vuex来存储和管理全局数据。但是通过vuex存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过vuex存储的全局数据就会被全部清空,比如用户信息等。这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是Storage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储,当然也可以使用sessionStorage来作为存储,在浏览器对象关闭之后就会释放浏览器窗口中的缓存数据。但是在我们已经使用vuex来管理和存储

2020-05-20 11:07:17 1207

转载 React通过redux-persist持久化数据存储

redux-persist的使用

2020-05-20 10:41:13 371 1

转载 React通过redux缓存列表数据以及滑动位置,回退时恢复页面状态

React通过redux缓存列表数据以及滑动位置,回退时恢复页面状态 在使用React和React-router实现单页面应用时,会有这样一个场景:从列表页面点击某项条目进入详情页,然后回退至列表页面时,列表页面会重新刷新,不仅数据重新获取了,滚动条也回到了顶部。用户要继续查看剩余数据的话,需要重新滑动到之前点击的那个条目,如果列表做了分页的话就更麻烦了,这对于用户体验来说是非常不好的。所以我们希望能做到,从二级页面回退至列表页面时,列表页面能保留之前的状态(数据和滚动条位置)。那么怎么实现呢?下面

2020-05-20 10:25:54 394

转载 JavaScript Class介绍以及使用方法(代码说明)

Class学过Java的小伙伴会发现, 这个class和Java里的class基本语法并没有什么区别… 下面正式开始介绍.定义类JavaScript 语言的传统方法是通过构造函数,定义并生成新对象。//例: function Point (x,y) { this.x = x; this.y = y; } ...

2020-04-27 15:52:50 121

转载 JS CLASS类

1、ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。2、//定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + th...

2020-04-27 15:51:57 106

原创 css写一个三角形

昨天面试了一个听起来很简单的问题,但是真的很久没有用到了,所以我都搞忘记了如何实现,哎,万万不可忘记很多基础的东西啊,说不定哪天就遇到了!。。<div class="triangle"></div><style> .triangle{ width:0; height:0; border-top:60px solid blue; border-bot...

2020-03-09 15:04:35 90

原创 es6数组循环

先说说es5的循环,一下几种循环的前五种接收的参数是一样的,都是两个参数:第一个参数:循环里面执行的回调函数,循环调用执行的语句第二个参数:this的指向循环中回调函数的参数有三个:第一个参数:循环出来的值第二个参数:循环出来的索引值第三个参数:数组本身1.forEach()let arr = ['东','京','很','热'];arr.forEach(function(val,...

2020-03-05 10:54:25 885

原创 高德地图报Uncaught TypeError: Cannot read property 'addressComponent' of undefined的解决办法

1、在使使用画图的时候一直报Uncaught TypeError: Cannot read property 'addressComponent' of undefined这个错误,如下图:2、经过分析错误及到百度上查找最终发现在使用Key必须为Web端(JSAPI)这个类型,不然就会跟域名解析对不上。如下图:3、更改之后效果...

2019-12-25 15:44:16 4024 4

转载 关于设备像素比dpr的理解

做手机端项目,不可避免要寻找一个手机端页面与手机屏幕适配最佳方案。在这之前,我觉得还是要去理解一下dpr(设备像素比)。我们还要了解一些与dpr相关的概念:(1)物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。如:iPhone6上就有750*1334个物理像素颗粒...

2019-12-13 16:52:42 590

转载 2019前端面试题小结

实现一个函数,判断输入是不是回文字符串function isPlalindrome(input){ if(typeof input !== 'string')return false; return input.split('').reverse().join('') === input;}console.log(isPlalindrome('level')+' '+isPl...

2019-12-04 10:12:50 156

转载 数组对象根据某个值相同合并数组

var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002","name":"值2","value":"25462"}, {"id":"1002"...

2019-10-30 20:54:48 933

转载 http状态码记录

1、三至七种最基本的响应代码 200("OK") 一切正常。实体主体中的文档(若存在的话)是某资源的表示。 400("Bad Request") 客户端方面的问题。实体主题中的文档(若存在的话)是一个错误消息。希望客户端能够理解此错误消息,并改正问题。 500("Internal Server Error") 服务期方面的问题。实体主体中的文档(如果存在的话)是一个...

2019-10-22 15:20:10 126

原创 iview2----- 表单密码验证

<Form ref="loginForm" :model="form" :rules="rules"> <FormItem label="新密码" prop="password"> <Input v-model="formItem.password" type="password"/> </FormItem> <Fo...

2019-08-07 10:21:26 293

原创 小程序做签名功能生成签名后生成海报上传到服务端

以上是效果图:wxml:<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEn...

2019-07-26 16:17:48 1318 6

转载 七种实现左侧固定,右侧自适应两栏布局的方法

总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。关于最终的效果,可以查看这里常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中...

2019-05-06 10:26:41 417

转载 JavaScript 数组操作方法 和 ES5数组拓展

JavaScript中数组有各种操作方法,以下通过举例来说明各种方法的使用:数组操作方法push在数组最后添加一个元素var arr=[3,4,5,6]console.log(arr) //[3, 4, 5, 6]arr.push("evenyao") //字符串需要加"",数字不加console.log(arr) //[3, 4, 5, 6, "evenyao...

2019-04-23 11:35:55 142

原创 vue iview icon不能点击&JS取出两个数组的不同或相同元素&js一次性删除数组中多个元素&如何使用router-link对象方式传递参数

解决1:我的解决方法是外边包了一层span标签。将点击事件加到span标签上。解决2::原生事件要加修饰符。<Icon @click.native="handleClickFunction">1、取出两个数组的不同元素getArrDifference(arr1, arr2) { return arr1.concat(arr2).filter(functi...

2019-04-23 11:33:01 304

转载 自己动手实现一个MVVM库

自己动手实现一个MVVM库我们知道的,常见的数据绑定的实现方法1、数据劫持(vue):通过Object.defineProperty()去劫持数据每个属性对应的getter和setter2、脏值检测(angular):通过特定事件比如input,change,xhr请求等进行脏值检测。3、发布-订阅模式(backbone):通过发布消息,订阅消息进行数据和视图的绑定监听。具体代码实现...

2019-03-06 14:02:38 229

原创 小程序生成海报的方法和注意事项

这两天开发了一个生成海报的功能,总结一下!坑---------------------------------------------------------------生成海报的图片路径必须是小程序本地的图片'../../imgs/Quiet.png',或者线上的HTTPS的图片,不然在真机上不显示哦!生成海报之前一定要把图片先wx.downloadFile把需要用到的图片先下载下来...

2019-01-21 15:27:25 1536

转载 小程序canvas内容实现不同尺寸屏幕自适应(实用,适配不错)

注:本文转载自https://blog.csdn.net/zSY_snake/article/details/81188128    小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?首先我们根据开发工具可知不同常用屏幕的尺寸:由此可知我们开发中常用的参考屏幕尺寸(iPhone...

2019-01-21 10:10:30 3872

转载 微信小程序绘图实现图片拉伸,裁剪与压缩的方法,亲测使用实用

注意:本文转载自https://blog.csdn.net/vivian_jay/article/details/68933161一、canvas绘图API工欲善其事;必先利其器。 隆重请出主角:canvas绘图函数drawImage(),酱酱酱~它能做什么: 1. 绘制图像:将加载的图像绘制到canvas上; 2. 绘制画布:将画好的一个canvas画到另一个canvas上...

2019-01-21 10:08:13 1832

原创 css垂直居中的几种方法

&lt;div class="app app1"&gt;&lt;span&gt;垂直居中的元素&lt;/span&gt;&lt;/div&gt;一:.app1{    display: table-cell;    vertical-align: middle;    text-align: center;        }二:.app2{    display...

2019-01-21 10:04:41 143

原创 近期开发小程序总结(判断滚动方向,图片自适应,缓存,吸顶,h5和小程序之间的参数互传,正计时/倒计时)

近期开发总结:一:小程序中scroll-view组件:判断是向上拉,还是向下拉    scroll: function (e) {      var that = this;      var value = e.detail.scrollTop;      var array=that.data.MikeBox;      array.push(value);      var l...

2018-06-25 20:09:46 1074

原创 在window把自己的项目上传到github

首先根据下图的操作创建一个仓库,这是干什么的?可以简单粗暴的理解为一个项目一个仓库就行了。创建成功后看到到下图,这图的那个地址先记住了,一会可是要用的呢,这是这个仓库的地址,我们项目要传到这里来。然后就去下载一个git,可以网上搜索git下载,会有很多教程,这里贴出官方的下载地址:https://git-scm.com/downloads/    还有一个网上找的安装教程:http://jingy...

2018-06-25 16:24:44 199

原创 angular 创建开发环境构建项目

一.安装Node.js官方网址:https://nodejs.org/en/download/12在命令行中输入:node -v 和 npm -v 验证版本二.全局安装Angular CLI 脚手架工具使用npm命令安装 npm install -g @angular/cli 1安装cnpm国内直接装经常会出问题,所以设置为淘宝镜像地址会更好。npm install -g cnpm --regi...

2018-03-29 17:14:43 282

原创 vue开发环境的搭建具体步骤

搭建vue开发环境的步骤相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习angular的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想整理出来;vue现在在前端,相对于算是现在前端工程师都比较常用的框架之一,他和angular有一些相似之处,所以用过angular的伙伴们,再来学习vue应该不会感觉太难;一:...

2018-03-29 11:16:42 554

原创 图片预加载和懒加载demo

预加载&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;图片无序预加载-优化&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-wi

2018-03-28 17:24:06 817

空空如也

空空如也

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

TA关注的人

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