uni-app模态弹窗

uni-app中可以使用uni-modal组件来实现模态弹窗。具体使用方法如下：

1. 在需要使用模态弹窗的页面中引入uni-modal组件：

<template>
  <view>
    <!-- 其他页面内容 -->
    <uni-modal></uni-modal>
  </view>
</template>

2. 在需要触发模态弹窗的元素上绑定一个点击事件，并在事件处理函数中调用uni.showModal方法：

<template>
  <view>
    <button @click="showModal">显示模态弹窗</button>
  </view>
</template>

<script>
export default {
  methods: {
    showModal() {
      uni.showModal({
        title: '提示',
        content: '这是一个模态弹窗',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  }
}
</script>

相关问题

uni-app领取优惠券弹窗

### 创建领取优惠券的弹出窗口组件

为了实现在 uni-app 中创建一个用于领取优惠券的弹出窗口组件，可以采用将该弹窗设计为新页面的方式，并利用特定样式使其看起来像是在同一页面内弹出的效果[^1]。

#### 实现方案概述

- **新建页面作为弹窗**：创建一个新的页面文件夹 `couponPopup`，其中包含必要的视图、逻辑和样式文件。
- **模拟弹窗效果**：通过 CSS 和动画设置使这个页面呈现为模态框形式。
- **控制显示隐藏**：使用 Vue 的数据绑定机制来管理此“弹窗”的可见性。

#### 页面结构与配置

在项目目录下新增名为 `components/couponPopup/` 文件夹并添加如下三个主要文件：

- `index.vue`: 组件主体
- `style.css`: 自定义样式表 (可选)
- `script.js`: JavaScript 或 TypeScript 脚本 (如果需要)

##### index.vue 内容示例

<template>
  <view v-if="visible" class="popup-container">
    <!-- 阴影遮罩层 -->
    <view @click="closePopup()" class="mask"></view>

    <!-- 弹窗内容区 -->
    <view class="popup-content">
      <text>恭喜获得一张满减券</text>
      <button type="primary" size="mini" @click="claimCoupon()">立即领取</button>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  data() {
    return {
      visible: false, // 控制弹窗显隐状态
    };
  },
  methods: {
    openPopup() {
      this.visible = true;
    },
    closePopup() {
      this.visible = false;
    },
    claimCoupon() {
      console.log('用户已成功领取优惠券');
      this.closePopup();
    }
  }
};
</script>

<style scoped>
.popup-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mask {
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
}

.popup-content {
  /* 设置居中 */
  margin-top: calc((var(--vh, 1vh) * 100 - 200px)/2);/* 屏幕高度的一半减去弹窗的高度 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  text-align: center;
}
</style>

#### 使用说明

当希望触发弹窗展示时调用 `openPopup()` 方法即可；而关闭则可通过点击外部区域或内部按钮事件处理函数中的 `closePopup()` 来完成。这样既实现了覆盖原有界面顶部元素的目的又保持了良好的用户体验。

uni-app中可以输入的弹窗

在uni-app中，可以使用uni.showModal、uni.showActionSheet、uni.showToast、uni.showLoading等方法来实现弹窗效果。

1. uni.showModal：显示模态弹窗，包含一个确认按钮和一个取消按钮，用户只能通过点击这两个按钮来关闭弹窗。

2. uni.showActionSheet：显示操作菜单弹窗，用于提供多个操作选项，用户可以通过点击其中一个选项来触发相应的操作。

3. uni.showToast：显示消息提示弹窗，用于在屏幕中间显示一条短暂的消息提示，一般用于表明操作结果或提醒用户。

4. uni.showLoading：显示加载提示弹窗，用于在屏幕中间显示一个加载图标和一条文本提示，表示正在进行一项操作。

以上方法都是uni-app中常用的弹窗方法，可以根据具体的需求选择合适的方法来实现对应的弹窗效果。