vue 全局设置隐藏滚动条::-webkit-scrollbar { display: block !important; }，但在某个分页中需要显示滚动条

在Vue.js中，如果你想全局隐藏滚动条，并在特定场景如分页组件中恢复滚动条，可以结合JavaScript和CSS来实现。使用`:style`指令可以在运行时动态改变元素的样式。下面是一个示例：

首先，在全局的CSS中隐藏滚动条：

/* global.css or app.scss */
body {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
  overflow-y: hidden; /* 隐藏默认滚动条 */
}

/* 或者针对Webkit浏览器 */
body::-webkit-scrollbar {
  display: none !important;
}

然后，在分页组件中，我们可以创建一个`showScrollbar`方法来切换滚动条的显示：

<template>
  <div :style="{ scrollbarVisible: showScrollbar }" ref="scrollContainer">
    <!-- 分页内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showScrollbar: false, // 初始状态为隐藏滚动条
    };
  },
  methods: {
    toggleScrollbar() {
      this.showScrollbar = !this.showScrollbar;
    }
  },
  // 其他方法...
};
</script>

<!-- 可能的按钮触发事件 -->
<button @click="toggleScrollbar">显示滚动条</button>

现在点击按钮时，滚动条会显示出来。为了在离开分页时再次隐藏滚动条，你可能还需要在`beforeDestroy`或`unmount`生命周期钩子中清除这个样式。