七, Vueの开发Steampy市场项目总结

在做Steampy市场项目，重新对简单易忘的知识总结下，笔记方便查询，以后快速使用

1. css相关, 如何设置行内元素宽度满屏,左右间距固定长度,

<div style="width:100%;padding-left:20px;padding-right:20px;">
    <Input v-model="inputContent.player" placeholder="请输入账号."
            style="width: 100%;"/>
</div>

     2.  布局div固定屏幕底端

<div style="position: fixed;bottom: 0">
                <p >欢迎交流 官方QQ群</p>
                <p >318212115</p>
</div>

    3. 解决第三方UI框架vant,iview等组件使用中，更改组件默认样式，在vue页面中，

     在style 中去除scoped,然后在下方直接添加要更改的对应组件样式即可.  如果不去除scoped，样式会不生效的. （如果不想去除scoped,可以参看第四个问题，如下）

<style>  <!-- scoped -->
    @import 'layout.css';
    .ivu-modal {
        width: auto !important;
        margin: 10px !important;
    }
</style>

 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 文本内容过长，换行操作

<!-- 注意 Tooltip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 white-space: normal; -->
<Tooltip :disabled="!msg">
    <div slot="content" style="white-space:normal">{{msg}}</div>
    <Input v-model="msg" />
</Tooltip>

8. span标签里的内容过长设置自动换行

<div class="tc w15">
      <span class="f14 createTime">{{item.createTime}}</span>
</div>

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 class="div-img">

  

 解决办法：最终发现是img使用background:url属性的问题。于是将img改为div解决问题  <div class="div-img">

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 v-model="loadingHot"
          :finished="finishedHot"
          finished-text="没有更多了"
          @load="onLoadHot">

开始使用这个van-list 在别的页面使用正常触发，onLoad事件，但是当前页面不可以，检查原因，在跟布局上加了

 overflow-x: hidden;

这个用来是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话.  加入之后就导致无限加载事件，去除就正常了.

对于无限加载问题，只要对比不同页面，发现一般都是布局问题导致的。

13. iView Page分页在选择每页条数 ，下拉框位置异常的情况

解决：每页条数的时候，发现下拉列表跑到了table列表的上面，在page组件里加上

transfer="true" ，配置则显示正常