七, Vueの开发Steampy市场项目总结
在做Steampy市场项目，重新对简单易忘的知识总结下，笔记方便查询，以后快速使用
- css相关, 如何设置行内元素宽度满屏,左右间距固定长度,
2. 布局div固定屏幕底端
欢迎交流 官方QQ群
318212115
3. 解决第三方UI框架vant,iview等组件使用中，更改组件默认样式，在vue页面中，
在style 中去除scoped,然后在下方直接添加要更改的对应组件样式即可. 如果不去除scoped，样式会不生效的. （如果不想去除scoped,可以参看第四个问题，如下）
4. 解决第三方UI框架vant, iview等组件修改的样式无效问题，使用scoped
在vue中，常规写style都会加上scoped，以避免全局污染，但是加上了scoped会导致无法修改 vant UI框架组件本身的样式
但是scoped是不能放弃的
解决： 使用了Less或Sass等预处理器，使用组合/deep/或::v-deep组合
.van-collapse {
/deep/ .van-cell {
color: red;
font-size: 10px;
}
}5. 判断当前使用的浏览器，打印浏览器信息
参考地址: https://github.com/mumuy/browser
var info = new Browser();
info.browser=="Chrome" //打印浏览器名称
6. 登录重定向失败，报错VUE-ROUTER.ESM.JS?8C4F:2089 UNCAUGHT (IN PROMISE) UNDEFINED
路由没跳转，而报错了vue-router.esm.js?8c4f:2089 Uncaught (in promise) undefined
原因：在当前页面延时获取状态，setTimerOut中使用路由跳转，这是一个异步操作，正在进行异步操作的时候就进行重定向就会报这个错
解决：该方法可以采用异步处理，加上 async
async goToMain() {
this.$router.push("/mlayout")
},7. iView中使用Tooltip 文本内容过长，换行操作
{{msg}}
8. span标签里的内容过长设置自动换行
{{item.createTime}}
css样式
.createTime{
display: inline-block;
line-height: 15px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
vertical-align: middle;
}
注意：在div高度一定时候，line-height: 15px;需要加入控制每行显示高度，否则显示异样9. vue使用rem自适应布局
* 首先创建一个 rem.js, 放在src 某个目录下.
! function(n) {
var e = n.document,
t = e.documentElement,
i = 1920,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 1300;
n > 1920 && (n = 1920);
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);这里针对的PC端，分辨率1920，可以根据个人分辨率自己去设置更改上面代码.
* 在main.js 中引入rem.js
/*引入PC端rem适配*/
import './libs/rem.js'
//我这里路径放在src/lib/目录下* 最后在布局中直接使用了
.load-head-three{
margin-top: 0.6rem;
width: 7.24rem;
height: 4.15rem;
}
提示: rem.js 中定义的根据1920分辨率，因此100px=1rem 来计算，以上 margin-top: 0.6rem => margin-top:60px,
width: 7.24rem=> width:724px,
如果想使用postcss-pxtorem和amfe-flexible实现Steampy市场移动端适配，可以参看 九这篇文章讲解的有.
10. 解决img图片背景图采用background:url 带有边框问题
使用background: url设置背景图时有边框；代码中没设置border，
![]()
解决办法：最终发现是img使用background:url属性的问题。于是将img改为div解决问题
11. axios 网络请求 ，响应拦截器异常处理情况
// http response 拦截器
axios.interceptors.response.use(response => {
const data = response.data;
// 根据返回的code值来做不同的处理(和后端约定)
switch (data.code) {
case 401:
break;
case 403:
break;
case 500:
break;
default:
return data;
}
return data;
}, (err) => {
console.log(err.toString())
//============== 错误处理 ====================
if (err && err.response) {
switch (err.response.status) {
case 400: err.message = '请求错误(400)'; break;
case 401: err.message = '未授权，请重新登录(401)'; break;
case 403: err.message = '拒绝访问(403)'; break;
case 404: err.message = '请求出错(404)'; break;
case 408: err.message = '请求超时(408)'; break;
case 500: err.message = '服务器错误(500)'; break;
case 501: err.message = '服务未实现(501)'; break;
case 502: err.message = `服务器临时维护中,请耐心等待几分钟,⊙﹏⊙∥(${err.response.status})`; break;
case 503: err.message = '服务不可用(503)'; break;
case 504: err.message = '网络超时(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `服务器连接失败,尝试刷新网页，(${err.response.status})!`;
}
} else {
err.message = '服务器连接失败,尝试刷新网页,遇到订单紧急问题请咨询群管理员!'
}
Message.error( {message: err.message } )
return Promise.resolve(err);
});注意：err中异常处理是服务器端返回状态值,可以统一处理。
12. vant手机端使用 van-list 上拉加载，@load="onLoadHot" 无限触发加载事件，请求网络异常处理
开始使用这个van-list 在别的页面使用正常触发，onLoad事件，但是当前页面不可以，检查原因，在跟布局上加了
overflow-x: hidden;这个用来是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话. 加入之后就导致无限加载事件，去除就正常了.
对于无限加载问题，只要对比不同页面，发现一般都是布局问题导致的。
13. iView Page分页在选择每页条数 ，下拉框位置异常的情况
解决：每页条数的时候，发现下拉列表跑到了table列表的上面，在page组件里加上
transfer="true" ，配置则显示正常