前端
年三十
未来可期
展开
-
js 假值
false null undefined 0 " "(空字符串) NaN除了这 6 个外,其它均为“真” ,包括对象、数组、正则、函数等注意 "0"、"null"、"false"、{}、[] 都是真值原创 2021-07-20 12:54:36 · 568 阅读 · 0 评论 -
margin重叠问题
现象:相邻的普通元素的高度,等于两者相加的绝对值解决:开启 BFC(Block Formatting Content)块级格式化上下文overflow(外层div,值不为 visible ) position(内层div,值不为 static 或 relative ) display(内层div,值为 inline-block,table-cell,flex,table-caption 或 inline-flex) float(内层div,值不为none) zoom(外层div,值为1,清除原创 2021-07-04 22:24:21 · 634 阅读 · 0 评论 -
伪类和伪元素
伪类分为:状态伪类和结构性伪类状态伪类(根据不同的状态展现不同的样式)如::hover :link :active focus结构性伪类(通过文档结构的关系来匹配DOM元素)如::first-child :last-child :nth-child nth-last-child伪元素(创建一个有内容的虚拟容器,需要配合content属性使用,对元素中的特定内容进行CSS渲染层操作,不存在于DOM元素中,无法通过 js 操作)如:::after ::before ::fir原创 2021-06-30 23:06:31 · 491 阅读 · 0 评论 -
【AntDesignPro V5】 只有pages 或 page 目录下的页面才能插入资产
最近在着手使用AntDesignPro这个框架,使用umi气泡创建区块时遇到这个问题,我尝试了两个办法可以解决此问题第一种(网友回答)直接在index.tsx里面return的标签容器中,添加一个a标签即可生效(没探究缘由,但确实生效)第二种(github中issues回答,推荐)设置环境变量处理,在package.json文件中使用cross-env添加命令,执行yarn nocache即可生效"nocache":"cross-env BABEL_CACHE=none umi d.原创 2021-01-26 09:44:48 · 302 阅读 · 0 评论 -
success Installed “[email protected]“ with binaries: - create-umi 文件名、目录名或卷标语法不正确
在创建ant design pro项目的时候执行yarn create umi命令遇到了此问题命令末出现success Installed "[email protected]" with binaries: - create-umi 文件名、目录名或卷标语法不正确的报错提示解决方案如下:找到node.js中安装的包的位置,在bin文件夹中找到create-umi.cmd文件@"%~dp0\C:\Users... "将文件内容中"%~dp0\"字符删除删除后,不要重新执行y.原创 2020-11-27 13:34:33 · 2582 阅读 · 1 评论 -
块级标签包含行内标签底部溢出3px
问题:div里包含img底部多出3px在设置css阴影时发现此问题,检查UI及盒子属性没问题后了解到是 "3px bug "img内联元素,div是块元素,浏览器解析时会在img下预留高度,大小因浏览器而异类似于文本text元素,末尾会有一个空白符,所以会多出几像素解决办法不限于如下三种:1.设置div { font-size: 0 } 将外层块级标签的font-size设置为0;2.设置img { display: block } 将内层行内标签的display设置为bl..原创 2020-05-20 20:30:31 · 248 阅读 · 0 评论 -
swiper 小记 ( 默认显示第二张并居中,最右侧图片回弹显示不全 )
开发官网移动端的时候,用到了swiperjs,遇到两个小问题,简单记录一下最右侧图片回弹显示不全可以设置slidesPerView:'auto',或一页可见数number设置无果,后发现之前有自定义width,设置了width=window.innerWidth取消参数显示正常配置可见数后,用户无法感知滑动机制需要默认显示中间一项居中来引导用户配置如下参数initialSlide:1 // 默认显示下标,自行设置centeredSlides:true // 居中显示.原创 2020-05-15 19:19:30 · 2699 阅读 · 0 评论 -
touch : 无法将“touch”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次
在阿里code托管服务新建了仓库,touch新建README.md文件出现此问题网上有很多配置系统环境变量的解决方案,或者以管理员身份执行,都不能解决我的问题后查阅到两种解决方法:windows可以使用echo > 代替linux中的touch命令windows想使用touch指令需要单独安装npm install touch-cli -g安装后执行命令成功创建文件,解决问题!...原创 2020-05-14 19:55:09 · 8458 阅读 · 0 评论 -
浅析axios中post上传,后台接收不到参数
最近在用vue-element-admin这套模板,其中使用封装的http请求,post请求参数后台反馈接收不到先说一下 HTTP content-typeContent-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件,这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张...原创 2020-04-14 10:37:50 · 822 阅读 · 1 评论 -
回车和失去焦点事件同时触发
使用element中新建标签的功能,按钮没隐藏,发现是因为keyup.enter和blur同时触发了原因:绑定了两个触发方式,执行了两次解决方法:@keyup.enter.native="$event.target.blur"将回车事件指向当前元素的失去焦点事件即可!...原创 2020-04-14 09:40:10 · 2260 阅读 · 0 评论 -
vue / js 实现复制粘贴功能
一 vuevue 可使用vue-clipboard 插件cnpm i vue-clipboard2-S 安装插件在main.js 中引入importVueClipboardfrom'vue-clipboard2'Vue.use(VueClipboard)success 回调,复制成功,即可粘贴按照如图使用即可二 js使用 js 选择要复制的 do...原创 2020-02-10 23:56:17 · 6742 阅读 · 0 评论 -
vue切换路由控制台报错,Uncaught (in promise)
前言:写代码有点洁癖,看见这种影响美观的报错无法忍受跳转 vue-router 中同样的路由会报错,不同路由不会提示经了解,此问题解决方式如下删除你项目下的依赖 node_modules 文件夹,重新初始化 cnpm / npm install(个人理解是更新部分依赖的版本,但有网友遇到依赖更新后版本没有发生变化,和之前报错版本无差) 单独升级vue-router的版本,cnpm...原创 2020-02-10 23:24:57 · 1817 阅读 · 0 评论 -
cookie,sessionStroage,localStroage 区别
前言:做权限登录的时候,思考用哪个存储合理简单梳理三者的区别,慢慢完善Cookie以文本形式保存客户端,大小只有4kb,大小受限 用户可以禁用cookie功能 同源请求时会被携带(服务端和客户端互传,不论是否需要),加大http流量,数据过多影响性能 以明文方式传输信息不安全,使用https处理,安全性较低 cookie过期时间,不设置默认跟随浏览器的生命周期而销毁,若设置...原创 2020-01-19 16:27:53 · 254 阅读 · 0 评论 -
前端工程师的成长论
即使是在瞬息万变的前端领域,也存在一些具备“一次学习,终生受用”特性的知识,比如前端性能优化的核心思路,再比如我们这次要展开来讲的JavaScript设计模式。在软件工程中,设计模式(design pattern)是对软件设计中普遍存在(反复出现)的各种问题,所提出的解决方案。 ——维基百科烹饪有菜谱,游戏有攻略,每个领域都存在一些能够让我们又好又快地达成目标的“套路”。在程序世界,编...原创 2020-01-14 14:32:56 · 399 阅读 · 0 评论 -
vue多页面打包配置
因业务需求中,有多页面打包的需求经个人查阅,有两种处理方式方式一vue-cli版本3.x是支持多页打包的,可以直接在webpack.config.js 中添加pages,配置比较方便 pages: { index: { entry: './src/main.js', template: 'index.html', filename...原创 2020-01-07 10:37:07 · 2844 阅读 · 1 评论 -
Vue 登录权限简析
vue的后台管理登录思路登录填写用户名密码,发送给后台 后台校验通过后,返回token 前端拿到token保存到sessionStroage / localStroage / cookie 中,以及Vuex,并跳转路由页面 前端请求后台或跳转路由时,判断缓存中是否有token,没有登录拦截,有则继续跳转 根据 token 去获取用户信息,请求后端接口,携带token参数 后端...原创 2019-12-20 18:50:06 · 231 阅读 · 0 评论 -
微信分享接口,配置参数后无效分析
常有一些微信内分享自定义内容的需求,遇到几个小问题,分析记录于此接手外包项目,修改其中微信分享朋友/朋友圈的功能此功能微信提供了两个接口updateTimelineShareData(分享朋友圈)/ updateAppMessageShareData(分享朋友)onMenuShareTimeline / onMenuShareAppMessage后者是即将被废弃的接口...原创 2019-12-19 12:36:48 · 1307 阅读 · 1 评论 -
简述ES6,JavaScript,TypeScript三者关系
简单梳理三者关系ES6是国际标准化组织 ECMA 制定的一套标准Javascript是基于此标准进行实现和扩展的TypeScript是由微软开发的自由和开源的编程语言,可以编译出纯净、 简洁的JavaScript代码,并且可以运行在任何浏览器上TypeScript的优势:它有更多的规则和类型限制,代码具有更高的预测性、可控性,易于维护和调试所以TypeScript是一种由微...原创 2019-12-16 15:17:37 · 832 阅读 · 0 评论 -
pointer-events: none导致点击事件失效解决方法
前言在页面中我们可能会使用图片作为按钮去处理但在微信中打开页面,长按会触发微信的图片保存机制这时候我们就用到了pointer-events:none;这个CSS属性显然它能解决禁止长按保存的问题但也引发了事件不生效,一起禁止了使用两个方式解决:在相同位置写个DOM元素去占位,替代图片,触发此DOM的事件 将图片设置为背景图片去处理即可解决!...原创 2019-12-03 13:25:54 · 8515 阅读 · 0 评论 -
Elements in iteration expect to have ‘v-bind:key’ directives eslint-plugin-vue
使用vscode时的语法检测这是ESLint的功能,对vue进行了eslint检查,把eslint对该插件的检查关闭即可解决方法:文件–》首选项–》设置–》在搜索框中输入:vetur.validation.template找到vetur.validation.template:true,将vetur.validation.template:true在右栏框中进行重置为false...原创 2019-11-19 13:07:44 · 217 阅读 · 0 评论 -
浅析同步和异步
理解同步和异步,过段时间再去想,感觉有点把两者混淆了,重新梳理下基本概念:同步:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程;异步:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待。区别:一个需要等待,一个不需要等待,在部分情况下,我们的项目开发中都会优先选择不需要等待的异步交互方式。例如:同步:当程序1调用程序2时,程序...原创 2019-11-19 13:19:19 · 181 阅读 · 0 评论 -
谷歌浏览器无法自动播放视频问题
在网站中,可能有时候需要一个展示效果...这时候我们或许会采用视频处理,但自动播放会遇到一些小问题以下是谷歌的声明:谷歌正在一步步解决Chrome浏览器遇到的站点自动播放视频及音频的问题, 在4月发布的Chrome 66版本中,谷歌已经将带声音的视频自动播放默认禁止。只有用户点击或点按网站后媒体不播放声音或者(在桌面设备上)用户之前已对网站上的媒体表现出兴趣时,才允许自动播放。这会...原创 2019-11-19 12:06:30 · 5537 阅读 · 0 评论 -
Echarts地图china.js
在做公司数据可视化时,使用了Echarts使用Echarts进行地图绘制展示的时候,需要china.js的引入但是官网貌似已经停止了china.js的下载,官方建议使用百度地图代替当时觉得麻烦,就找到了china.js的下载资源链接永久有效,如果失效可以留言私发链接: https://pan.baidu.com/s/1Oq6gFPWjXHPQSiZ1Pq1-8A 提取...原创 2019-11-19 11:45:21 · 19825 阅读 · 20 评论 -
vue项目拷贝到另一台电脑后,编译后报错
由自己的MacBook Pro更换成了公司新配的Windows...将vue项目拷贝到Windows电脑上运行后报错解决问题:因为node_modules 不是源码,只是根据依赖装的开发依赖和项目依赖在不同系统环境下的可执行文件是不一样的,node_modules存的可执行文件所以不同环境下的可执行文件应重新生成其实和GitHub上传有点相似,在clone的仓库中,.g...原创 2019-11-19 11:15:38 · 2842 阅读 · 0 评论 -
VUE莫名错误
今天线上正在用的后台系统,准备优化两个功能优化功能后上传到服务器,vue就开始报错但是代码没有任何问题,和上一版本一模一样查找了很多的名词错误,以及解决方案,无果然后检查语法错误,vue自动检测标签是否规范,缺少标签,窃喜,然,无果。继续看,其实是element UI的js文件报错,就检查element的填充参数删删改改也没问题后来发现el-option标签,这个标签应该是...原创 2019-08-03 15:20:45 · 538 阅读 · 0 评论 -
获取屏幕分辨率不符
代码通过window.screen.height去获取屏幕分辨率,PC端没有问题有一天在iPad上测试,发现页面宽度只有一半展示,发现了这个问题后查阅发现,是因为屏幕有【物理分辨率:即硬件所支持的(比如:手机的分辨率)】和【逻辑分辨率:即软件所能到达(比如:各种像素单位在不同屏幕下,设备像素比例是不同的)】之分解决办法:1.添加meta标签<meta name="viewpo...原创 2019-08-11 12:17:49 · 715 阅读 · 0 评论 -
npm i xxxx -D,-S,-g
npm常用的安装命令npm i 就是npm install 简写 npm i xxxx-D 就是npm i xxxx--save-dev npm i xxxx-S 就是 npm i xxxx--save npm i xxxx-g 就是 全局安装 npm i xxxx 就是本地安装命令详解npm i xxxx--save-de...原创 2019-08-11 17:37:08 · 6402 阅读 · 0 评论 -
使用iframe底部留白
经了解,iframe是一个内联框架,属于内联元素,可能会出现间距空白问题下面两个属性均可解决问题vertical-align: bottom; display: block;<iframe border="0" style="display:block;" width="" height="" frameborder="0" scrolling="no" src...原创 2019-09-17 10:33:44 · 1193 阅读 · 2 评论 -
vue脚手架打包,-webkit-box-orient样式丢失
本地调试正确,打包后缺少样式是因为使用autoprefixer打包的时候,把此属性删除了我们采用官网的Control Comments(控制注释)处理 /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */经处理后打包,样式显示无误...原创 2019-09-17 10:38:43 · 163 阅读 · 0 评论 -
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
本地调试使用iframe报错,跨页面操作涉及域的概念(origin)Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. 未捕获的安全错误:阻止了一个域为null的frame页面访问另一个域为null的页面本地文件file:///打开会报这个错误,可以...原创 2019-09-17 10:45:57 · 6417 阅读 · 1 评论 -
Element的表单验证规则,清空或填充数据如何避免自动触发
前言使用Element中的form表单检查规则,编辑窗口中填充数据,新建时需清空需要注意一点:方法:resetField,不是把表单属性都清空,而是重置为初始值比如form在加载渲染之前,属性已经被赋值(初始值),所以再次使用resetField不会清空表单数据,而显示初始值可以理解为重置功能问题将表单数据进行清空后,出现表单rules规则自动验证提示点...原创 2019-09-25 14:51:48 · 16340 阅读 · 9 评论 -
http://localhost:8080/favicon.ico 404
前言新建页面经常遇到http://localhost:8080/favicon.ico 404现象强迫症看着十分碍眼解决办法生成个favicon.ico,在head标签引入favicon.ico文件即可 在head中引入<link rel="shortcut icon" href="#" /> 默认图标不指定路径标记!...原创 2019-09-27 16:32:38 · 8098 阅读 · 0 评论 -
ajax的绝对路径和相对路径问题
前言Java同事修改jsp页面中ajax参数,写的相对路径,请求无效以http://www.xxx.com/abc/def为参考相对路径:./123则:http://www.xxx.com/abc/123相对路径:../123则:http://www.xxx.com/123绝对路径:/123(从"/"根目录后添加项目接口名称 )则:http://www.xxx...原创 2019-10-09 15:04:33 · 658 阅读 · 0 评论 -
安卓谷歌浏览器全屏打开HTML
一开始打算,将vue项目嵌入到webview中,发布到大屏设备页面中有地图拖拽等功能,使用crosswalk嵌入后,交互变的很卡顿腾讯X5和Chrome内核都有试过,crosswalk也不在维护安卓工程师最近也很忙,没有时间去做这个事情后来想,干脆曲线救国在大屏上直接下载浏览器,让浏览器全屏用了两种方式第一个:<meta name="mobile-web-ap...原创 2019-08-08 17:45:27 · 14855 阅读 · 1 评论