封装一个包含van-popup van-dropdown-menu 并且可以写入其他内容的组件 并在其他页面引入使用

首先，你需要安装 Vue.js 和 Vant UI 组件库。然后，你可以创建一个名为 CustomContent 的组件，并在其中引入 van-popup 和 van-dropdown-menu 组件。

<template>
  <div>
    <van-popup v-model="showPopup" position="bottom">
      <van-dropdown-menu>
        <van-dropdown-item v-for="(item, index) in menuItems" :key="index" @click="handleClick(item)">
          {{ item }}
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-popup>
    <div v-html="content"></div>
  </div>
</template>

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

export default {
  name: 'CustomContent',
  components: {
    VanPopup,
    VanDropdownMenu,
    VanDropdownItem
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPopup: false,
      menuItems: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    handleClick(item) {
      console.log(item);
      this.showPopup = false;
    }
  }
};
</script>

在其他页面中，你可以像下面这样使用 CustomContent 组件，并传入需要展示的内容作为 prop。

<template>
  <div>
    <custom-content :content="customContent"></custom-content>
  </div>
</template>

<script>
import CustomContent from '@/components/CustomContent.vue';

export default {
  name: 'OtherPage',
  components: {
    CustomContent
  },
  data() {
    return {
      customContent: '<p>This is custom content.</p>'
    };
  }
};
</script>

这样，你就可以在其他页面中使用自定义的组件，并且在组件中展示 van-popup 和 van-dropdown-menu 组件了。同时，你也可以在组件中展示其他内容，不仅限于传入的 prop 内容。