前端项目常见问题总结
文章平均质量分 91
Flowering_Vivian
这个作者很懒,什么都没留下…
展开
-
display:flex布局下white-space:nowrap失效问题解决
文字长度过长显示省略号的样式设置方法众所周知:h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}然而有一次,我在项目中用到white-space: nowrap的时候,发现它失效了,我的项目是flex布局,宽度自适应的部分,white-space: nowrap撑开了内容区的长度,省略号是显示了,但是父元素的自适应宽度完全不对了。页面部分布局如下:<template> <原创 2020-11-30 10:44:48 · 3766 阅读 · 0 评论 -
ES6常用方法总结:数组去重、遍历数组(map、filter、forEach区别)、some和every区别
记录一下自己在vue项目中使用es6的常用方法:删除数组元素let arr = ['a', 'b', 'c']// 删除'c'arr = arr.filter(i => { return i != 'c'})$set有些情况下,仅仅通过“=”号来赋值,无法触发数据的实时更新,这个时候用$set就可以。this.$set(obj, 'name', value); //三个参数分别为对象、参数名、参数值对象赋值不改变原对象const newObj = Object.ass原创 2020-10-14 16:07:56 · 2220 阅读 · 0 评论 -
element-ui常见问题总结(表单校验、表格checkbox自动取消选中等)
在vue中使用element-ui过程中遇到的问题总结将element-ui的默认语言设置为英文1.main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'Vue.use(ElementUI, { locale })2.webpack.dev.conf.js 和 webpack.prod.conf.js 在plugins增加原创 2020-09-24 09:19:32 · 2940 阅读 · 0 评论 -
jqGrid常见问题、常用方法总结
最近项目中用jqGrid来实现页面中的表格数据,使用过程中感触颇多,总体发现jqGrid灵活性还是很好的,我使用过程中参考了API文档,感觉这个API文档挺全面的,文档地址为:jqGrid实例中文版1.jqGrid获取数据信息1-1 获取分页信息获取返回的当前页,每页数,总页数,返回的总记录数的代码如下:var re_records = $("#gridTable").getGridParam('records'); //获取返回的记录数 var re_page = $("#gridTabl原创 2020-09-24 09:19:19 · 887 阅读 · 0 评论 -
HTML5 fileReader对象实现图片上传(支持一次上传多张图片),并用canvas进行前端压缩
首先页面布局的代码是这样的将type="file"的input绝对定位到上传图片的图标上,并且将opacity设置为0,即可实现样式效果。multiple代表可支持一次上传多张图片accept=“image/*” :代表会打开图库或者照相机但是在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框,简直不能忍呀。在IE和Firefox中则没有发现响应延迟的问题解决办法:accept=“image/gif,image/jpeg,ima原创 2020-09-24 09:18:34 · 777 阅读 · 0 评论 -
IE6/7兼容性问题总结
IE兼容问题1.JavaScript日期转化为时间戳出现NaN错误原始字符串 2016-10-11var date = new Date(“2016-10-11”) 在IE下date是NaN,而其他浏览器正常。字符串修改成 2016/10/11var date = new Date(“2016/10/11”) 就正常了IE6/7兼容性问题1.z-index兼容性问题问题描述:假如页面中A和B是兄弟元素,C是A的子元素,D是B的子元素,当我给C和D都设置了绝对定位(position:absol原创 2020-09-23 15:07:37 · 229 阅读 · 0 评论 -
Bootstrap弹出层model上嵌套的弹出层中input输入框无法输入问题解决方案
做项目过程中,在model弹出层上面又自定义了一个弹出层,自定义弹出层上面有input输入框,但是却获取不了焦点,无法输入。原因:Bootstrap框架目前只支持一层model层,即当前model层上无法再用model弹出层。解决方案:将Bootstrap弹出层最外层div的 tabindex属性去掉即可(如下面的代码示例,将tabindex这个属性去掉,不要改变其属性值,改变属性值是没用的)<div class="modal fade" id="template-modal" tabindex原创 2020-09-23 14:13:13 · 968 阅读 · 0 评论 -
HTML、CSS常用方法总结(谷歌浏览器记住密码自动填充无法去掉、文字截断在火狐浏览器不生效等)
1.去掉谷歌浏览器input记住账号或密码时默认出现的黄色背景直接用css的内阴影来覆盖黄色input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } 2.table表格固定列宽table{ table-layout:fixed;}3.文字截断在火狐浏览器不生效word-break: break-all;在火狐浏览器不生效,原因是加在了span(行内元素)标签上不生效,加在di原创 2020-09-23 14:09:35 · 489 阅读 · 0 评论 -
js实现时间戳转换成日期格式、日期格式转化为时间戳
1.将时间戳转换成日期格式:function timestampToTime(timestamp) { var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = date原创 2020-09-23 11:47:56 · 336 阅读 · 0 评论 -
jquery常用方法总结(select方法、阻止事件冒泡等)
1.jquery阻止事件冒泡$('#btn1').click(function (event) { event.stopPropagation();});2.jquery判断是否显示或隐藏if($("#test").is(':visible')){...} //是否显示if($("#test").is(":hidden")){...} //是否隐藏3.jquery select操作$(".selector").val("pxx"); //设置value为pxx的项选中$原创 2020-09-23 11:38:49 · 622 阅读 · 0 评论 -
移动端常见问题解决方案(position:fixed失效、overflow:auto导致滚动不流畅、input获得焦点软键盘弹出时position:fixed的footer遮挡内容区域等)
移动端弹层水平垂直居中方法.layer{ position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transfor原创 2020-09-23 11:30:01 · 2374 阅读 · 0 评论 -
SVN使用教程:将online分支的代码合并到sprint分支
SVN将online分支的代码合并到sprint分支操作步骤:进入到sprint分支的项目根目录,例如dev目录,鼠标右键 -> TortoiseSVN->Merge…Merge type 勾选第一项 Merge a range of revisions -> nextURL to merge from 选择online分支的dev目录 -> specific range 点击 show log按钮 -> 勾选要合并的log -> next默认勾选Compare原创 2020-09-23 11:24:16 · 595 阅读 · 0 评论 -
Vue常见问题总结(改变vue打包路径、img的src绑定问题、$nextTick、变量包含script结束标签报错)
一、改变vue打包的路径修改config目录下的index.jsvar path = require('path')module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'),原创 2020-09-23 11:17:41 · 796 阅读 · 0 评论 -
Vue兼容IE9
1.首先npm install –save babel-polyfill2.然后在main.js中的最前面引入babel-polyfillimport 'babel-polyifll'3.在index.html 加入以下代码(非必须)<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">4.在webpack.base.conf.js中,修改编译配置entriy:{ app:['babel-polyfill原创 2020-09-23 11:04:13 · 210 阅读 · 0 评论 -
父子页面通过postMessage通信实现iframe高度自适应
最近项目中的需求是实现iframe高度的自适应,因为iframe表单中的内容多少不固定,所以高度也是不固定的,网上百度了好多方法,发现都没用。偶然间发现父页面和iframe子页面之间可以通过postMessage通信,这样的话,就可以在子页面获取表单的整体高度height值,然后通过通信的方式传递给父页面,父页面拿到height值,再赋值给iframe。这样我的问题就得到了完美解决,话不多说,上代码。1.iframe子页面//在页面初始化之后执行该方法,mainForm是表单父元素的idfunct原创 2020-09-22 16:44:23 · 621 阅读 · 0 评论 -
Vue定义全局过滤器和全局公共函数
一、vue定义全局过滤器1.定义过滤器js文件,例如:src/common/filters/filter.jsfilter.js文件内容如下://所属部门exports.departmentFilter = (value) => { switch(value) { case 1: return '人力资源部'; break; case 2: return '技术部';原创 2020-09-23 09:48:43 · 770 阅读 · 1 评论