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>点击弹出自定义弹出层</button>    <!-- 自定义弹出层组件 -->    <custom-popup :show="isShowCustomPopup"><!-- 弹出层内容 --></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"></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>