- 博客(20)
- 收藏
- 关注
RSS订阅原创 前端常用方法记录
一、手机号码正则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
253
原创 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
4925
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
142
原创 使用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
1537
1
原创 vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部
解决方案：在App.vue中添加如下代码：watch: { $route: function (to, from) { if(from.name == 'pLindex'){ document.getElementById('app').scrollTop = 0; } }, },
2022-01-26 09:16:20
1349
原创 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
734
原创 解决h5页面弹窗滚动穿透
问题描述：在页面打开弹窗，弹出遮罩层，在滑动页面时会导致弹窗底部的页面跟着一起滚动解决方案一、适用于弹窗文案较少且不需要滚动的场景，如图：// 方法：直接在遮罩层（弹窗）上添加@touchmove.prevent(这里是vue中)，它的作用就是当你全屏的遮罩层（弹窗）时，就会禁止滑动，原理就是因为该弹出层都禁止滑动了，自然而然就不存在滑动穿透的问题了。<div class="modal" @touchmove.prevent></div>二、适用于弹窗文案多且支持滚.
2021-12-31 15:58:45
1743
原创 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
195
原创 vue项目vscode安装eslint插件和错误自动修复以及如何关闭eslint校验
当我们编写不符合eslint规范的代码时，启动项目会报错，而且代码里会报红，如下图：方案一：自动错误修复运行指令：npm run lint 会帮助我们自动修复不符合规范的代码方案二：安装eslint插件① 安装eslint插件并启用② 文件 > 首选项 > 设置 > setting.json添加如下配置："editor.codeActionsOnSave": { "source.fixAll": true },配置完成后，在我们编写代码时，esli.
2021-11-29 15:56:33
2287
原创 css动画实现骨架屏加载效果
对于前端来说，最重要的莫过于用户体验了。现如今，前端首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。这里要介绍的就是优化用户等待体验的骨架屏，它可以被视为是原来加载菊花图的一种升级版，结合传统的首屏优化方法对应用进行优化可以达到不错的效果。<!DOCTYPE html><html lang="en"><head> <me.
2021-11-16 12:12:08
979
原创 利用浮动+行高实现头像昵称居中排版
在项目开发中，经常遇到头像和昵称居中的排版需求，今天无意间看到了一个好的方法，利用浮动+行高来实现，记录一下以便后续查看。效果图：代码实现： <style> .container img{ width: 45px; height: 45px; border-radius: 50%; float: left; } .container .name{ margin-left: 10px;.
2021-09-02 10:20:06
277
原创 配置一个完整项目的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
537
原创 解决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
5902
原创 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
1803
原创 webpack 打包 环境配置
文章目录什么是webpack？安装步骤什么是webpack？webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具，借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。安装运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令在项目根目录中运行npm i web...
2018-12-29 21:42:31
648
原创 深入解读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
268
原创 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
978
原创 浅谈JavaScript中 this关键字
浅谈JavaScript中 this关键字在学习JavaScript这门语言时，我们经常会接触到this关键字。可是有时候我们会对this关键字产生疑问，什么时候使用它? 为什么此处使用this更好？所以，掌握好this的使用方法对我们学习JavaScript会有很大的帮助。1.为什么要学习this？考虑这样一个重要问题，假设开发者，比如 Douglas Crockford （译者注：Ja...
2018-11-17 16:25:00
744
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人