- 博客(56)
- 收藏
- 关注
RSS订阅原创 webstorm 比较两个文件的差异
一、对比文件差异，步骤：①、首先选中文件----》然后点击菜单view---->compare files----》选择要对比的文件路径，如下
2021-05-06 17:56:42
612
原创 vue 使用vant 的van-checkbox-group来实现全选反选以及单选
一、在做项目的时候有一个列表图片需要实现全选反选以及单选的功能，如下效果：这里基于vue+vant来实现的，代码如下：<template> <div class="punch-picture-wrapper"> <div class="punch-picture-bottom"> <div class="bottom-left"> <van-checkbox v-mod
2021-04-22 15:45:24
10182
原创 element时间选择框设置当前日之前的不可选择
<template><el-form-item label="生效日期" > <el-date-picker v-model="dataForm.effectiveDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="expireTimeOption" @c
2021-04-16 17:16:05
703
原创 renren-fast人人 后台管理新增菜单图标
在后台管理去添加菜单管理项时，发现字体图标太少了满足不了需求，此时我们可以去添加图标，步骤：①、首先去字体图标库下载，格式为svg，以（阿里巴巴矢量图标库）为例搜索需要的字体图标，点击下载选择svg格式②、将下载好后svg文件的名称改成icon-XXX.svg放入到项目目录src-----icons–svg文件夹里面即可...
2021-04-15 14:18:52
666
原创 github push 报错
一、报错一解决方法，输入以下命令①、查看git配置git config --global -l ②、检查环境变量env|grep -i proxy 二、输入命令之后再次push，错误又来了，如下：解决方法如下：在网页上登陆你自己的githup账号,点击右上角头像–> setting --> Developer settings --> Personal access tokens页面点击新建 genrate new token新建完成,页面已经有一个新的
2021-04-12 14:36:54
267
原创 js数组和字符串相互转换
一、数组转字符串let arr = ['1', '2', '3', '4', '5', '6']arr.toString() //方法① "1,2,3,4,5,6"arr.join('==') //方法② "1==2==3==4==5==6"toString()和join()的区别是：toString()不仅仅适用于数组，还可以用于其他类型的对象join()只可用于数组，还可以指定分隔符，默认逗号分隔二、字符串转数组let str = "1,2,3,4,5,6"str.split
2021-04-09 15:23:27
93
原创 vue 动态设置高度
在项目开发过程中，很多时候都会用到动态计算的样式，比如高度、高度，实现方法：1、首先在dom元素中定义style属性，如下：<template> <div class="punch-clock-wrapper" ref="punchcontent" :style="{height: scrollerHeight}"> <div class="punch-clock-header"> <img :src="clockList.imageUrl"
2021-04-08 16:43:54
5149
原创 js判断传入时间是否在当前时间之后
new Date('2020-05-28 14:54:00') > new Date() //falsenew Date('2031-05-28 14:54:00') > new Date() //true
2021-04-08 15:44:52
558
原创 js移动端页面判断是否是iphoneX，然后去设置元素对应高度？
在开发h5项目有时候需要判断iPhone型号，需要区分一下是否为iPhoneX，实现如下：methods: { isIPhoneX() { let u = navigator.userAgent; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { if (screen.height == 812 && screen.width == 375) {
2021-04-08 10:46:33
531
转载 h5页面fastClick.js点击报错处理
开发h5页面点击事件移动端会有300ms的延迟，于是便打算用fastClick.js解决。页面引入fastClick.js后，执行点击事件的时候发现谷歌浏览器会报错,如下：查询了之后发现这是因为Chrome及其内核浏览器更新了一项新特性，那么如何解决呢？一般现在有两种方案：最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.手动清除默认行为document.addEventListener('touchmove', function (event
2021-04-07 18:02:08
348
原创 JS数组slice()和splice()的区别
slice()定义：从已有的数组中返回你选择的某段数组元素，不会改变原始数组splice()定义：从数组中添加或删除元素，然后返回被删除的数组元素，会改变原始数组1、slice() 语法：arrayObject.slice(start,end) 注：1. start表示从何处开始选取，end表示从何处开始结束选取，表示一个选取的范围2. start可以为负数，此时规定从数组尾部开始算起。也就是-1指最后一个元素，-2指倒数第二个元素，以此类推3. end如果没有被指定参数，数组会包含
2021-04-07 17:32:13
576
原创 js 删除对象数组中指定元素
操作对象数组中指定条件的元素：例：let arr = [{ createDate: "2021-03-20", id: 1}, { createDate: "2021-03-21", id: 2}, { createDate: "2021-03-22", id: 3}, { createDate: "2021-03-23", id: 4}, { createDate: "2021-03-24", id: 5}, { createDate: "2021
2021-04-07 16:20:44
7464
原创 JS中map、some、every、filter用法区别
every()方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；不会对空数组进行检测，不会改变原来的数组。some()方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；不会对空数组进行检测，不会改变原来的数组。map() 方法返回一个新数组，新数组中的每一个元素为原始数组对应每一个元素调用函数处理后的值；不会对空数组进行编辑，不会改变原来的数组。filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所
2021-04-07 16:10:04
310
原创 js中 clientHeight、offsetHeight、scrollHeight的区别
1、clientHeight元素高度,包含元素的高度+内边距,不包含水平滚动条、边框和外边距仅仅包含内边距+高度2、offsetHeight元素高度 包含元素的垂直内边距和边框、水平滚动条的高度且是一个整数包含内边距+滚动条+边框即 clientHeight+滚动条高度+边框 = offsetHeight3、scrollHeight元素内容的高度,包括溢出的不可见内容参考资料：https://blog.csdn.net/shibazijiang/article/details/10389
2021-04-02 13:55:50
244
原创 js判断页面是否滚动到底部
原理判断页面是否滚动到底部的前提：内容区域的高度（element.scrollHeight ）滚动条距离顶部的位置（element.scrollTop ）内容区域的可见高度（element.clientHeight）判断条件element.scrollHeight - element.scrollTop === element.clientHeight返回true则表示滚动到底部demohandleScroll(){ let scrollTop = document.docume
2021-04-02 11:51:01
4907
原创 h5页面自定义特殊字体
有时候在做页面的时候，需要用到特殊字体，步骤如下：1、首先将字体库放入到项目中，如test.ttf（这里是我随便起的名）2、然后在样式表定义，声明字体样式，命名为test1，如下：@font-face { font-family: test1; src: url("../font/test.ttf");}3、然后再具体使用，如下：p{ font-size: 28px; color: rgba(17, 26, 52, 1); font-family: test1; }
2021-04-01 14:22:52
1072
原创 vue 使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem
一、vue-cli初始化项目后实现适配：1、首先安装postcss-pxtorem，输入命令：cnpm install postcss-pxtorem --D2、安装amfe-flexible，输入命令：cnpm install amfe-flexible --D3、安装完成之后在全局注册一下，main.js中引入：import 'amfe-flexible';4、修改配置文件，这里需要注意的是vue-cli低版本和高版本的区别①、低版本：首先在跟目录新建一个.postcssrc.j
2021-03-31 16:50:53
448
原创 axios二次封装
vue 项目为了方便维护修改，对axios进行二次封装，如下：/**** request.js ****/// 导入axiosimport axios from 'axios'import { Toast } from 'vant' //ui库const NODE_ENV = process.env.NODE_ENV;console.log('当前环境',NODE_ENV)let HOST = '';if (NODE_ENV === 'development'){ HOST
2021-03-31 11:06:28
899
原创 Vue/cli4配置测试环境
一、使用Vue/cli4创建项目之后，打开package.json查看npm run命令只有三个命令，如下：npm run serve: 开发环境npm run build: 生产环境npm run lint: 貌似是针对eslint二、这个时候发现只有开发和生产环境并没有测试环境，接下来配置一个测试环境，如下：1、首先再项目跟目录新建一个.env.test 文件表示测试环境，如下：2、.env.test中配置如下：NODE_ENV = 'testing' //环境标识VUE_APP_
2021-03-31 10:55:30
470
1
原创 vue build打包出现“TypeError: Cannot read property ‘tapPromise‘ of undefined”的报错
使用VUE执行npm run build 进行打包时出现了TypeError:Cannot read property ‘tapPromise‘ of undefined问题，检查后发现是compression-webpack-plugin插件版本问题导致的，解决方案如下：项目中compression-webpack-plugin 安装的版本是 7.1.21、首先卸载高版本的compression-webpack-plugin，执行命令：cnpm/npm uninstall compression-
2021-03-31 10:15:31
1612
原创 vue-cli初始化项目
初始化项目时首先要弄清楚vue-cli的版本一、3.0以下版本命令1、首先安装vue-cli，输入命令：cnpm install -g vue-cli2、初始化项目，输入命令vue init webpack my-project二、3.0以上版本（推荐使用）1、首先安装vue-cli，输入命令：cnpm install -g @vue/cli2、初始化项目，输入命令vue create my-project需要注意的是vue-cli低版本和高版本的命令是不一样的，低版本的vue
2021-03-30 17:06:03
775
原创 axios是什么？为什么要进行二次封装？
一、axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。用法demo:①、get请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });①、post请求 axios.post('/user', { first
2021-03-30 16:54:11
4010
转载 Promise.all和Promise.race的使用
一、Promise.all的使用Promise.all可以将多个promise实例包装成一个新的promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个数组，失败的时候返回最先reject失败状态的值。let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { resolve('success')})let
2021-03-30 14:59:36
203
转载 什么是promise？promise的作用是什么？
什么是promise？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列为什么会有promise为了避免界面冻结（任务）同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1
2021-03-30 11:41:30
494
原创 h5页面与原生ios交互
app中有的是用h5页面来实现的，这个时候就避免不了与原生去交互。交互的方式①、系统原生的方式 （我们项目中使用的）②、用第三方库WebViewJavascriptBridge （比较早了，一直没有更新维护）ios使用原生的方式与h5页面交互，在h5页面中实现起来也比较方便，如下：let u = navigator.userAgent;//android终端或者uc浏览器let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu
2021-03-30 09:58:45
737
转载 视频标签video属性讲解
<video id="video" src="video.mp4" controls = "true" poster="images.jpg" /*视频封面*/ preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以 让视频在小窗内播放，也就是不是全屏播放*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x-webki
2021-03-26 15:33:50
3202
原创 vue 多行超出显示省略号 打包后-webkit-box-orient:vertical属性被移除导致失效
1、在vue项目中有时候会有固定多少行超出显示点点的需求，实现代码如下：.info{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }2、测试环境正常，但是build打包之后就没有显示点点了，后来发现-webkit-box-orient:vertical被移除了，导致原因
2021-03-22 11:19:04
149
原创 vue实现回到顶部功能
废话不多说，先来上代码<template> <div class="backtop-wrapper" v-if="btnFlag"> <p @click="backTop"> <img src="@/assets/img/backtop.png" alt=""> </p> </div></template><script> export default {
2021-03-22 11:05:07
452
原创 vue实现点击某个dom元素之外的方法
在项目开发中搜索按钮点击出现搜索框内容，这个时候点击搜索框以外的内容，搜索框隐藏掉，如下所示：1、源码2、实现点击其他区域搜索框内容隐藏，如下：document.addEventListener('click', (e) => { if (this.$refs.showPanel) { let isSelf = this.$refs.showPanel.contains(e.target) if (!isSelf) { this.searchbox =
2021-03-22 10:57:48
2858
2
原创 uni-app 微信小程序运行和打包
1、首先要下载安装微信开发者工具（若已安装，则可以忽略）下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2、下载完成，然后安装。3、在程序中配置微信开发者工具的安装位置①：依次选择工具-》设置，点击设置之后就会弹出一个设置页面。然后选择运行环境-》小程序运行配置-》微信开发者工具路径，把安装的路径填进去即可。 ②、配置完成之后直接运行就可以了 二、打包①、调试步骤完成之后，接着的发布
2021-03-11 16:50:56
1026
原创 vue中 this.$set
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，再次给数据赋值时，有时候并不会更新到视图上，如下所示：data () { return { list: [ { name: "zhangsan", id: "1" }, { name: "lisi", id: "2" }, { name: "wangwu", id: "3" } ], student: { name: '', sex: ''
2021-03-11 15:30:21
106
原创 vue+elementUI el-form 查询导致页面刷新
1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下：<el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">
2021-03-10 15:16:46
787
原创 JSON.parse() 和 JSON.stringify()的用法
1、JSON.parse()用于将字符串解析成json对象：如下2、JSON.stringify()用于将对象解析成字符串：如下：
2021-03-10 15:03:31
48
转载 uni-app 中将改成异步请求同步化操作
在uni-app中，uni.request等许多接口都是异步的，有时候需要等接口返回数据后在执行下一步的操作，这个时候我们就用到了异步请求同步化操作。解决方法：总体思路就是使用async + await，使异步问题同步化。需要 注意 的是，这里需要借助Promise构造函数将uni.request封装一下。代码：getAllClass: () => { return new Promise((resolve, reject) => { uni.request({
2021-03-09 15:19:17
4534
原创 Ajax之同步请求和异步请求的区别？使用场景？
一、区别①、异步：在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。如下：$.ajax({ type:"POST", url:"Venue.aspx?act=init", dataType:"html", suc
2021-03-09 15:00:19
1458
原创 uni-app 封装uni.request
1、首先建立一个文件夹，然后新建一个api.js，js中这样来定义，如下：//const baseUrl = 'http://XXXX.com' const request = (url = '', date = {}, type = 'GET', header = {}) => { return new Promise((resolve, reject) => { uni.request({ method: type,
2021-03-09 14:23:23
140
原创 vue 项目build后背景图路径不对的问题
1、用css写背景图样式是以相对路径来写的.details-share{ position: fixed; top: 0; left: 0; width: 100%; height: 114px; background: url("../assets/images/share.png"); background-size: 100%;}当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包
2021-03-02 14:54:19
246
原创 ElementUI Message提醒框点击多次只显示一个
点击按钮message提示，点击多次就会出现多个，这个时候需要手动去关闭一下message所有的实例，如下：this.$message.closeAll(); //手动关闭所有实例this.$message({ message: '您还没有选中哦~', type: 'warning'});...
2021-02-03 14:07:14
1182
原创 elementUi 按钮点击之后取消状态
elementUi 中的按钮，点击操作之后按钮的状态会一直存在，如果想要取消的话就手动触发一下，如下：let target = evt.target;if(target.nodeName == "SPAN"){ target = evt.target.parentNode; } target.blur();点击的时候去执行这些代码，需要注意的是要看看按钮的文字是不是在span标签内，如果在button里没有span标签就直接evt.target.blur();就可以了...
2021-02-03 13:54:50
4309
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人