vue疑难杂症

1.vue实现一个移动端屏蔽滑动的遮罩层
元素代码
@touchmove.prevent 防止移动端触摸冒泡

 <div class="overlayer" @touchmove.prevent ></div>

遮罩层

/*遮罩层*/
.overlayer{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:10;
}

这样遮罩层的滑动就不会影响到外面元素的内容滑动了

PC端方案
这种屏蔽方式只是屏蔽了滑动，对于PC端的鼠标滚轮是无效的，但屏蔽鼠标滚轮也很简单，把 touchmove 事件处理器改成 scroll 事件的处理器就好了~就像这样：

 <div class="overlayer" @scroll.prevent >
    </div>

阻止时间冒泡

@click.stop

2.修改body背景颜色

        // 实例创建之前
      beforeCreate(){
          //设置背景颜色
          document.querySelector('body').setAttribute('style','background: #ffffff');
      }

解决VUE路由跳转到第二页位置不在顶部问题

在这里插入图片描述

scrollBehavior (to, from, savedPosition) { //路由跳转第二页，位置在头部
            return { x: 0, y: 0 }
    }

解决data访问静态资源显示问题，如过是普通组件 加上一个require就能动态显示了

在这里插入图片描述
Vue 移动端跳到手机拨打电话界面的几种方法

第一种

<a :href="'tel:' + 110">联系商家</a>

第二种 但似乎没效果

<a @click="callPhone">联系商家</a>
 
callPhone(){
      window.location.href = 'tel://110'
    },