vue 弹窗实现滚动条

在 Vue 中实现弹窗中的滚动条，可以使用第三方插件如 element-ui 或者自行编写样式实现。

使用 element-ui：

1. 在组件中引入 element-ui：

import { Dialog } from 'element-ui';

2. 在弹窗组件中添加 `v-dialog` 指令，并设置 `max-height` 和 `overflow-y` 样式：

<el-dialog v-dialog="{ top: '10vh' }" title="弹窗标题" :visible.sync="dialogVisible">
  <div style="max-height: 400px; overflow-y: auto;">
    // 弹窗内容
  </div>
</el-dialog>

使用自定义样式：

1. 在弹窗组件中添加滚动条样式：

<style>
  .dialog-content {
    max-height: 400px;
    overflow-y: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ccc;
  }
</style>

2. 在弹窗组件中添加滚动条样式类名：

<template>
  <div class="dialog-wrapper">
    <div class="dialog-content scrollbar">
      // 弹窗内容
    </div>
  </div>
</template>