[vue] -- 使用自定义指令解决部分ios系统无法直接使用overflow：hidden解决弹出弹窗遮罩时滚动穿透的问题

dialog滚动条滑动当前页面影响到底层页面的滑动，网上的解决思路大多是，添加overflow：hidden。但是无论怎么修改，都无法适配。怀疑人生。

后来换了一种思路，发现部分ios系统不适用于此方案。

于是通过全局自定义指令v-fixed，来解决这个问题。

即：使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性

import Vue from 'vue'

Vue.directive('fixed', {
    inserted() {
        //遮罩出现不可以滚动
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
    },
    // unbind 指令与元素解绑时调用 去除遮罩恢复滚动
    unbind() {
        let body = document.body
        body.style.position = ''
        let top = body.style.top
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
        body.style.top = ''
    }

})