当前位置：首页 > VUE

vue实现弹出侧边弹窗

2026-01-20 04:25:37VUE

使用 Vue 实现侧边弹窗

基础组件结构

创建一个名为 SideDrawer.vue 的组件，包含模板、样式和逻辑部分。弹窗通过 v-model 控制显隐，支持动画过渡。

<template>
  <transition name="slide">
    <div v-if="modelValue" class="side-drawer">
      <slot></slot>
      <button @click="$emit('update:modelValue', false)">关闭</button>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: white;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%);
}
</style>

在父组件中使用

通过 v-model 绑定状态控制弹窗显示，可自定义内容插槽。

vue实现弹出侧边弹窗

<template>
  <button @click="showDrawer = true">打开侧边弹窗</button>
  <SideDrawer v-model="showDrawer">
    <h2>自定义内容</h2>
    <p>这里可以放置表单、列表或其他内容</p>
  </SideDrawer>
</template>

<script>
import SideDrawer from './SideDrawer.vue'

export default {
  components: { SideDrawer },
  data() {
    return {
      showDrawer: false
    }
  }
}
</script>

进阶功能扩展

动态位置控制
添加 position prop 支持左右侧显示：

vue实现弹出侧边弹窗

<script>
export default {
  props: {
    position: {
      type: String,
      default: 'right',
      validator: val => ['left', 'right'].includes(val)
    }
  },
  computed: {
    drawerStyle() {
      return {
        transform: this.position === 'right' 
          ? 'translateX(100%)' 
          : 'translateX(-100%)'
      }
    }
  }
}
</script>

点击外部关闭
添加指令检测点击外部区域：

directives: {
  clickOutside: {
    mounted(el, { value }) {
      el.clickOutsideEvent = event => {
        if (!(el === event.target || el.contains(event.target))) {
          value()
        }
      }
      document.addEventListener('click', el.clickOutsideEvent)
    },
    unmounted(el) {
      document.removeEventListener('click', el.clickOutsideEvent)
    }
  }
}

无障碍支持
添加 ARIA 属性和焦点管理：

<div 
  v-if="modelValue"
  class="side-drawer"
  role="dialog"
  aria-modal="true"
  :aria-label="ariaLabel"
  tabindex="-1"
  ref="drawer"
  @keydown.esc="$emit('update:modelValue', false)"
>