vue疑难杂症

1.vue实现一个移动端屏蔽滑动的遮罩层
元素代码

 <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>
    @touchmove.prevent  //防止移动端触摸冒泡

阻止时间冒泡

@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'
    },