vant popup 规格 写一个代码

vant组件库中的popup组件是一个轻量级的弹出框，用于显示简单的通知、确认框等。它提供了一种方便的方式来管理和展示临时的信息或者操作请求。Vant Popup的基本规格包括标题、内容、按钮配置以及是否支持动画。

下面是一个简单的Van popup的Vue示例代码：

<template>
  <van-popup v-model="showPopup" position="bottom">
    <div slot="title">提示信息</div>
    <div slot="content">这是一个弹出框的内容，可以是文本或自定义元素。</div>
    <van-button @click="handleCancel">取消</van-button>
    <van-button type="primary" @click="handleConfirm">确定</van-button>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    handleConfirm() {
      // 确定按钮点击事件，这里只是一个例子，实际应用中你可以添加相应逻辑
      this.showPopup = false; // 关闭弹出框
    },
    handleCancel() {
      // 取消按钮点击事件，类似地，你可以在这里处理相关操作
      this.showPopup = false;
    },
  },
};
</script>

在这个例子中，`v-model`绑定到`showPopup`数据属性控制popup的显示与隐藏，`position`属性设置了弹出框的位置。当用户点击“确定”或“取消”按钮时，相应的事件处理器`handleConfirm`和`handleCancel`会被触发。