郝峰vip的博客

vue2.0监听用户长时间无操作页面停留时长

vue3.0 + TS 自定义组件上使用v-model的教程

vue keep-alive结合scrollTop返回上一页时记忆并且回到原来的滚动位置

vue3.0 依赖注入provide()和inject()的使用教程

sublime text 常用插件

vue3.0自定义指令的使用教程vue3.0与2.0自定义指令的异同点

uniapp 开发跨端项目配置多环境变量,以及如何获取地址变量

pm2 部署 vue3 + nuxt3.js项目，以及设置服务器宕机，故障或者重启时自动重启pm2服务

javascript 对象数组根据相同属性值合并两个对象判断两个对象数组内的值是否相等

js 数组去重，数组求和，es7 新增数组方法 reduce() 的各种使用技巧

Vue项目优化首页加载速度达到秒开以及解决首页白屏问题

Vue 2.0 自定义组件上使用v-model

v-model 实现原理详解

本博客是为了记录自己的组件，方便学习和使用，组件是在vant的基础上二次封装，之前还写了一个自己手写的弹出层公共组件，详情移步vue-cli 移动端底部弹出菜单动画效果参数名类型说明is_showpopupboolean是否显示弹层组件isShowLineboolean是否显示头部下划线slot说明“popupHeader”头部左侧文字“popupSlot”主题区域内容事件@fromPop 头部左侧文字点击事件第一步

vue-ssr-nuxt 做seo详细方案教程

前言最近在项目中遇到一个问题就是水平垂直居中我是用的是flex布局，然后在缩小屏幕时里边的内容高度超出了外侧区域的高度(这里是屏幕的高度，这时候虽然出现了滚动条，但是展示不完全，被遮住了，经过测验才发现是因为align-items:center;)的原因，也就是居中的原因，解决办法写在下面。 <div class="coupon_window"> <div class="white_dialog"> </div> </div>.

vue 响应式原理

前言之所以写这个是因为最近的项目需求中要实现一个pc端大型电商首屏选择商品分类效果，需求就是hover左侧区域展示右侧区域的内容，看到这个需求第一想法就是两者写在一个容器内，用定位把布局写好，后来仔细一想其实也可以不用这样，就自己写了一个。其实这个功能就是两个不在同一父级的容器hover一个容器的内容展示相对应的另一个容器的内容。主要是使用index下标做的内容展示准确项目框架是vue+ssr+nuxt先看一下我完成的效果图这个就是hover标题栏的标题是展示对应的内容，但是两者不在同

前言最近在项目中有一个需求是禁止输入特殊字符，一开始我是在网上找的正则表达式直接用的，后来发现这个表达式同时也禁止了v,x,y,z,所以后来就想了一个比较笨的方法，把所有的特殊字符全部罗列出来，然后在匹配一下。最后在输入的时候禁止就好了。项目都是在vue中的，所有方法都是在methods里边的。step 一， 正则表达式解决方案用这种方式替换，会导致v,x,y,z输入不进去，亲测。 <el-input placeholder="I'm shopping f

前言小编在开发新项目中，pc端用的是vuecli3+element-ui，移动端用的是vue-cli3+vant-ui或者vue-cli3+mint-ui，在这篇文章就把在开发pc端项目中也就是使用vuecli3+element-ui过程中遇到的坑和解决方案记录下来，方便后续自己学习。目前使用的element-ui版本是2.15.1,这里记录版本的原因是，之前用过低版本遇到的坑发现后来随着element-ui版本的更新给优化了，所以这里记录一下版本号。这篇博客会随着开发中不断地踩坑持续更新的。\

前言前提是element-ui版本为2.15.1及以下版本，因为说不定哪天element就会更新，解决这个问题最近在开发项目中，有一个需求是在el-input-number组件中直接输入值，然后离开鼠标直接mouseenter其他的button,这个时候要获取v-model的值，发现v-model的值并不会改变，于是就开始折腾，查elementui的issure发现是因为el-input-number在封装时并没有将直接输入的值赋值给v-model,然后自己细想一下使用@keyup事件把输进去的值

前言在项目中遇到的问题，修改selecet选择器，popover弹出框的样式时失效，在这里记录录一下，方便以后使用。第一步：官方文档中的popper-class <el-select v-model="couponIdCopy" placeholder=" " @change="changeCoupon" class="change-coupon-select" popper-class="C

前言最近在用vue-cli4 , vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。step 一，路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,或者刷新报错main.jsimport Router from 'vue-router'const routerPush = Router.prototype.pushRouter.prototype.push = function pu

vue-cli4 配置多页应用详细教程

Vue前端自己生成二维码教程

前言基本上做的每个项目都会有发送验证码的需求，之前一直是遇到一次写一次方法，这次做这个需求的时候正好把这个功能封装为组件，以方便后期使用。这里需要注意的是：\color{red}{这里需要注意的是：}这里需要注意的是：1，了解vue–props属性的都知道，我在props传参数的时候默认值是在你什么参数都没有传入的时候生效2，所以这个时候需要全部都从父组件传入，也是比较灵活的做法3，如果真的需要使用灵活的使用默认值，那就在公共得组件内使用computed计算属性,这样就可以使用默认值了，也就是下面

前言在做跨境电商项目的时候，遇到一个设置广告营销的跨时区的时间不匹配导致广告不能同步的问题，所以就想着如何解决。相看到这个标题就会想到用时间戳解决这个问题，我一开始也是用的时间戳直接格式化的时间，（时间戳在全时间每个时区都是相同的），但是这样会有一个问题，就是你的服务器在北京，这样你的项目在美国中部标准时区（西六区）访问转时间戳出来的时间还是北京时间（东八区）出现这个问题的原因是我用得moment.js换的时间，所以导致代码在哪里就转的那个时间，后来就采用了指定时区的办法，就得已完美解决。解决

vue-cli实现复制内容到剪贴板

前言在开发项目中遇到需要导出列表的功能，一开始是前端做的，后来leader说要改成后台做，那么办法就是后台返回文件流然后前端执行下载。前端做导出请移步vue-xlsx 导出数据公共组件接受后台返回的文件流请接着往下看后台返回来的数据流其实是二进制格式的文件，所以可以用blob接收第一种方法Blob对象下载文件流首先要使用这个对象就要先了解这个对象，所以，想了解blob的请移步web-api-blobapi介绍的很详细，我就不介绍了。了解完了之后，基本上知道咋回事了，然后直接

前言不管什么时候做项目都会遇到验证输入框只能输入整数和小数的需求STEP 一，输入的必须为正整数，不能输入小数点，这个参考的是element-ui的校验v-model加.number修饰符，在检验规则里设置type为number <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="positive_integer"> <el-inp

element-ui 踩坑

前言最近在项目中遇到一个场景，就是在校验输入框失焦(blur)事件后，第一次点击时按钮的点击事件失效，后来排查，发现原因，是因为第一次点击时先走了blur事件，然后再走点击事件，所以导致第一次点击按钮失效。出现bug的原因由于浏览器的默认事件，当你点击按钮时，页面中有文本框失焦时，会先触发文本框的blur事件，然后再触发click事件,所以导致了上述的bug。解决方案如下。解决方案pc端：使用mousedown事件来代替click事件移动端：使用touchstart事件来代替click事件

前言相信每个人在项目中都会遇到这样的需求，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢keep-alive就起到了很大的作用接下来就说说如何使用keep-alive来动态缓存页面的。一： 直接在<router-view></router-view>外边加一层keep-alive就是全部缓存，返回都不刷新App.vue<template> <div id="app"> <keep-alive&gt

Vue 使用i18n做到国际化

前沿这是一个通用的需求，当页面提示框弹起禁止下边的内容滚动，并且保留滚动到的当前的高度，我是在vue公共的方法中写的，全局通用。第一步：先在你的公共css里边写入这个样式.dialog-open { position: fixed; width: 100%; left: 0; top: 0;}第二步 ：在你的公共js里边写入这个方法，导入全局，现在还不知道怎么注册全局...

前沿虚拟dom这个东东其实我之前也不知道，之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面，减少了大量的dom操作，所以才会性能更好。知道又一次去面试，面试官问到知道为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快么？我回答的就是第一条，他说不全是，不过最后还是跟我说了，回去了解一下虚拟dom所以才回去就赶紧看了看，现在有空，赶紧整理出来如果后期能理解更深...

前沿这个是笔者自己的笔记，方便以后开发，我们的需求是单行文本向上滚动播放。自己封装为组件。不过，这个体验不是很好。上下衔接不友好一 新建一个组件，scrollOn.vue <div class="WinBottom Font14 "> <div class="inner-container Ellipsis" v-for="(ite...

前沿这个组件是笔者自己做笔记使用的，方便以后开发。就是有一个大的黑色的遮罩层，然后在有弹窗内容step 一 首先在components文件夹下新建一个文件夹，里边包含有这个公共组件所需的文件，img,index.js,index.vue首先来看看index.vue<template> <transition name="fade"> &lt...

前沿在日常的项目开发中，经常会引用css,less,js,img等的文件的路径问题，之前也有些模糊，现在记录下来，方便自己清晰的理解一遍，也方便以后使用。首先说说最常见的./ ../两种./:是指当前目录下../:是指父级目录下接下来再说说@@就是你在build文件夹下webpack.base.conf.js文件中的resolve目录下配置的 resolve: { ext...

前沿其实吧，作者在很早之前就遇到过这个问题，当时解决了，因为忙就没有记录下来，现在又再一次遇到了，这次不管怎么样都要抽空记录下来，真的是好记性不如烂笔头。先看看静态img静态的img路径直接写你当前图片路径就好了<img class="Width100 Height100" src="../img/headImage.png">再看看动态img我这里是粘了我项目中的一段...