vue实现内容可滚动的弹窗效果

下面是针对“Vue实现内容可滚动的弹窗效果”的完整攻略。

1. 弹窗样式

首先，我们需要用HTML、CSS实现出弹窗的样式，示例代码如下：

<div class="modal">
  <div class="modal__body">
    <div class="modal__header">
      <h2 class="modal__title">弹窗标题</h2>
      <button class="modal__close-btn">×</button>
    </div>
    <div class="modal__content">
      <p>弹窗内容</p>
    </div>
  </div>
</div>

.modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__body {
  position: relative;
  width: 80%;
  max-height: 80%;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.modal__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.modal__close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  font-size: 24px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.modal__content {
  padding: 20px;
}

在这段代码中，我们定义了一个 modal 类，用于覆盖整个屏幕，并设置了半透明的黑色背景。然后在其中定义了一个 modal__body 类，用来包含弹窗内容并在其中设置了最大高度为80%，当内容超过该高度时会出现纵向滚动条。

2. 弹窗组件

接下来，我们需要将弹窗作为一个Vue组件来实现。示例代码如下：

<template>
  <div class="modal" v-show="visible">
    <div class="modal__body">
      <div class="modal__header">
        <h2 class="modal__title">{{ title }}</h2>
        <button class="modal__close-btn" @click="close">×</button>
      </div>
      <div class="modal__content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    title: {
      type: String,
      default: '弹窗标题'
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
      document.body.style.overflow = 'hidden'
    },
    close() {
      this.visible = false
      document.body.style.overflow = 'auto'
    }
  },
  mounted() {
    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 27 && this.visible) {
        this.visible = false
        document.body.style.overflow = 'auto'
      }
    })
  },
  destroyed() {
    document.body.style.overflow = 'auto'
  }
}
</script>

<style>
/* 同上 */
</style>

在这个组件中，我们使用了Vue的插槽功能来动态渲染弹窗内容，在 props 中定义了一个 title 属性，并在组件的 data 属性中定义了一个 visible 属性来控制弹窗的显示和隐藏。在 mounted 钩子函数中监听 keydown 事件，用于在按下ESC键时关闭弹窗。

3. 引入外部组件

当然，我们也可以通过引入第三方组件来实现内容可滚动的弹窗。以 vue-js-modal 为例，我们可以这样使用它：

<template>
  <div>
    <button @click="showModal">弹出窗口</button>
    <modal name="my-modal" height="80%">
      <h2>弹窗标题</h2>
      <div>弹窗内容</div>
    </modal>
  </div>
</template>

<script>
import VModal from 'vue-js-modal'

export default {
  name: 'MyComponent',
  methods: {
    showModal() {
      this.$modal.show('my-modal')
    }
  },
  components: {
    Modal: VModal
  }
}
</script>

在这个代码片段中，我们使用了 vue-js-modal 提供的 Modal 组件，并通过 height 属性设置了弹窗的最大高度为80%。我们可以像使用其他组件一样使用它，并在需要时调用 $modal.show 方法弹出窗口。

以上就是关于Vue实现内容可滚动的弹窗效果的完整攻略，希望能对您有所帮助！