vue解决pc移动滚动穿透问题

上层无滚动（很简单直接@touchmove.prevent）

<div @touchmove.prevent>
我是里面的内容
</div>

 上层有滚动

如果上层需要滚动的话，那么固定的时候先获取 body 的滑动距离，然后用 fixed 固定，用 top 模拟滚动距离；不固定的时候用获取 top 的值，然后让 body 滚动到之前的地方即可。示例如下：

    watch:{
        statusShow(val){
            if(val) {
                this.lockBody();
            } else {
                this.resetBody();
            }
        },
        calendarShow(val){
            if(val) {
                this.lockBody();
            } else {
                this.resetBody();
            }
        }
    },

    methods: {
        lockBody() {
            const { body } = document;
            const scrollTop = document.body.scrollTop ||                                 
            document.documentElement.scrollTop;
            body.style.position = 'fixed';
            body.style.width = '100%';
            body.style.top = `-${scrollTop}px`;
        },
        resetBody() {
            const { body } = document;
            const { top } = body.style;
            body.style.position = '';
            body.style.width = '';
            body.style.top = '';
            document.body.scrollTop = -parseInt(top, 10);
            document.documentElement.scrollTop = -parseInt(top, 10);
        },
}

body是DOM对象里的body子节点，即 标签；
documentElement 是整个节点树的根节点root，即 标签；
不同浏览器中，有的能识别document.body.scrollTop，有的能识别document.documentElement.scrollTop，有兼容性问题需要解决。