Vue弹窗后怎么禁止滚动条滚动?

    在Vue里点击打开弹窗后，默认页面的滚动条还是存在的，Vue弹窗后怎么禁止滚动条滚动?其实就控制body的css样式属性overflow:hidden有无。下面例子在methods里定义了stop和move两个函数，前者禁止禁止滚动条滚动，后者恢复滚动条滚动。

1.打开页面时有滚动条可以滚动，看下图：

2.有弹窗后禁止滚动条滚动，看下图：

3.关闭弹窗后有滚动条恢复滚动，看下图：

点击看效果

4.Vue弹窗后禁止滚动条滚动完整代码如下：

* {
margin: 0;
padding: 0;
}
body {
height: 1500px;
margin: 100px;
background: #CCCCCC;
}
.box {
width: 700px;
height: 700px;
padding: 24px 20px 18px 20px;
background: #ffffff;
color: #333333;
border-radius: 12px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.close {
position: absolute;
top: 10px;
right: 20px;
font-size: 20px;
cursor: pointer;
}



点击我展现弹窗