自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 前端常用方法记录

一、手机号码正则export const phoneReg = /^(0|86|17951)?1[123456789][0-9]{9}$/;二、银行卡简单验证export const idReg = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/;三、身份证号正则校验const valid = { // 精确验证身份证 isChinaIDCard: function (StrNo) { let res = { t

2022-02-17 16:35:32 252

原创 2022前端面试题汇总(更新中)

【HTML + CSS】一、CSS实现元素水平垂直居中① 绝对定位的居中实现-- 已知宽高 -- width:100px; height:100px; position:absolute; left:50%; top:50%; margin-left:-50px; /*宽度的一半*/ margin-top:-50px; /*高度的一半*/-- 未知宽高 -- position:absolute; left:50%; top:50%; transform: translate(

2022-02-07 17:35:36 4923 4

原创 git命令小笔记

1. git init 初始化本地仓库2. git add . 将全部代码从代码区添加到暂存区3. git status 查看git此时的提交状态4. git commit -m '提交说明'提交到本地仓库5. git log 查看提交记录6. git reset --hard HEAD^ 回退上一个版本7. git reflag 查看操作记录8. git reset --hard 六位版本号 回退到某个版本...

2022-01-26 17:31:09 139

原创 使用vue中的keep-alive缓存表单数据

一、问题提出在表单页面填写信息,提交进入支付页面,从支付页面路由回退到表单页面,数据全部清空二、期望效果从支付页面路由回退到表单页面,数据保留,不被清空三、解决方案:使用keep-alive缓存表单数据① 将需要缓存的组件,在路由规则中的meta添加keepAlive属性为true,如下:{ path:'/IDCard', name:'IDCard', component:resolve => require(['@/views/proofLoss/loss/IDCard

2022-01-26 10:15:07 1535 1

原创 vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部

解决方案:在App.vue中添加如下代码:watch: { $route: function (to, from) { if(from.name == 'pLindex'){ document.getElementById('app').scrollTop = 0; } }, },

2022-01-26 09:16:20 1345

原创 css设置h5页脚固定底部

思路:将页面拆分为主体内容和页脚两大部分,给内容区域设置css样式:min-height: calc(100vh - 120px);<template> <div class="container"> <!-- 内容 --> <div class="page-body"> 这里放页面的内容 </div> <!-- 页脚 --> <div class="page-foot.

2022-01-11 17:32:11 733

原创 解决h5页面弹窗滚动穿透

问题描述:在页面打开弹窗,弹出遮罩层,在滑动页面时会导致弹窗底部的页面跟着一起滚动解决方案一、适用于弹窗文案较少且不需要滚动的场景,如图:// 方法:直接在遮罩层(弹窗)上添加@touchmove.prevent(这里是vue中),它的作用就是当你全屏的遮罩层(弹窗)时,就会禁止滑动,原理就是因为该弹出层都禁止滑动了,自然而然就不存在滑动穿透的问题了。<div class="modal" @touchmove.prevent></div>二、适用于弹窗文案多且支持滚.

2021-12-31 15:58:45 1737

原创 vuex持久化

vuex的数据都存在内存里面,一旦刷新页面,vuex中的状态都会被重置,这对于一些不想被重置的状态数据而言, 是一个不好的表现。对此,我们可以采用 vuex-persistedstate 插件实现vuex数据同步到localStorage中。一、安装执行命令:cnpm i --save vuex-persistedstate二、引用在vuex组件库入口文件index.js引入并调用,此时会将state中的四个状态放到本地存储localStorage里面 import createPersis.

2021-12-20 16:38:50 194

原创 vue项目vscode安装eslint插件和错误自动修复以及如何关闭eslint校验

当我们编写不符合eslint规范的代码时,启动项目会报错,而且代码里会报红,如下图:方案一:自动错误修复运行指令:npm run lint 会帮助我们自动修复不符合规范的代码方案二:安装eslint插件① 安装eslint插件并启用② 文件 > 首选项 > 设置 > setting.json添加如下配置:"editor.codeActionsOnSave": { "source.fixAll": true },配置完成后,在我们编写代码时,esli.

2021-11-29 15:56:33 2285

原创 css动画实现骨架屏加载效果

对于前端来说,最重要的莫过于用户体验了。现如今,前端首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长。这里要介绍的就是优化用户等待体验的骨架屏,它可以被视为是原来加载菊花图的一种升级版,结合传统的首屏优化方法对应用进行优化可以达到不错的效果。<!DOCTYPE html><html lang="en"><head> <me.

2021-11-16 12:12:08 977

原创 利用浮动+行高实现头像昵称居中排版

在项目开发中,经常遇到头像和昵称居中的排版需求,今天无意间看到了一个好的方法,利用浮动+行高来实现,记录一下以便后续查看。效果图:代码实现: <style> .container img{ width: 45px; height: 45px; border-radius: 50%; float: left; } .container .name{ margin-left: 10px;.

2021-09-02 10:20:06 276

原创 配置一个完整项目的webpack

话不多说,直接上步骤:1、创建一个项目,例如:webpack在根目录(webpack)下建立两个文件夹 dist 和 src;其中 src下创建文件夹如下:2、在根目录下输入npm init -y 初始化项目,点击回车,这时项目中会生成一个 package.json 文件。如图:3、使用 cnpm 安装 webpack ,运行指令 cnpm i webpack -D4、运行指令 ...

2019-06-04 11:52:05 535

原创 解决Webpack中提示syntax 'classProperties' isn't currently enabled的错误

解决方案:1、安装如下插件npm i -D @babel/plugin-proposal-class-properties2、在babelrc中配置插件:options: { plugins: ['@babel/plugin-proposal-class-properties'] } },重新运行项目,不再报此错误!...

2019-04-02 10:32:13 5901

原创 babel7.x发布后 安装babel插件的新语法以及注意事项

安装babel插件,你踩坑了吗?前两天做React项目 使用webpack安装babel插件时 遇到了很多问题,经过一番研究现已解决,整理成文,希望这篇文章会对你有所帮助!我当时在安装babel时,运行的指令如下:安装babel插件运行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D运行cnpm i ...

2019-04-02 10:22:50 1801

原创 webpack 打包 环境配置

文章目录什么是webpack?安装步骤什么是webpack?webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具,借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。安装运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令在项目根目录中运行npm i web...

2018-12-29 21:42:31 647

原创 深入解读ES6

一、ES6的发展ECMAScript 和 JavaScriptECMA 是标准,JS 是实现ECMAScript 简称 ECMA 或 ES历史版本1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织,ES 正式出现1999, ES3.0 被广泛支持2011, ES5.1 成为 ISO 国际标准2015, ES6.0 正式发布二、变量 let ...

2018-11-30 13:06:33 267

原创 Linux运维之基础知识及简单命令

Linux运维之基础知识及简单命令1. 虚拟机的开启

2018-11-23 16:25:05 822

原创 Linux虚拟机安装VmwareTool步骤

Linux虚拟机安装VmwareTool步骤1. 点击虚拟机2. 点击安装Vmware-Tools,出现如下界面,将圈起来的拖动到桌面3. 接着打开终端,执行解压缩命令tar -xzv -f VMwareTools-10.2.5-8068393.tar.gz这个后面的VMwareTools-10.2.5-8068393.tar.gz 建议复制桌面那个压缩包的名字,防止出错。4....

2018-11-22 17:53:49 974

原创 快速总结正则表达式

正则表达式正则表达式又叫做*规则表达式

2018-11-22 17:04:31 211

原创 浅谈JavaScript中 this关键字

浅谈JavaScript中 this关键字在学习JavaScript这门语言时,我们经常会接触到this关键字。可是有时候我们会对this关键字产生疑问,什么时候使用它? 为什么此处使用this更好?所以,掌握好this的使用方法对我们学习JavaScript会有很大的帮助。1.为什么要学习this?考虑这样一个重要问题,假设开发者,比如 Douglas Crockford (译者注:Ja...

2018-11-17 16:25:00 743

空空如也

空空如也

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

TA关注的人

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