个人碰到的前端问题总结及解决方法1
文章目录
- 个人碰到的前端问题总结及解决方法1
- 1、如何判断内容是否超出容器宽度或高度？
- 2、如何使用jQuery隐藏元素？
- 3、如何实时监听方法？（想实现实时监听浏览器窗口宽度是否变化，以便动态展示信息）
- 4、字符串区分中文和英文？
- 5、element的加载动画？
- 6、本地和服务器上传样式不一致？
- 7、如何解决element表格顺序错乱？
- 8、如何判断对象是否为{}（空对象，没有属性和属性值）？
- 9、如何将后端返回的数据根据内容换行？
- 10、路由跳转传对象，页面刷新后，对象数据获取错误？
- 11、如何使element表单和表格共用校验？
- 12、表单验证报Cannot read property 'validate' of undefined错误
- 13、element 多选框 @change事件怎样保留默认参数？
- 14、如何解决在线pdf下载分辨率大小不同，下载的字体大小不同？
- 15、路由跳转不执行created、mounted方法？
- 16、echarts 显示报没有这个id
- 17、element ui 表格获取当前行数
- 18、重复调用echart组件，只有第一个显示 已解决
- 19、echarts yAxis的文字不固定大小 已解决
- 20、css画圈 里有勾、有叉、有减号 特殊符号：
- 22、nginx解决反向代理超时
- 23、Vue--判断用户首次进入页面还是刷新页面？
- 24、vue移动端适配项目
- 25、webstorm插件 效率提高
- 26、elment日期限制
- 其他
1、如何判断内容是否超出容器宽度或高度？
解决方法：
let temp = document.getElementById("test")
for (let i in temp) {
let cWidth = temp.clientWidth;
let sWidth = temp.scrollWidth;
if (sWidth > cWidth) { //超过
console.log("超出")
} else {
console.log("不超出")
}
}
参考链接：https://blog.csdn.net/weixin_40532650/article/details/111982387
2、如何使用jQuery隐藏元素？
方法一：
$('#id').css('display','none');
$('#id').css('display','block');
方法二：
$('#id').hide();
$('#id').show();
方法三：
$("#div1").attr("display","block");
$("#div1").attr("display","none");
参考链接：https://blog.csdn.net/baidu_39812199/article/details/85340511
3、如何实时监听方法？（想实现实时监听浏览器窗口宽度是否变化，以便动态展示信息）
方法一：
window.addEventListener("resize", this.judgeEllipsis);
方法二：
window.onresize = function(){
changeMargin();
};
参考链接：
https://www.w3school.com.cn/js/js_htmldom_eventlistener.asp
https://blog.csdn.net/weixin_39943370/article/details/117788623
4、字符串区分中文和英文？
解决方法：
var realLength = 0
var str=$(id).text().trim()
let len = $(id).text().trim().length
var charCode = -1
for (var j = 0; j < len; j++) {
charCode = str.charCodeAt(j);
if (charCode >= 0 && charCode <= 128) realLength += 1;
else realLength += 2;
}
参考链接：https://blog.csdn.net/aliven1/article/details/96971850
5、element的加载动画？
const loading = this.$loading({
lock: true,
text: '正在提交中,请稍候',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
loading.close()
参考链接：[官网][1]
6、本地和服务器上传样式不一致？
首先vue项目在index.html加上下面4行
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
样式不一致注意事项:
一般本地和服务器样式不一致是因为样式加载顺序导致，想修改可以自己去比对服务器和本地的区别，然后再修改本地的样式以达到样式正确
原因：
1.在组件的样式中记得未添加 'scoped' 导致全局污染
2.main.js中加载css顺序,在样式表文件中，越靠后的优先级越高。
3.库样式可能是动态js控制
解决方法：
1.组件内的样式没有生效，可能是被第三方组件样式覆盖了，main.js中router放在最后引入，就可以实现组件样式在第三方样式之后渲染。
例如：
// styles
import '@/assets/scss/core/reset.scss';
import '@/assets/scss/skin/index.scss';
import router from './router';
2.在覆盖样式的css中增加对应样式的权重
内联样式 > ID选择器 > 类，属性，伪类 选择器 > 元素标签，伪元素 选择器
a.添加important
b.对应的样式添加多一级名字
例如：
库样式：li{background:#fff;background:#1111}
覆盖样式： ul li {xxxxx}
参考链接：https://blog.csdn.net/weixin_42091247/article/details/118400245
7、如何解决element表格顺序错乱？
解决方法：在元素上加key值
参考链接：https://blog.csdn.net/qq_15576765/article/details/84141391
8、如何判断对象是否为{}（空对象，没有属性和属性值）？
方法:
JSON.stringify(data) === '{}'
Object.keys(object).length === 0
参考链接：
https://www.jianshu.com/p/f5bf6fdeaed6
https://element.eleme.cn/#/zh-CN/component/loading
9、如何将后端返回的数据根据内容换行？
解决方法：将返回的数据里的特殊字符替换成换行符"/n",或者使用pre标签
参考链接:
https://blog.csdn.net/m0_37616866/article/details/118857260
https://www.cnblogs.com/linxing/p/11082581.html
10、路由跳转传对象，页面刷新后，对象数据获取错误？
解决办法：
let parObj = JSON.stringify(obj)
// 路由跳转
this.$router.push({
path:'/detail',
query:{
obj:parObj
}
})
// 详情页获取参数
JSON.parse(this.$route.query.obj)
参考链接：https://blog.csdn.net/qq_41877050/article/details/122936868
11、如何使element表单和表格共用校验？
方法一：
<el-form :rules='rules' ...>
<el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules='rules.name'>
data(){
return {
rules: {
name: [
{ required: true, message: '名字不能为空', trigger: 'blur' }
]
}
}
}
方法二：在el-form-item上直接写rule的详细内容
<el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules="{ required: true, message: '名字不能为空', trigger: 'blur' }">
参考链接：https://blog.csdn.net/qq_31126175/article/details/97265338
12、表单验证报Cannot read property ‘validate’ of undefined错误
解决办法：
注意:
1. :model里面的单词,要与ref一样 :rules是验证用的不用改
2. v-model=里面也需要用valForm,比如valForm.name来取值
3. 提交按钮绑定click: <el-button
type="primary" @click="submitEdit('valForm')">确 定</el-button>
注意,不能有空格
参考链接：https://www.jianshu.com/p/2e8ea60d2b6a
13、element 多选框 @change事件怎样保留默认参数？
解决方法：采用es6的箭头函数 (val)=>方法名(val,…)
参考链接：https://blog.csdn.net/skyblue_afan/article/details/117744861
14、如何解决在线pdf下载分辨率大小不同，下载的字体大小不同？
原因：由于px是像素px是相对于显示器屏幕分辨率而言的，所以不同电脑分辨率不同，下载的字体大小也不同。
解决方法：使用rem自适应
参考链接：
https://www.runoob.com/w3cnote/px-em-rem-different.html
https://www.cnblogs.com/wind-lanyan/p/6978084.html
15、路由跳转不执行created、mounted方法？
解决方法：使用actived方法，或者给route-view加key
例：<router-view :key="$route.fullpath"></router-view>
参考链接：
https://www.jianshu.com/p/c0440894c82e
https://blog.csdn.net/muyun666/article/details/108751912
16、echarts 显示报没有这个id
在mounted函数里echarts.init
17、element ui 表格获取当前行数
<template slot-scope="scope">
{{scope.$index+1}}
</template>
18、重复调用echart组件，只有第一个显示 已解决
参考链接：
https://blog.csdn.net/sunlizhen/article/details/110221665
https://www.cnblogs.com/hanhanours/p/11977863.html
19、echarts yAxis的文字不固定大小 已解决
{
type: 'category',
axisTick:{show:false},
axisLine:{show:false},
axisLabel:{
color:"black",
fontSize:14,
textStyle: {
color: '#fff',
}
},
data:yLabel,
max:0.5, // 关键：设置y刻度最大值，相当于设置总体行高
inverse:true
},
{
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
padding:[0,0,0,15],
textStyle: {
color: '#a3a3a3',
fontSize: '14',
},
},
max:0.5,
data: rDataList
}
],
两个max要相同
20、css画圈 里有勾、有叉、有减号 特殊符号：
.incorrect {
width: 20px;
height: 20px;
margin: 2px auto;
border-radius: 50%;
border: 1px solid #960000;
display: flex;
justify-content: center;
align-items: center;
}
.incorrect:before {
content: '\2716';
color: #960000;
}
参考链接：https://www.cnblogs.com/liangxiblog/p/5981180.html
22、nginx解决反向代理超时
参考链接：
https://www.cnblogs.com/shaoniandream/p/10553696.html
https://juejin.cn/post/6844903652964958216 配置详解
23、Vue–判断用户首次进入页面还是刷新页面？
参考链接：https://blog.csdn.net/blue_698/article/details/114987085
24、vue移动端适配项目
参考链接：
https://blog.csdn.net/weixin_43242112/article/details/112193205
https://www.jianshu.com/p/15976cb2d262 碰到的坑
25、webstorm插件 效率提高
简体中文环境翻译 Chinese(Simplified) language Pack EAP
右边代码缩略图 CodeGlance2
代码智能提示插件 Codeta AI Autocomplete Java and JavaScript
快捷键操作提示 KeyPromoter X
nginx支持 nginx Support
彩色括号 Rainbow Brackets
代码翻译 Translation
26、elment日期限制
:picker-options="pickerOptions"
pickerOptions:{
disabledDate(time){
//获取今年第一天
let date = new Date();
let year = date.getFullYear();
let firstMonth = year + '-' + '01' + '-' + '01';
return time.getTime() < new Date(firstMonth) - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
}
},
参考链接：https://blog.csdn.net/qq_33769914/article/details/83856268
其他
1、text-indent 缩进
2、element 多选框实现反选
参考链接：https://blog.csdn.net/qq_35018214/article/details/103429020
3、报错信息
Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if to chain them instead.
解决方法：vue外由一个容器包裹
参考链接：https://www.cnblogs.com/zhixi/p/9639981.html
4、vue的ref
https://www.jianshu.com/p/623c8b009a85
4、父子组件调用方法
https://blog.csdn.net/lypeng_/article/details/98074920
5、vue slot 插槽
https://cn.vuejs.org/v2/guide/components-slots.html
https://www.cnblogs.com/loveyt/p/9946450.html
6、vue.ls
https://www.jianshu.com/p/ab7f67878279
7、mixins 混入
https://v3.cn.vuejs.org/guide/mixins.html#%E5%85%A8%E5%B1%80-mixin
8、ant-design的modal 对话框、标签页、提示
提示 ：https://ant.design/components/notification-cn/#header
9、数组获取div-----this.$refs[idx][0]
10、font-stretch font-stretch 属性可对当前的 font-family 进行伸缩变形。
https://www.w3school.com.cn/cssref/pr_font-stretch.asp
11、v-for 和v-if
https://blog.csdn.net/qq_37024887/article/details/104970950
12、v-if 判断数在一个区间 用&& <= >=
https://blog.csdn.net/m0_37128507/article/details/108737877
2796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
