自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 uni-appH5项目实现导航区域与内容区域联动效果

将导航区域与内容区域实现联动,即点击导航区域,内容区滚动到对应位置,内容区滚动过程中根据内容定位到相对应的导航栏。效果如下:侧边导航与内容联动效果。

2024-09-03 16:28:58 587

原创 H5利用navigator.mediaDevices实现语音功能记录

按住说话 松开发送 上滑取消 语音时长超过3分钟,自动结束录入并发送。采用方案:使用Web API navigator.mediaDevices 实现该功能。

2024-08-07 17:43:28 1846

原创 elementui 弹窗展示自动校验表单项bug

clearValidate() 方法清空表单校验项。表单校验失败一次之后,再次弹出表单,触发自动校验。使用nextTick规避报错。

2024-04-17 11:06:25 1014

原创 pageB->pageC,B跳转C需要记录B页面的滚动位置,C返回到B时定位到该位置

pageA:入口页面pageB:资讯列表页pageC:文章详情页。

2024-03-19 17:49:08 318

原创 实现网址链接超出自动换行

span 有样式 ( white-space: pre-wrap;),但是文字可以自动换行,链接无法自动换行,导致页面出现了横向滚动条。链接标签设置属性 overflow-wrap: anywhere;

2024-03-14 10:04:59 313

原创 promise.all按顺序批量上传图片文件

Promise.all可以将多个Promise实例包装成一个新的Promise实例,同时 Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即使后面的promose实例结束早于前面的实例,也会排列在后面。这也是采用promise.all实现按顺序批量上传图片文件。需求背景:批量上传图片,等全部图片上传成功后回显图片,并且回显的图片顺序要和用户批量点击时的图片顺序保持一致。解决方案:promise.all 等待原则。一、关于promise.all。

2023-10-12 10:38:31 583

原创 H5实现固定表头首列表格

解决方案:禁用ios的自身滚动,利用代码实现滚动效果(但是滚动会没有浏览器滚动那么流畅丝滑,如果小伙伴们有更好的解决方案~可以一起讨论呐)bug2:ios中纵向滚动、横向滚动不独立(横向滑动的同时,纵向会轻微滚动,纵向滑动的同时,横向会轻微滚动)三、js实现表头、首列滚动。bug1:ios橡皮筋效果。四、遇到的bug调整。

2023-09-06 17:47:18 888

原创 处理ios滚动的橡皮筋效果

前言:最近在实现H5固定表头首列的表格的时候,出现一个bug。当滚动表格的滚动条处于表格最上端和表格最左端的时候,仍然可以滑动(继续下滑和右滑),进而会出现一个空白,但是松手之后会回弹回去,但是这个问题只在苹果手机中出现,安卓手机不会。监听移动端的touch事件,在touchmove是判断,是否已经滚动到最上端或者最左端,如果是就禁用滚动事件,即阻止touch的默认事件。橡皮筋效果就是ios手机上出现滚动时,滑动到头时还可以继续拖拽出一段距离的空白,但松开手又立刻回弹回去的效果。

2023-09-06 17:14:03 1131

原创 H5实现首行固定表格

通过固定定位实现之后,大体效果虽然实现了,但是在ios遇到了问题:拖动整个表格的时候,表体会移动,但是表头还固定在页面上十分怪异。粘性布局在部分安卓手机自带的浏览器上遇到了问题,表头随着表格滚动上去了,没有固定表头的效果,具体原因没有深究。把表头和表格体拆分,表体滚动的关键在于固定高度,超出高度部分显示滚动条,思路三、拆分表头表体(自测是效果最优的)首行固定表格效果-优快云直播。思路一:利用固定定位将表头固定。思路二、利用粘性布局。

2023-09-06 15:50:11 305

原创 前端实现pdf预览

前端实现pdf预览

2023-06-30 10:34:25 9639

原创 elementui穿梭框支持搜索分页功能

elementui穿梭框支持搜索分页功能

2023-06-01 14:21:32 1855 1

原创 设置了elementui的时间日期组件的默认值导致DateTimePicke组件无法选择别的时间

使用this.$set()赋值,this.$set()赋值不会改变数据的响应式。target:要更改的数据源(可以是对象或者数组)一、问题:设置默认时间之后选择其他日期选不上。在修改时间发现,怎么也选不了其他的日期时间。关于this.$set()使用传值。key:要更改的具体数据。value :重新赋的值。

2023-04-14 11:02:34 2159

原创 gitlab配置ssh

2、进入C:\Users\liming\.ssh目录下找到id_rsa.pub文件,复制其中的值粘贴在Key区域的文本框。1、打开git bash窗口,输入ssh-keygen 产生公钥私钥。拿到gitlab账号之后需要配置ssh才能确保正常拉去提交代码。2、输入括号中的路径(该路径表示配置存放的路径)首先确认电脑上git环境配置成功,如未下载。1、在gitlab中找到setting。三、将ssh配置到gitlab。

2023-03-31 17:47:08 18497

原创 yarn install报错:yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。

yarn install报错:yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。

2023-02-06 20:01:10 788

原创 vue 安装依赖报错 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve

vue 安装依赖报错 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve

2022-09-06 19:41:02 1240 1

原创 记录textarea文本域中实现回车发送遇到的问题

记录textarea文本域中实现回车发送遇到的问题

2022-09-01 11:19:31 1726 2

原创 利用css实现泡泡动画效果

泡泡动画

2022-09-01 10:38:14 845

原创 使用nginx解决跨域问题

前端h5项目使用nginx解决跨域问题

2022-08-22 22:57:45 4097

原创 nvm安装以及使用

nvm安装

2022-08-19 15:55:42 1498

原创 Vue项目pc端适配方案(scss)

Vue项目scss语法时pc端适配方案

2022-08-18 14:12:57 3398 7

原创 uni-app 启动报错 Error: Cannot find module ‘webpack/lib/RuleSet‘

uni-app 启动报错 Error: Cannot find module 'webpack/lib/RuleSet'

2022-08-11 17:27:38 610

原创 解决echarts 数据视图 排版错乱问题

解决echarts 数据视图 排版错乱问题 ,将echarts 数据视图 表格化

2022-07-30 13:23:14 2592

原创 yarn run dev 无法加载文件 C:\Program Files\nodejs\node_global\yarn.ps1,因为在此系统中禁止执行脚本

执行yarnrundev命令启动vue项目报错无法加载文件C\ProgramFiles\nodejs\node_global\yarn.ps1

2022-07-19 09:42:05 725

原创 利用RecordRTC.js实现H5录音功能

RecordRTC 实现录音功能

2022-07-03 13:11:18 6531 1

原创 Vue项目环境搭建

Vue环境搭建

2022-06-25 18:40:49 264

原创 引入jedata日期选择插件未生效以及插件图标未显示问题

我的问题:页面中引入了jedate插件所需的js以及css文件,但是页面中并未出现日期选择器。尝试了将这些文件从项目中抽离出来,放在本地发现插件好使,排除插件文件损坏的问题。页面效果:排错思路:tips:百分之八十也许都是jquery引入先后问题,所以可以先查看jquery和插件引入顺序1.如果插件依赖jQuery ,检查jQuery文件2.JQuery正常,检查插件文件是否正常3.都正常就看看是否因引入其他线上的东西而造成影响(注释大法一步步排除)一、解决插件不生效问题

2022-04-08 18:05:19 4011

原创 如何使用腾讯云存储图片

一、图片存储方案介绍1.存到自己公司购买的服务器上优点:好控制缺点成本高由于图片都存放到自己的服务器上,占据空间很大2. 存到三方云服务器(阿里云,七牛云,腾讯云)各种云有专门的为图片存储提供的云服务器,我们自己的服务器只存储图片地址即可1.前端传前端调用腾讯云API上传图片2.后端传图片文件传给自己的后端, 由后端上传到第三方图片服务器二、腾讯云cos申请配置官网:腾讯云 - 产业智变 云启未来1.创建账号并实名认...

2021-12-28 23:15:04 5864

原创 使用awaitTo之后无论登录成功或失败都执行了成功的逻辑

前言:利用awaitTo优化了await只能接收成功的结果之后,却发现无论成功还是失败都进行了登录成功的跳转!!!找了半天却发现少了它??一、登录代码handleLogin() { this.$refs.loginForm.validate(async(valid) => { if (valid) { //校验表单数据成功 this.loading = true const [err, res] = await loginA

2021-12-24 21:34:43 792

原创 优化trycatch(完结)

前言:阅读这篇文章前建议先看一下前置知识点 指路:优化trycatch所需的前置知识点_多多的小宝贝的博客-优快云博客啦啦啦~通过前面的知识我们已经知道:promise对象的then方法中虽然不能直接获取到请求失败的结果,但是我们可以借助一个新的Promise对象来中转一下,这样就可以在Promise对象的then方法中取到请求失败的结果啦~实现思路:利用promise对象A then方法返回的那个全新Promise对象B(全新:意思就是他就是他,和别的Promise对象不一样,是独立存在的)来中

2021-12-20 00:36:47 1080

原创 优化trycatch所需的前置知识点(Promise对象讲解)

前言:前端发送请求时我们经常用trycatch来捕获错误信息,但是你会不会觉得有时代码因为trycatch而导致嵌套太多大括号了呢?这些括号让我们的代码看起来眼花缭乱,下面我们就来优化trycatch,让我们的代码看起来整整齐齐把!在此之前,我们要先储备一些关于Promise对象的基础知识.话不多说,上代码!来喽来喽~~一、如何拿到Promise对象请求成功的结果1.封装一个函数,函数中返回Promise对象,方便复用这段代码 // 封装一个函数,函数中返回Promise对象 fu

2021-12-19 21:35:12 962

原创 基于axios进行二次封装

前言:思考:假设我们在项目中每一次请求都是直接使用axios,如果有一天我们要改用原生ajax请求,name代码改动的工程量是非常大的.但是,我们将axios统一封装起来,这样是不是简单许多呢?为了让我们的代码更加灵活, 统一管理,通常我们会选择呢封装axios一、封装axios1创建文件utils/request.js// 基于 axios 封装的请求模块import axios from 'axios'// 新建一个新的axios实例const newAxios = axios.

2021-12-13 13:03:06 5308 1

原创 如何解决跨域问题以及vuecli开发环境用代理服务器解决跨域问题

前言:在此之前,我们应该知道什么是跨域?和为什么会跨域?以及跨域的基本解决方法.同时扩展在vuecli开发环境如何用代理服务器解决跨域问题一、跨域:1.跨域的理解跨域即网页所在url(浏览器地址栏的地址)的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有任一对应不上的情况就发生跨域.跨域是是浏览器对ajax做出的限制.2.出现跨域的报错展示二、解决跨域问题(CORS/JSONP )1.CORS(需要后端大佬实现)1.1cors原理通过服务.

2021-12-12 20:36:43 1502

原创 ESLint语法检查

一、什么是ESLintESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范常见的规范举例:= 的前后必须有一个空格 函数名后面必须有空格 await必须用用在async修饰的函数内 ==必须转换成3个等二、ESLint的好处写代码过程中, 检查你代码是否错误, 如果错误会被关进小黑屋哦~ ESLint可以约束团队内代码的风格统一 三、ESLint在VSCode中使用1.下载这个插件到vscode中2.直接打开一定要把脚手架工程, 作为vsco

2021-12-07 21:50:05 2489

原创 projeceDemo1-借助@vue/cli包创建脚手架项目

前言:借助于@vue/cli包提供的脚手架搭建项目,可以让我们快速搭建项目基本环境.Vue官方提供的脚手架是一套标准的文件夹+文件结构+webpack配置,可以做到零配置开箱即用十分便捷前置准备:你的电脑一定要装过node或者yarn接下来就进入创建项目步骤啦~~一、全局安装@vue/cli模块包1.安装@vue/cli全局模块包,得到Vue命令,以后就可以用vue命令创建脚手架项目//yarn 命令yarn global add @vue/cli//npm 命令npm inst

2021-12-07 21:12:21 321

原创 CSS中常见隐藏元素的属性

visibility:hidden 隐藏元素本身,并且在网页中 占位置 display:none 隐藏元素本身,并且在网页中 不占位置(常用)overflow:hidden 隐藏超出盒子的内容部分(超出的内容虽隐藏但占位)案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.

2021-08-17 10:46:11 421 1

原创 清除浮动的方法

清除浮动:清除浮动元素带来的影响(浮动元素不占位置,没办法撑开父元素的高度)方法一:设置高度给浮动元素的父元素设置高度 一般开发中高度会不确定,因此此方法不可取方法二:额外标签法在浮动元素的最后面添加一个空的块级元素,给这个块元素增加清除浮动的属性clear: both;.clear{ clear: both; }<divclass="clear"></div>方法三:单伪元素给浮动元素的父元素增加类名 clearfi...

2021-08-17 10:12:44 121

空空如也

空空如也

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

TA关注的人

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