uniappでポップアップレイヤーコンポーネントを使用する方法

<template>
  <view>
    <uni-popup :show="isShowPopup" position="bottom">
      <!-- 弹出层内容 -->
    </uni-popup>
  </view>
</template>

<script>
  import uniPopup from '@/components/uni-popup/uni-popup.vue';

  export default {
    components: {
      uniPopup
    },
    data() {
      return {
        isShowPopup: false
      };
    }
  };
</script>

<template>
  <view>
    <!-- 按钮 -->
    <button @click="showCustomPopup">点击弹出自定义弹出层</button>

    <!-- 自定义弹出层组件 -->
    <custom-popup :show="isShowCustomPopup" @close="closeCustomPopup">
      <!-- 弹出层内容 -->
    </custom-popup>
  </view>
</template>

<script>
  import customPopup from '@/components/custom-popup.vue';

  export default {
    components: {
      customPopup
    },
    data() {
      return {
        isShowCustomPopup: false
      };
    },
    methods: {
      showCustomPopup() {
        this.isShowCustomPopup = true;
      },
      closeCustomPopup() {
        this.isShowCustomPopup = false;
      }
    }
  };
</script>

<template>
  <view v-show="show">
    <view class="popup-bg" @click.stop="close"></view>
    <view class="popup-content">
      <!-- 弹出层内容 -->
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close() {
        this.$emit('close');
      }
    }
  };
</script>

<style>
  /* 弹出层样式 */
  .popup-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
</style>