【前端】vue遇到的坑

1、在引入vue组件时，报错 "This dependency was not found”的错。

答：在import 时  路径应该前面加 "./"  否则无法找到该组件。

 

2、在父页面引入子组件时，子组件修改以后，想要重新刷新（vue组件实现局部刷新）。

答：在引入子组件时，增加v-if属性，通过控制v-if的值，控制刷新。（v-if的值改变时，该组件会重新加载刷新）

实现方法如下：

a. 在引入的组件时增加 属性   v-if="isAlive"，默认data值为true。

b.在父组件新增method为reload，并注册该方法。

reload(){
    this.isAlive = false
    this.$nextTick(function() {
        this.isAlive = true
    })
}

provide() { // 注册方法
      return {
          reload: this.reload
      }
  }

c.在子组件内引入该方法。在合适的地方调用该方法即可。

 

inject: ['reload'], // 引入方法

this.reload  //调用方法

 

3、vue引入echarts的时候，resize方法失效。

解决方法：（参考网上资料，亲测有效）

当一个页面有两个echarts图形，想要页面大小发生改变，重新绘制图形如果还写为

                  myChart.setOption(option); 
                window.onresize = myChart.resize; 
则只有一个图形可自适应窗口大小，另外一个则不能随窗口大小而改变图形大小，

解决办法为在每一个echarts图形页面将上面代码改为如下代码：

                myChart.setOption(option);

                window.addEventListener("resize",function(){

                        myChart.resize();

                });

4、vue项目中实现当字段长度过长时隐藏多余字段并用省略号显示，同时增加title属性（在字段长度正常时，不出现title属性）。基本上实现 element-UI的 show-overflow-tooltip 属性的功能。

   解决方案：首先在该字段增加css属性：

 overflow: hidden;   // 多余部分隐藏
 text-overflow: ellipsis;   //超过长度之后显示省略号
 white-space: nowrap;     // 禁止换行

   其次获取该元素dom位置，判断  offsetWidth 和 scrollWidth 是否一样，若相同，则长度没有超出，否则，则长度超出，给该元素增加 title 属性。

   docment.getElementById("abcd").setAttribute("title","完整文字")

 

5、vue引入百度地图的实现

解决方案：

   首先 使用npm按照百度map  按照命令如下：  

     npm install vue-baidu-map --save   

   然后在main.js 使用引入百度地图  

 import BMap from 'vue-baidu-map'
 Vue.use(BMap,{
  ak:"你的ak"
 })

    最后在组件中直接调用    

 // 创建地图实例

this.map = new BMap.Map('map', {

  minZoom: 11,

  maxZoom: 17

})

6、vue