Vant Popup 弹出层：从底部/中心弹出的万能容器

Popup 是什么

van-popup 是 Vant 中最 通用 的弹出容器——几乎所有需要弹出层的场景都用它：

• 底部弹出：购物车、筛选面板、分享菜单
• 中间弹出：Dialog 弹窗、扫码结果
• 顶部/侧边弹出：消息抽屉、侧边栏菜单

基础用法

<template>
  <van-button type="primary" @click="showCenter = true">中间弹出</van-button>
  <van-button type="primary" @click="showBottom = true">底部弹出</van-button>

  <van-popup v-model:show="showCenter" position="center" round :style="{ padding: '30px' }">
    这是中间弹出的内容
  </van-popup>

  <van-popup v-model:show="showBottom" position="bottom" round style="height: 60%">
    底部弹出内容...
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
const showCenter = ref(false);
const showBottom = ref(false);
</script>

四种 position

<van-popup position="top" />     // 顶部
<van-popup position="bottom" />  // 底部（最常用）
<van-popup position="left" />    // 左侧
<van-popup position="right" />   // 右侧
<van-popup position="center" />  // 中间

底部弹出的标准模板

<template>
  <van-popup v-model:show="visible" position="bottom" round :style="{ height: height }">
    <div class="popup-header">
      <van-button size="small" text @click="onCancel">取消</van-button>
      <strong class="popup-title">{{ title }}</strong>
      <van-button size="small" text type="primary" @click="onConfirm">确定</van-button>
    </div>
    <div class="popup-body">
      <slot />
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  show: Boolean,
  title: { type: String, default: "" },
  height: { type: String, default: "50%" },
});
const emit = defineEmits(["update:show", "confirm", "cancel"]);

const visible = ref(false);
watch(() => props.show, (v) => (visible.value = v));
watch(visible, (v) => emit("update:show", v));

const onCancel = () => { emit("cancel"); visible.value = false; };
const onConfirm = () => { emit("confirm"); visible.value = false; };
</script>

<style scoped>
.popup-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid #ebedf0;
}
.popup-body { padding: 16px; overflow: auto; }
.popup-title { font-size: 16px; }
</style>

配合 Picker / ActionSheet 使用

// ActionSheet 底部弹出
import { showActionSheet } from "vant";

const onShare = () => {
  showActionSheet({
    actions: [
      { name: "微信", icon: "chat-o" },
      { name: "朋友圈", icon: "friends-o" },
      { name: "复制链接", icon: "description" },
    ],
    cancelText: "取消",
  }).then((action) => {
    console.log("选择了", action.name);
  });
};

// DatetimePicker 日期选择弹出
const showDatePicker = ref(false);
const currentDate = new Date();

// 模板中：
// <van-popup v-model:show="showDatePicker" position="bottom" round>
//   <van-datetime-picker v-model="currentDate" type="date" title="选择日期" />
// </van-popup>

关键属性