封装一个van-popup 组件 并使用它填写不容的内容

好的，以下是一个简单的van-popup组件的封装示例：

<template>
  <van-popup v-model="showPopup">
    <div class="popup-content">
      <h2>{{ title }}</h2>
      <p>{{ message }}</p>
      <van-button @click="closePopup">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Popup, Button } from 'vant';

export default {
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button,
  },
  props: {
    title: String,
    message: String,
  },
  data() {
    return {
      showPopup: false,
    };
  },
  methods: {
    closePopup() {
      this.showPopup = false;
    },
  },
};
</script>

在这个示例中，我们使用Vanilla UI框架中的Popup和Button组件，以及props和data来控制组件的显示和隐藏。

接下来，我们可以使用这个组件来填写不同的内容：

<template>
  <div>
    <van-button @click="showPopup('提示', '请填写您的姓名')">填写姓名</van-button>
    <van-button @click="showPopup('提示', '请填写您的地址')">填写地址</van-button>
  </div>
  <MyPopup ref="popup"></MyPopup>
</template>

<script>
import MyPopup from './MyPopup.vue';

export default {
  components: {
    MyPopup,
  },
  methods: {
    showPopup(title, message) {
      this.$refs.popup.$emit('show', { title, message });
    },
  },
};
</script>

在这个示例中，我们使用了一个包含两个van-button按钮的div，每个按钮都会调用showPopup方法，并传入不同的标题和消息。我们还通过使用`ref`引用MyPopup组件，并通过`$refs`访问它。

最后，我们需要在MyPopup组件中添加一个监听器，以便在父组件中显示它：

<template>
  <van-popup v-model="showPopup">
    <div class="popup-content">
      <h2>{{ title }}</h2>
      <p>{{ message }}</p>
      <van-button @click="closePopup">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import { Popup, Button } from 'vant';

export default {
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button,
  },
  data() {
    return {
      showPopup: false,
      title: '',
      message: '',
    };
  },
  created() {
    this.$on('show', ({ title, message }) => {
      this.title = title;
      this.message = message;
      this.showPopup = true;
    });
  },
  methods: {
    closePopup() {
      this.showPopup = false;
    },
  },
};
</script>

在这个示例中，我们使用了一个`created`钩子来监听`show`事件，并在事件发生时更新标题、消息和显示状态。

现在，我们就可以使用这个组件来填写不同的内容了！