vue遇到的问题总结

1、使用iview框架时，修改框架自带的样式时，不起作用解决办法：

      1)使用::v-deep 后跟框架中自带的类名，层级嵌套不起作用的时候，可以用链式的形式自定义样式。

        ::v-deep .ivu-modal{ // 设置自己需要的样式 }

     2)直接使用/deep/ 形式修改      /deep/ .ivu-modal{ // 自定义样式 }

     3) 使用<<<形式修改  <<< .ivu-modal{ // 自定义样式 }

2、css问题：使用一张大图片作为背景图时，不同的电脑分辨率不同，也就出现了图片拉伸变形问题。

解决方法：

给整个大的div设置背景图，设置完background:center之后 不用设置background-size:100%了

.box{

        width:100%;

        height:图片的实际高度;

        background:url('图片路径') no-repeat center;

}

3、使用echarts中的地图，不显示深圳市时，下载一个全的城市js 引入进去就显示了。

        获取echarts定义的类名时，加一个属性，不然会报错。

        myChartContainer.setAttribute("_echarts_instance_", "");

4、tab切换时，默认第一个子页面是要实时更新接口的，1分钟调用一次，使用setInterVal()，但是切换到下一个子页面，定时器并没有清除。所以就在第一个子页面中使用beforeRouteLeave清除。

beforeRouteLeave（）{

        clearInterval(timer)

}

vue的beforeRouteEnter和beforeRouteLeave都要写在配置了路由的界面中才能触发，写在界面所调用的组件内部无法触发。

5、使用sort排序会改变原始数组的解决方法：

 1） 可以使用JSON.stringify(JSON.parse())实现深拷贝。最好的方式

 2)   重新定义一个变量进行赋值
        var numbers = [4, 2, 5, 1, 3]

        var numbers2 = []

        for(var i=0;i<numbers.length;i++){

                numbers2[i] = numbers[i]

        }

        numbers.sort(function(a, b) { return a - b; });

        console.log(numbers,numbers2);

6、css 整个页面使用一张大背景图时，用分辨率比较大的屏幕最下面会有留白部分，又不想在全局设置html,body的样式，解决办法：

最下方可以设置一个小图片进行平铺的方式解决，或者可以直接用一种纯背景色，根据需要添加。

在使用大背景图的页面中，初始化页面之后使用：

 document.getElementsByTagName("body")[0].style.background ="url(" +require("图片路径") + ")";

 document.getElementsByTagName("body")[0].style.backgroundRepeat = "repeat";

7、css ie浏览器下列表内容超出设置高度，隐藏滚动条显示：

      -ms-overflow-style:none;

      实现列表无限滚动时，禁止鼠标在上面滑动：

      pointer-events: none;

     实现标题一行展示不换行，超出显示省略号：

        overflow:hidden;   

        white-space:nowap; 

        text-overflow:ellipsis;

        word-break: break-all;

      多行超长省略号：

        display:-webkit-box;

        -webkit-box-orient:vertical;

        -webkit-line-clamp:2;

         overflow:hidden;

         word-break:break-all;