vue 实现弹出列表

Vue 实现弹出列表的方法

使用 v-show 或 v-if 控制显示

通过绑定一个布尔值变量来控制列表的显示与隐藏。点击按钮时切换该变量的值。

<template>
  <div>
    <button @click="showList = !showList">Toggle List</button>
    <ul v-show="showList">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

使用过渡动画增强体验

为列表添加过渡效果，使弹出更加平滑。

<template>
  <div>
    <button @click="showList = !showList">Toggle List</button>
    <transition name="fade">
      <ul v-show="showList">
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

结合第三方组件库

使用如 Element UI 或 Vuetify 等 UI 框架提供的现成组件。

<template>
  <div>
    <el-button @click="visible = true">Show List</el-button>
    <el-dialog :visible.sync="visible" title="Item List">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import { ElButton, ElDialog } from 'element-plus'

export default {
  components: {
    ElButton,
    ElDialog
  },
  data() {
    return {
      visible: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

实现点击外部关闭功能

通过监听文档点击事件来判断是否点击了列表外部区域。

<template>
  <div>
    <button @click="toggleList">Toggle List</button>
    <div v-show="showList" ref="list" class="list-container">
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    toggleList() {
      this.showList = !this.showList
      if (this.showList) {
        document.addEventListener('click', this.handleClickOutside)
      } else {
        document.removeEventListener('click', this.handleClickOutside)
      }
    },
    handleClickOutside(event) {
      if (this.$refs.list && !this.$refs.list.contains(event.target)) {
        this.showList = false
        document.removeEventListener('click', this.handleClickOutside)
      }
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside)
  }
}
</script>

使用 Vue Teleport 实现模态框

对于需要覆盖全屏的弹出列表，可以使用 <teleport> 将其渲染到 body 元素。

<template>
  <div>
    <button @click="showList = true">Show Modal List</button>
    <teleport to="body">
      <div v-show="showList" class="modal">
        <div class="modal-content">
          <button @click="showList = false">Close</button>
          <ul>
            <li v-for="item in items" :key="item.id">{{ item.name }}</li>
          </ul>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>