在做Steampy市场项目,重新对简单易忘的知识总结下,笔记方便查询,以后快速使用
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" ,配置则显示正常