前端
hua_ban_yu
这个作者很懒,什么都没留下…
展开
-
Duplicate keys detected: ‘***‘. This may cause an update error
在开发vue项目时遇到Duplicate keys detected: '13'. This may cause an update error错误,这个错不会影响页面显示,但是会一直在控制台上打印。如图错误原因:v-for循环时设置的key值不是唯一的。如图解决方案设置v-for循环的key是唯一的。如图...原创 2021-08-26 10:47:26 · 11391 阅读 · 2 评论 -
vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
在开发vue项目使用路由跳转当前页面发现控制台报错vue-router.esm.js:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/instDetail?instId=3" 错误。错误原因:使用this.$router.push跳转页面时,对应的query参数和当前地址栏上的参数一样导致解决方案: 判断地址栏上的in...原创 2021-08-18 11:21:57 · 7055 阅读 · 0 评论 -
vue如何跳转本页面
在使用vue开发项目时遇到一个需求,点击标题跳转当前页面。通过this.$router.push已经更改了url上面的参数,但是页面没有重新加载,这个要如何处理呢?可以通过使用watch监听地址栏上的参数变化实现页面数据更新。实现代码: watch: { $route: { // 监听路由的参数变化 handler () { // 数据变化更新数据 this.instId = this.$route.query.instId this.g.原创 2021-08-18 11:12:29 · 1735 阅读 · 0 评论 -
vue父组件传子组件数值,子组件值没有变
在使用vue开发项目时遇到一个这样的问题,由于项目多成封装,数据是从祖父组件传给孙子组件,中间隔了一个父组件,由于孙子组件不能直接修改值,所以定义了一个变量,从而导致祖父组件更新内容后,孙子组件内容没有发生变化。如图解决方法:在孙子组件中watch监听input输入变更的值祖父组件 <search-choose :filterObj="secondFilterArr[i]" v-if="secondFilterArr.length&g...原创 2021-08-06 15:49:27 · 3946 阅读 · 0 评论 -
vue设置多个路由文件
1. 在vue的router文件下创建report.js文件2. 在report文件里面设置路由内容3. 回到index.js文件,引入report文件,然后合并路由原创 2021-07-23 11:20:42 · 2073 阅读 · 0 评论 -
webpack设置@代替src
1. 打开webpack.config.js文件2. 在webpack.config.js文件找resolve,添加如下代码 '@': path.resolve(__dirname,'src'),原创 2021-03-26 16:36:05 · 741 阅读 · 0 评论 -
vue项目运行报Module not found: Error: Can‘t resolve ‘@/component/TaskCard‘错误
运行vue项目时报Module not found: Error: Can't resolve '@/component/TaskCard'错误原因:App.vue文件引入的路径报错解决方案:修改App.vue文件的引入路径 错误路径: 正确路径:注意:如果修改路径还报错,请删除node_modules文件夹后重新运行 npm install...原创 2021-03-26 14:29:56 · 80332 阅读 · 3 评论 -
angualr创建npm并打包
在使用angular开发项目的时候,有些东西为了方便调用和单独管理,需要把部分组件通过npm封装进行调用,那如何使用创建组件并打包为npm可以调用的呢?步骤如下:一、创建厂库1. 打开终端命令面板,输入命令创建一个项目为createLibng new createLib2. 使用前端开发工具打开新建的 createLib 项目3. 开发厂库使用以下命令创建厂库,厂库在项目根目录下名字为projects的文件夹,在projects下有刚刚自己新建的仓库ng ..原创 2020-05-08 17:32:49 · 599 阅读 · 0 评论 -
git branch -r 显示不是最新的远程分支列表
在远程厂库新建一个分支,使用git pull 命令更新代码后再用git branch -r查询远程分支,试了好几次都没有查看到新建的远程分支。原因: git branch -r 命令不会每次都获取最新的远程厂库分支解决方法: 使用git fetch 命令更新分支,然后再使用git branch -r 即可查看到最新的远程分支...原创 2019-11-20 11:14:09 · 1265 阅读 · 0 评论 -
ionic框架导致多行省略号第一次显示不起作用
在使用ionic框架开发项目遇到一个坑,使用多行显示省略号第一次页面加载无效,然后进行页面跳转获取修改一个css样式,这时候多行显示省略号才会有效果。原因: 使用ionic提供<ion-avatar>加载图片导致。重现步骤:1. 没有修改前页面初始化显示列表数据,发现多行显示省略号效果不对2. 随便修改一个参数后发现多行显示省略号就生效了修改方法:1...原创 2019-11-05 15:14:54 · 339 阅读 · 0 评论 -
css设置滚动调隐藏还是可以滚动
在开发过程中,有时候需要把滚动条隐藏但依然可以实现滚动效果,这个要如何实现呢?原理很简单,只要在需要隐藏滚动条的div外面加上一个父div,然后设置父div内容超出隐藏,同时把子div的高设置100%、宽设置为100%+滚动条的宽、overflow:auto,就可以实现滚动条隐藏依然可以滚动效果。实现代码,可以直接复制后查看效果<!DOCTYPE html><html...原创 2018-09-27 14:16:46 · 669 阅读 · 0 评论 -
Uncaught TypeError: Cannot read property 'offsetHeight' of null
在使用offsetHeight计算内容的高度时报Uncaught TypeError: Cannot read property 'offsetHeight' of null这个错误。错误原因:JS运行的时候页面还没有加载完成,js代码找不到页面元素,就会抛出这个问题解决方案:把自定义js放在<body/>结束标签前。...原创 2018-09-21 11:45:02 · 27866 阅读 · 1 评论 -
position:fixed显示错位
在项目开发过程中遇到一个问题,使用layer显示弹出框时,弹出框里面的标签设置position:fixed显示位置是从弹出框位置进行定位,而非屏幕视口(viewport)的位置来定位。经过调查发现,原来layer弹出框使添加了layui-anim类,这样样式类中使用了transform进行动画的效果的设置。position:fixed定位错误原因:当使用了position:fixed...原创 2018-09-27 14:16:18 · 11113 阅读 · 0 评论 -
如何设置文本溢出显示省略号
在前端开发中,单行省略号可以直接使用css进行设置,那如何对多行文本进行设置省略号呢?如果不考虑兼容性问题可以直接使用以下css设置:overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 3;但是在开发过程中需...原创 2018-10-12 10:30:01 · 1013 阅读 · 0 评论 -
video在iphoneXR无法填满
在使用video播放视频时发现在iphoneXR手机显示的视频的高无法填满,但在其他手机确没有这个错误。解决方案:对video标签添加 object-fit: cover;问题原因:由于iphoneXR顶部和其他手机不一样,所以对iphoneXR设置了一些处理,导致video无法填满找整个高度,所有使用object-fit: cover;设置让高度和宽度填满...原创 2019-01-28 14:18:11 · 1189 阅读 · 0 评论 -
Swiper无法自动播放
在使用Swiper插件制作轮播图片时,发现Swiper轮播一次后就无法自动轮播,经过查询后发现Swiper的4.x版本不支持loop:true的使用,可以直接使用autoplay: true代替,解决方案: 在使用4.x版本的Swiper设置自动播放需要去掉loop:true,使用autoplay: true设置自动播放自动播放代码:var mySwiper = new Swipe...原创 2018-09-14 17:14:30 · 15955 阅读 · 1 评论 -
layer设置显示位置
layer设置显示位置可以通过offset进行设置,设置代码: layer.open({ type: 2, content: "content.html", offset:"rb" })...原创 2018-09-19 16:04:59 · 32330 阅读 · 0 评论 -
jquery修改带有!important的样式属性
css中!important的样式属性是最高级别的,在前端开发中有时候需要使用jquery修改带有!importan属性的样式,使用常用的$(".bg").css({"background-color":blue}); 是无法修改到带有!important的样式属性,需要修改可以通过cssText进行修改修改代码:$(".bg").css("cssText", "background-co...原创 2018-09-13 14:07:21 · 4125 阅读 · 1 评论 -
安装webpack 报 no such file or directory, open 'G:\Demo\package.json'
在使用npm安装webpack时报 no such file or directory, open 'G:\Demo\package.json'原因:项目目录中没有package.json文件导致解决方案:使用 npm init -y 或 npm init -f 命令来生成一个package.json...原创 2018-09-07 10:15:54 · 5415 阅读 · 0 评论 -
ComboTree设置zindex;ComboTree不显示
在使用easyUI的ComboTree设置下拉框时,同时使用layer插件,导致ComboTree的下拉菜单显示不出,经过调查发现原来是Combotree下拉框内容的zindex默认值是110000,而layer弹出框zindex远远大于它,导致ComboTree点击时显示不出下拉框内容解决方法:只要修改zindex的值比layer的值大即可解决方案:方案1.可以直接去easyUI.j...原创 2018-09-03 17:52:32 · 1070 阅读 · 0 评论 -
no such file or directory,找不到package.json错误
npm install --save-dev webpack安装时,终端报找不到package.json错误。去对应的文件目录下发现,确实缺少package.json文件。可能是以前不小心把package.json文件删除了,可以直接使用npm init重新初始即可。输入: npm init ...原创 2018-09-01 12:11:47 · 33498 阅读 · 1 评论 -
npm err! a complete log of this run can be found in
在安装webpack的时候,运行npm install --save-dev webpack时,终端报npm err! a complete log of this run can be found in错误,想来可能npm出问题了,重新更新一下npm后再次安装webpack就可以了。 更新npmnpm install npm -g 使用淘宝镜像命令更新 (速度更快)cnpm ...原创 2018-09-01 12:02:17 · 65826 阅读 · 7 评论 -
display:table-cell巧妙用法;使用display:table-cell制作搜索框
两个或者两个以上标签一起使用显示在同一行时,以前常用的是float、position进行布局,在高版本的浏览器可以使用flex进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局,下面的是一个使用display:table-cell制作自适应搜索框(无论如何修改搜索按钮的内容,对应的input输入框一直都是100%显示)。 制作步骤1.新建三个标签...原创 2018-09-27 15:26:38 · 1278 阅读 · 0 评论 -
安装vue报 npm WARN saveError ENOENT: no such file or directory, open 'F:\test\package.json'错误
在使用npm安装vue时,报npm WARN saveError ENOENT: no such file or directory, open 'F:\test\package.json'错误。 错误原因:项目没有package.json文件导致解决方案:使用 npm init -y 生成默认的package.json文件...原创 2018-10-18 14:55:52 · 17436 阅读 · 0 评论 -
安装webpack报 npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. 错误
在使用npm安装webpack时报 npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself. 错误。报错原因:peer库ajv@^6.0.0解决方案:方案1:手动安装ajv@^6.0.0...原创 2018-10-18 15:46:15 · 5443 阅读 · 1 评论 -
js时间格式转化
时间格式转化代码function formatDate(date){ //设置时间转换格式var y = date.getFullYear(); //获取年 var m = date.getMonth() + 1; //获取月 m = m var d = date.getDate(); //获取日 d = d return y +原创 2017-12-25 11:34:37 · 219 阅读 · 0 评论 -
ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered.
在使用angular + ng-zorro 开发项目时,遇到core.js:14597 ERROR Error: [@ant-design/icons-angular]: the icon reload-o does not exist or is not registered.这个错误,由于项目问题只能使用angular7版本,对应的ng-zorro也是7版本的。问题: 最后发现使用...原创 2019-09-09 19:00:01 · 9758 阅读 · 4 评论 -
offsetTop无法获取到标签与body的距离
在项目开中使用offsetTop获取当前标签与body标签的距离,发现offsetTop获取的高度为0。通过查询offsetParent属性返回值:(1).返回距离当前元素最近的采用定位祖先元素。(2).如果祖先元素中没有采用定位的元素,则返回body元素。使用offsetTop获取的标签距离的父级元素使用了position进行定位,导致获取到的获取的实际距离不是从body到当前对...原创 2019-09-02 16:03:32 · 4731 阅读 · 0 评论 -
Property 'searchMes' is private and only accessible within class 'HomeComponent'.
在使用angular开发项目使用打包命令打包的时,遇到了Property 'searchMes' is private and only accessible within class 'HomeComponent'.这一类错误。原因: 定义变量的时候都使用了 private 导致,使用 ng buil --prod 命令打包的时候无法读取html页面使用private定义的变量解决:...原创 2019-08-30 16:05:26 · 3351 阅读 · 0 评论 -
"export 'ɵɵdefineInjectable' was not found in '@angular/core'
在使用angular的ng serve运行项目时,报WARNING in ./node_modules/@angular/cdk/esm5/overlay.es5.js 527:63-81"export 'ɵɵdefineInjectable' was not found in '@angular/core'错误,导致无法成功运行解决方案:npm install -S @an...原创 2019-07-30 15:45:08 · 7084 阅读 · 0 评论 -
This dependency was not found:
在运行项目的时候报这个错误,经过查询发现<script>引入的 import { resolve } from 'dns' 的路径不正确,把路径修改正确就好了This dependency was not found:* dns in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-...原创 2019-03-25 10:02:11 · 4946 阅读 · 0 评论 -
canvas锯齿
zai使用canvas绘制图形的时候发现显示带一些锯齿,视觉效果非常不好可以通过使用在js中使用.translate(0.5, 0.5)清处锯齿代码:let canvas = document.createElement("canvas");let cirCtx = canvas.getContext("2d")cirCtx.translate(0.5, 0.5); //使用...原创 2019-02-20 16:27:02 · 1248 阅读 · 0 评论 -
Autoprefixer为什么没有对border-radius添加前缀
在使用Autoprefixer进行前缀自动补充的时候,发现Autoprefixer没有对border-radius自动添加前缀,经过查询发现浏览器基本上已经支持border-radius属性,除了ie6-ie8、Opera10.1这几个版本不支持,其他浏览器已经都支持border-radius属性。border-radius支持浏览器:https://caniuse.com/#search=b...翻译 2019-02-15 11:50:42 · 478 阅读 · 1 评论 -
object-fit的使用
object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框,常用于图片、视频填充问题。object-fit的css属性:object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; contain被替换的内...原创 2019-01-28 14:27:26 · 2468 阅读 · 0 评论 -
vscode打开多个项目
vscode默认打开的是一个项目,可以通过使用快捷键:ctrl + shift + n 打开多个项目(mac快捷键: command + shift + n)原创 2018-12-24 17:11:10 · 7704 阅读 · 2 评论 -
ios点击出现灰色背景
iOS当通过Javascript定义的可点击元素的时候,就会出现一个灰色背景,导致显示非常不友好。如何禁用这个效果,可以通过-webkit-tap-highlight-color: rgba(0,0,0)去掉这个效果。代码:span{ -webkit-tap-highlight-color:rgba(0,0,0,0);} ...原创 2018-12-06 15:22:43 · 3351 阅读 · 0 评论 -
jq获取标签的宽、高;jq获取标签包含边框的宽、高
获取宽度$('div').width();// width() = div本身宽度$('div').outerWidth();//outerWidth = div本身宽度 + padding + border$('div').outerWidth(true);//outerWidth(true) = div本身宽度 + padding + border + margin获取高...原创 2018-08-31 17:46:25 · 2114 阅读 · 0 评论 -
html标签中的title属性有空格,空格后不显示问题
在开发过程使用了title属性进行提示信息,但发现使用js代码设置title有空格时空格后面的内容不显示。解决方法:将字符串中的所有空格替换成ascii的对应的空格符号str = str.replace(/ /g,'&#32;')...原创 2018-08-17 18:15:20 · 7840 阅读 · 0 评论 -
net截取字符;@ViewBag获取字符串中的某个字符
在net开发中,有时候需要获取后台转过来的字符串进行一些处理,如果获取后台转到前端的字符串中的某些字符呢?可以通过Substring(satrt,end)进行获取。以下是获取字符串中的第一个字符案例: <span class="user-name-box">@ViewBag.User.Name.Substring(0, 1)</span>...原创 2018-07-31 11:32:12 · 969 阅读 · 0 评论 -
highcharts状态图初始化底部空白
在修改一个项目有遇到Highcharts初始化页面时,柱状图底部出现空白,查了很久代码没有问题,查询了很久发现没有人遇到类似的问题。如图:查了很久发现不用Highcharts的legend属性里layout: 'vertical'或者不是柱状图 SetEveryOnePointColor()渐变的方法就不会存在空白的虽然有解决方案了,但是以上解决方案会影响页面的一些效果,不原创 2018-01-09 17:26:56 · 1147 阅读 · 0 评论