uniapp 中 uni-popup 如何使用

uni-popup 是 uni-app 中的弹窗组件，可以用来展示一些提示信息或作为选择器等功能的弹窗。下面是 uni-popup 的使用方法：

1. 引入组件：在需要使用的页面中，引入 uni-popup 组件。

<template>
  <view>
    <uni-popup></uni-popup>
  </view>
</template>

<script>
  import uniPopup from '@/components/uni-popup/uni-popup.vue'
  export default {
    components: {
      uniPopup
    }
  }
</script>

2. 基本使用：在页面中使用 uni-popup 组件时，需要传递一些参数，如弹窗内容、弹窗位置、是否显示遮罩等。

<template>
  <view>
    <uni-popup 
      :show="showPopup" 
      :position="position" 
      :mask="mask"
      @change="popupChange"
    >
      <view>这是弹窗的内容</view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showPopup: false, // 是否显示弹窗
        position: 'bottom', // 弹窗位置，可选值为 top、bottom、center
        mask: true // 是否显示遮罩
      }
    },
    methods: {
      // 弹窗状态改变时触发
      popupChange(e) {
        console.log(e)
      }
    }
  }
</script>

3. 高级使用：可以通过 slot 传递自定义的弹窗内容，并在弹窗状态改变时触发相应的事件。

<template>
  <view>
    <uni-popup 
      :show="showPopup" 
      :position="position" 
      :mask="mask"
      @change="popupChange"
    >
      <view slot="content">这是自定义的弹窗内容</view>
      <view slot="footer">
        <button @click="confirm">确定</button>
        <button @click="cancel">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showPopup: false,
        position: 'bottom',
        mask: true
      }
    },
    methods: {
      popupChange(e) {
        console.log(e)
      },
      confirm() {
        this.showPopup = false
        console.log('点击了确定按钮')
      },
      cancel() {
        this.showPopup = false
        console.log('点击了取消按钮')
      }
    }
  }
</script>

以上是 uni-popup 的基本使用方法，可以根据实际需求进行相应的调整和扩展。