uni-app uni-popup 怎么用呢？

Uni-app 的 `uni-popup` 是一个用于显示弹出层组件，通常用于展示信息、确认对话框或其他交互式操作。下面是如何使用它来创建一个基础的弹出层：

1. **引入并注册组件**:

   <!-- 引入uni-popup组件 -->
   <template>
     <uni-popup ref="popup" />
   </template>

2. **设置属性**:
- `type`: 指定弹出层的位置，如 "top", "bottom", "left", "right" 等。
- `background-color`: 设置背景颜色。

示例：

   <uni-popup :type="position" :background-color="#fff">
     ...
   </uni-popup>

其中 `position` 可以在 JavaScript 中动态设置，例如 `position = 'bottom'`.

3. **模板内容**:
- 在 `<uni-popup>` 内部添加要显示的内容。
- 提供关闭按钮:

     <button @tap="popup.close()">关闭弹出层</button>

- 开启和关闭方法:

     data() {
       return {
         position: 'bottom',
         popup: null,
       };
     },
     methods: {
       popupOpen() {
         this.popup.open();
       },
       popupClose() {
         if (this.popup) {
           this.popup.close();
         }
       },
     },
     // 触发弹出:
     <view @tap="popupOpen">服务</view>

4. **触发弹出**:
当用户点击 "服务" 文本时，调用 `popupOpen()` 方法打开弹出层。

完整示例:

<template>
  <view>
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view>内容</view>
      <button @tap="popup.close()">关闭弹出层</button>
    </uni-popup>
    <view @tap="popupOpen">服务</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: 'bottom',
      popup: null,
    };
  },
  methods: {
    popupOpen() {
      this.popup.open();
    },
    popupClose() {
      if (this.popup) {
        this.popup.close();
      }
    },
  },
};
</script>