uniapp模态弹窗

Uniapp 模态弹窗实现方法

在 Uniapp 中，可以通过多种方式实现模态弹窗效果，包括使用内置组件、第三方插件或自定义组件。

使用 uni.showModal API

Uniapp 提供了 uni.showModal API，可以快速实现基础模态弹窗：

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

使用 uni-popup 组件

uni-popup 是官方推荐的弹窗组件，功能更丰富：

1. 安装 uni-popup 组件
2. 在页面中引入并使用

<uni-popup ref="popup" type="dialog">
  <uni-popup-dialog mode="base" title="标题" content="内容" @confirm="confirm"></uni-popup-dialog>
</uni-popup>

<button @click="openPopup">打开弹窗</button>

methods: {
  openPopup() {
    this.$refs.popup.open()
  },
  confirm() {
    console.log('确认')
    this.$refs.popup.close()
  }
}

自定义弹窗组件

可以创建自定义弹窗组件实现更灵活的效果：

1. 创建 components/my-modal.vue
2. 在父组件中引入并使用

<!-- my-modal.vue -->
<template>
  <view class="modal-mask" v-if="visible" @click="close">
    <view class="modal-container" @click.stop>
      <slot></slot>
      <button @click="close">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

使用第三方 UI 库

如 uView UI、Color UI 等都提供了丰富的弹窗组件：

// 使用 uView UI 弹窗
this.$u.toast('提示信息')
this.$u.modal({
  title: '提示',
  content: '内容'
})

弹窗样式自定义技巧

1. 修改遮罩层透明度：

   

   .uni-modal__mask {
   opacity: 0.6;
   }

2. 调整弹窗宽度：

   .uni-modal {
   width: 80%;
   }

3. 添加动画效果：

   
   .uni-modal {
   animation: fadeIn 0.3s;
   }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

### 注意事项

1. 弹窗内容不宜过多，避免超出屏幕
2. 在微信小程序中，弹窗层级最高，会覆盖其他组件
3. 考虑弹窗在横屏模式下的显示效果
4. 弹窗操作应有明确的反馈，避免用户困惑