vant-popup弹出层用法

Vant是一个基于Vue.js的移动端组件库，其中包含了Popup弹出层组件。使用Vant的Popup弹出层组件可以方便地实现弹出层的功能，具体用法如下：
1. 引入Vant组件库和样式文件。
2. 在需要使用弹出层的地方添加Popup组件，并设置相应的属性，如position、show、close-on-click-overlay等。
3. 在Popup组件中添加需要显示的内容。
4. 在Vue实例中添加相应的方法，用于控制弹出层的显示和隐藏。
下面是一个简单的例子：

<template>
  <div>
    <van-button @click="showPopup">显示弹出层</van-button>
    <van-popup v-model="show" position="center" :close-on-click-overlay="false">
      <div>这是弹出层的内容</div>
      <van-button @click="hidePopup">关闭弹出层</van-button>
    </van-popup>
  </div>
</template>

<script>
import { VanPopup, VanButton } from 'vant';

export default {
  components: {
    VanPopup,
    VanButton,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    hidePopup() {
      this.show = false;
    },
  },
};
</script>