当前位置：首页 > VUE

vue实现底部弹窗

2026-01-19 14:14:34VUE

实现底部弹窗的基本思路

在Vue中实现底部弹窗，可以通过动态控制组件的显示与隐藏，结合CSS动画或过渡效果实现平滑的弹出和收起效果。核心在于利用Vue的v-if或v-show指令管理弹窗状态，并通过CSS定位将弹窗固定在底部。

基础代码示例

创建一个可复用的底部弹窗组件（如BottomModal.vue）：

vue实现底部弹窗

<template>
  <div class="modal-mask" v-show="visible" @click.self="close">
    <div class="modal-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.modal-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 70vh;
  padding: 20px;
  background: white;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>

使用弹窗组件

在父组件中引入并使用该弹窗：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <BottomModal :visible.sync="showModal">
      <h3>弹窗内容</h3>
      <p>这里是自定义内容区域</p>
    </BottomModal>
  </div>
</template>

<script>
import BottomModal from './BottomModal.vue';

export default {
  components: { BottomModal },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

进阶优化方向

手势支持
添加@touchstart、@touchmove和@touchend事件实现下滑关闭手势，需计算滑动距离阈值。

vue实现底部弹窗

过渡动画
使用Vue的<transition>组件替代原生CSS动画，实现更灵活的过渡效果：

<transition name="slide-up">
  <div class="modal-container" v-show="visible">...</div>
</transition>

<style>
.slide-up-enter-active, .slide-up-leave-active {
  transition: transform 0.3s ease;
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
}
</style>

滚动锁定
弹窗显示时禁止背景页面滚动，可通过document.body.style.overflow = 'hidden'实现，注意在组件销毁时恢复。