uni-app弹出层

uni-app中可以使用uni-popup组件来实现弹出层的效果。具体使用方法如下：

1. 在需要弹出层的页面中引入uni-popup组件：

<template>
  <view>
    <uni-popup ref="popup" :show="showPopup" :position="position" :overlay="overlay" @close="onClose">
      <!-- 弹出层内容 -->
    </uni-popup>
  </view>
</template>

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

  export default {
    components: {
      uniPopup
    },
    data() {
      return {
        showPopup: false, // 是否显示弹出层
        position: 'bottom', // 弹出层位置，可选值为 top、bottom、left、right、center
        overlay: true // 是否显示遮罩层
      }
    },
    methods: {
      // 关闭弹出层时触发
      onClose() {
        this.showPopup = false
      }
    }
  }
</script>

2. 在需要触发弹出层的元素上绑定点击事件，并在事件处理函数中设置showPopup为true即可：

<template>
  <view>
    <button @click="showPopup = true">显示弹出层</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showPopup: false // 是否显示弹出层
      }
    }
  }
</script>