![](https://img-blog.csdnimg.cn/20191025134402390.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 62
分享与前端相关的问题
pinbolei
一个热爱生活的程序员
展开
-
require.context()的用法详解
1.require.context()vue项目中 使用require.context()实现前端工程化引入文件require.context(directory, useSubdirectories, regExp, mode = 'sync')directory:表示检索的目录useSubdirectories:表示是否检索子文件夹regExp:匹配文件的正则表达式,一般是文件名mode:加载模式,同步/异步2.用来在组件内引入多个组件// 从@/components/home目录原创 2021-04-12 14:18:17 · 15378 阅读 · 1 评论 -
vue 重复点击菜单,路由重复报错
报错信息vue-router在3.0版本以上时,重复点菜单,控制台会报错,虽然不影响使用,但是最好处理下这个问题,不然也可能会影响调试其他问题。报错原因vue-router在3.0版本以上时 ,回调形式改成了promise api,返回的是promise,如果没有捕获到错误,控制台始终会出现如上图的报错node_module/vue-router/dist/vue-router.js 搜VueRouter.prototype.push解决方法1.降低vue-router的版本npm i v原创 2021-04-12 14:14:11 · 814 阅读 · 0 评论 -
github或gitLap免密提交代码
当我们换了新电脑进行开发项目的时候,总会面临一个问题,每次提交代码都让你输一遍用户名和密码,简直不能再麻烦了,尤其在你急需解决问题的时候,真是有种想把电脑摁在地上摩擦的冲动!解决方案:再终端输入如下命令:git config --global credential.helper store1.这一步会在用户目录下的.gitconfig文件最后添加:[credential] helper = store2.现在你提交代码时输入用户名密码, 此时输入的用户名密码会被记住, 下次再push代码时就原创 2020-11-05 14:32:51 · 244 阅读 · 0 评论 -
解决微信端苹果手机无法跳转页面
问题在微信中使用window.open()方法跳转路由,这个方法在安卓手机中是好用的,但是在苹果手机中却不起作用原因后来发现window.open()是打开新的页面,而window.location="www.baidu.com"是跳转页面,微信内置浏览器只能打开一个页面,这可能是无法跳转的原因之一。解决办法window.open() 改成 window.location=“www.baidu.com”拓展1在同当前窗口中打开窗口<a href="www.baidu.com">百原创 2020-08-21 13:28:54 · 7402 阅读 · 0 评论 -
JavaScript 的顺序执行 执行机制
先上一个今日头条的面试题async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function() { console.log('setT原创 2020-06-19 14:35:03 · 2250 阅读 · 0 评论 -
axios请求失败,如何获取接口返回的状态码及错误信息
如果axios请求失败,如何获取接口返回的状态码及错误信息?方法如下axios.get('api/test') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.re原创 2020-06-19 13:46:54 · 8161 阅读 · 2 评论 -
vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...
vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数…这或许是你看到最完的整微信H5支付几大问题的解决方案因为项目中使用到了支付,当前国内支付无非就支付宝、微信、银联这几种方式,支付宝和银联支付今天暂时不讨论,搞过的都清楚,支付宝还是比较简单的,相对于前端来说,不会太复杂,几乎接近于完美(这么说人也是做支付的),而微信就真的额有很多坑了!1.商家存在未配置的参数,请联系商家解决说起来,真是欲哭为泪,尤其是使用vue react等单页面应用开发项目的,多少一开始都很头大,我一开始原创 2020-05-22 15:10:20 · 5723 阅读 · 9 评论 -
js函数节流、防抖
js 函数节流、防抖新建index.js将下面代码复制到index.js中/** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */const debounce = (fn, t) => { let delay = t || 300 let tim...原创 2020-04-30 08:21:18 · 162 阅读 · 0 评论 -
js 判断数组中是否包含某元素的方法
简述 js判断数组中是否包含某元素的方法1.array.indexOf(item,start):元素在数组中的位置,如果没与搜索到则返回 -1参数描述item必须。查找的元素。start可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。实际用法...原创 2020-03-31 08:30:51 · 1341 阅读 · 0 评论 -
js 数组与字符串的相互转换
js 数组与字符串的相互转换1.数组转字符串let a = ['苹果', '黄桃', '樱桃', '橘子']let b = a.join(' | ')console.log(b) // 苹果 | 黄桃 | 樱桃 | 橘子2.字符串转数组let a = '苹果,黄桃,樱桃,橘子'let b = a.split(',')console.log(b) // ["苹果", "黄桃"...原创 2020-03-31 08:23:28 · 169 阅读 · 0 评论 -
移动端,用flex弹性盒模型布局实现头部、底部固定,中间内容区可滑动浏览的效果
H5开发移动端项目时,常常会遇到此类问题,顶部navbar,底部tabbar,中间滑动展示内容,如果用position:fixed;往往会出各种问题,这时,你不如考虑一下flex布局,在移动端上使用,是真的香!1.css部分 body{ padding: 0; margin: 0; } html,body{ ...原创 2019-12-25 08:32:53 · 3459 阅读 · 0 评论 -
H5移动端开发注意事项
一、关于meta(一)、常用的公共meta属性1、viewport<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />属性属性width=device-width...原创 2019-12-25 08:25:25 · 461 阅读 · 0 评论 -
js 判断手机系统是android还是ios
var u = navigator.userAgentvar isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端alert('是否是Android:'+isA...原创 2019-11-25 08:23:23 · 174 阅读 · 0 评论 -
js 函数节流、防抖
新建index.js将下面代码复制到index.js中/** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */const debounce = (fn, t) => { let delay = t || 300 let timer return...原创 2019-11-25 08:19:21 · 159 阅读 · 0 评论 -
关于移动端flexible适配ipad和ipad Pro
当我在做一个H5的项目时,通过是flexible.js实现了rem自适应,但是我发现在iPad和iPad Pro中显示有问题,由此记录下解决这个问题的方法解决移动端flexible适配ipad和ipad Pro因为我的项目是使用的vue-cli框架,所以直接在inedx.html中加入如下代码即可<script> // 适配pad padPro /(pad|pod|iP...原创 2019-10-25 13:30:03 · 2342 阅读 · 2 评论 -
vue移动端项目-click事件在浏览器中延迟300ms的解决方法
在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法解决click点击事件300ms延迟在vue项目中,可以通过引入fastclick第三方依赖包来解决。1、安装fastclick依赖npm install fastclick ---save2、在main.js中引入并使用import fastCli...原创 2019-09-03 16:27:11 · 796 阅读 · 0 评论 -
js判断一个字符串中出现次数最多的字符及次数
js判断一个字符串中出现次数最多的字符及次数var str="aagaabbbabtavnahaa";function maxstringload(str) { var obj={}; for(var i=0;i<str.length;i++){ var key=str[i];//key中存储的是每一个字符串 if(obj[key]){//判...原创 2019-08-15 15:25:24 · 236 阅读 · 0 评论 -
js数组中对象去重的方法
简单说一下数组中对象去重的方法假设当前有这样一个数组 let arr = [{ key: '01', value: '乐乐' },{ key: '02', value: '博博' },{ key: '03', value: '淘淘' },{ key: '04', v...原创 2019-06-17 08:35:00 · 19391 阅读 · 9 评论 -
vue电商开发记录3—实现返回顶部组件
简单说一下用vue实现一个返回顶部组件其实不光电商平台,一般的网站也会有返回顶部的功能,算是一个很常见的功能,有些ui框架中也会有自己的返回顶部的组件今天说一下如何自己封装一个返回顶部的组件返回顶部html部分<template> <div class="back-top"> <a title="返回顶部" href="javascript...原创 2019-05-13 09:26:26 · 597 阅读 · 1 评论 -
element-ui table列表自定义表头,修改列标题样式、添加tooltip
在之前的博客中,提到在element-ui table列表自定义表头,修改列标题样式、添加tooltip,需要render-header,但是在2.4.11及以后,element-ui官方已经更新了,并添加了自定义表头的方法为了广大的群众少走弯路,我觉得还是有必要更新一下,如果element-ui版本是2.4.11以下,可以参考上个关于自定义表头的博客,如果是2.4.11及以上版本可参考本文...原创 2019-05-06 15:00:11 · 30480 阅读 · 4 评论 -
vue电商开发记录2—实现公告轮播组件
简单说一下用vue实现一个电商公告轮播组件电商平台中常会有公告轮播图,虽然我浏览电商网站的时候,常常会忽略掉它~~~,emmmmm…,切回正题,今天分享一个电商公告轮播的小栗子,仅供参考html部分<template> <div class="swiper"> <!-- 左边公告,放个图片什么的 --> <div class...原创 2019-05-06 09:01:52 · 1121 阅读 · 0 评论 -
常见的网页设计错误(下)
原文地址http://blog-en.tilda.cc/articles-website-design-mistakes文章设计中的错误1.长而坚固的副本文本墙使阅读难以理解。为了便于导航,将其拆分为段落或引入诸如关键短语或图像之类的中断。文字墙很难看拉引号或图像等元素使阅读文本更容易2.标题位于前一段和下一段之间相同的距离标题不应该在类似距离的章节之间“挂起”,因为它属于下面的...翻译 2018-12-06 16:26:43 · 443 阅读 · 0 评论 -
CSS选择器和CSS3属性
1、CSS3的概念和优势A、CSS3的概念:CSS3并不是一门语言,我们知道css是层叠样式表,是一种样式语言,是用来告诉浏览器如何渲染页面的。css3是css规范的最新版本,在css2.1上增加了很多强大的新功能,用来帮助开发人员解决一些问题,并且不再需要非语义化标签,复杂的js脚本和图片,例如圆角、多背景、透明度、阴影等等。css2.1是单一的规范,而css3被划分成几个模块组,每个模块...原创 2018-12-13 08:36:01 · 644 阅读 · 0 评论 -
常见的网页设计错误(上)
原文地址http://blog-en.tilda.cc/articles-website-design-mistakes常见的登陆页面设计错误要避免1.内容不会分解为逻辑块如果将信息分组为逻辑块,则用户更容易摘要信息。将填充设置为120 px-180 px,并使用彩色背景分隔文本块。图1-1,在相关信息集之间几乎没有填充,而且这种设计需要颜色块来将内容划分为逻辑集。结果,这些信息难以...翻译 2018-12-04 11:01:23 · 1112 阅读 · 0 评论 -
vue路由打开一个新的窗口
简单说一下vue路由如何打开一个新的窗口原创 2018-11-29 08:47:40 · 19083 阅读 · 7 评论 -
VScode如何在浏览器中打开html文件
Vscode默认是在控制台下查看html文件,对于我们查看和调试都很不方便,那如何在浏览器中打开呢?1.新建一个HTML文件2.点击左侧的扩展,打开扩展栏3.在扩展栏的搜索栏中输入open in browser,找到open in browser这款插件,点击右下角“安装”字样即可安装。因为我已经安装了,所以再搜索不会显示安装字样4.安装完成后可以看一下这款插件的扩展文档,里面有插...原创 2018-11-26 10:07:47 · 64501 阅读 · 13 评论 -
前端vue项目国际化——vue-i18n
有时候我们的项目需要支持多种语言,切换语言设置时,就自动切换整个项目的文字显示。安装 vue-i18n// npm 安装npm install vue-i18n// script 引入&amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;quot;https://unpkg.com/vue/dist/vue.js&amp;amp;amp;amp;quot;&amp;amp;amp;a原创 2018-11-19 09:18:40 · 768 阅读 · 0 评论 -
HTML5简介
文档篇幅较长,可能需要花点时间看完消化,请耐心看完关注我的个人博客:pinbolei.cn,获取更多内容目录 1、H5的浏览器兼容 2、H5新的文档声明3、H5的特点...原创 2018-11-21 09:23:36 · 2095 阅读 · 0 评论 -
Promise对象用法简介
原自 阮一峰老师的 ECMAScript 6 入门1.什么是promise对象Promise是异步编程的一种解决方案,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。从Promise对象可以获取异步操作的消息,Promise提供统一的 API,各种异步操作都可以用同样的方法进行处理。2.Promise对象的特点对象的状态不受外界影响。Promise对象代表...原创 2018-11-08 10:05:00 · 192 阅读 · 0 评论 -
CSS3弹性盒和媒体查询、响应式布局
一、怪异盒模型的简介二、弹性盒模型Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名&amp;amp;amp;amp;quot;flex&amp;amp;amp;amp;quot;。Flex布局背后的主要思想是给容器控制项目(Flex项目)的宽度、高度的能力,使用Flex项目可以自动填满容器的可用空间(主要是适应所有类型的显示设原创 2018-12-12 08:58:50 · 2268 阅读 · 0 评论 -
vue组件 keep-alive
keep-alive适用于动态组件中,当在组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。keep-alive让组件实例能够被在它们第一次被创建的时候缓存下来。注意这个 &amp;amp;amp;amp;amp;amp;amp;lt;keep-alive&amp;amp;amp;amp;amp;amp;amp;gt; 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。Props:include -原创 2019-01-04 10:52:13 · 393 阅读 · 0 评论 -
vue-router中query和params传参的区别
简单介绍git merge 和 git merge --no-ff的区别关注我的个人博客:https://pinbolei.github.io,获取更多内容原创 2019-04-29 15:48:08 · 345 阅读 · 0 评论 -
vue电商开发记录1—实现电商图片放大镜,移入放大效果
商品详情页中图片移入放大效果没有啥太炫酷的东西,仅为参考最近在重构电商网站,本想随便找个现成的插件,网上看了很多发现不是太炫酷,就是不符合需求,emmmmm…索性就参考别人的自己封装了个放大镜的组件,真香啊…你可以不会写,但一定得会copy,不废话了,上代码~~~~我们先给组件起个名,我先来,emmmmm…就叫PicZoom吧,你们随意~~1.html部分<template&g...原创 2019-04-22 13:35:07 · 1976 阅读 · 1 评论 -
css实现盒子内部 div水平垂直居中
总结一下利用css实现垂直居中的几种方法原创 2019-04-05 14:45:44 · 4387 阅读 · 1 评论 -
git fetch和git pull的区别
1.git fetchgit fetch 相当于是从远程获取最新到本地,不会自动mergegit fetch orgin master //将远程仓库的master分支下载到本地当前branch中git log -p master ..origin/master //比较本地的master分支和origin/master分支的差别git merge origin/master //进行合...原创 2019-02-25 08:34:10 · 186 阅读 · 0 评论 -
git常用基本命令(下)
简单介绍一下git常用的基本命令和Git Flow工作流程1.开新分支原创 2019-02-12 16:34:29 · 243 阅读 · 0 评论 -
git常用基本命令(上)
1.克隆现有的仓库git clone [url]2.初始化仓库git init3.把文件提交到暂存区git add4.把所有的文件提交到暂存区git add . 或 git add *注:包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件5.提交文件到仓库git commit -m '对本次提交的描述'注:添加的描述最好是英文,中文也可以6.检查...原创 2019-01-21 17:21:21 · 170 阅读 · 0 评论 -
git flow工作流
git flow使用介绍原创 2019-01-15 12:02:41 · 3583 阅读 · 1 评论 -
vue组件间通信
简单说一下vue组件间的通信1.父组件向子组件传递数据通过 Prop 向子组件传递数据1.在父组件中注册子组件2.在子组件中声名props,接收从父组件传过来的值3.在子组件的标签中使用props创建的属性4.在父组件中,把要传给子组件的值赋值给props创建的属性示例:&amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;am原创 2019-01-02 09:57:02 · 201 阅读 · 0 评论 -
Element-ui自定义table表头,修改列标题样式、添加tooltip, :render-header使用简介
render-headerrender-header在官方文档中的介绍是这样的:参数 说明 类型 可选值 默认值原创 2018-11-14 09:21:34 · 66555 阅读 · 34 评论