Uniapp弹窗大全

最新推荐文章于 2025-11-11 16:29:23 发布

原创最新推荐文章于 2025-11-11 16:29:23 发布 · 2.0k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

1.常用基础类

（1）uni.showModal 模态弹窗（带按钮）

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

这种弹窗适用于需要用户处理的情况，可根据不同情况调用方法
showCancel：是否显示取消按钮
cancelText：取消按钮的文字，默认为‘取消’
confirmText：确认按钮文字，默认为‘确认’

（2）uni.showToast 消息提示（无按钮，自动消失）

uni.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});

// 无图标提示
uni.showToast({
  title: '纯文本提示',//提示内容
  icon: 'none',//图标
  duration: 2000//持续时间
});

这种弹窗适用于简单提示，无任何操作

（3）uni.showLoading 加载提示

uni.showLoading({
  title: '加载中'//提示内容
});

// 需要手动关闭
setTimeout(function () {
  uni.hideLoading();//关闭方法
}, 2000);

这种弹窗适用于调用接口、处理复杂方法时给用户提示
uni.hideLoading()这个方法是用来关闭加载框的方法，调用多个加载提示框时只会出现一个，并且调用一次关闭方法即可

（4）第三方弹窗组件

uView UI 的 u-modal
uni-ui 的 uni-popup

2.不常用类

（1）uni.showActionSheet 操作菜单

uni.showActionSheet({
  itemList: ['选项一', '选项二', '选项三'],
  success: function (res) {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  },
  fail: function (res) {
    console.log(res.errMsg);//返回数据
  }
});

这类弹窗适用于简单的选择提示框，太复杂的建议适用uni-popup

（2）自定义弹窗组件

在 components 目录下创建自定义弹窗组件：

<!-- components/custom-modal.vue -->
<template>
  <view class="modal-mask" v-if="visible" @click="close">
    <view class="modal-content" @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;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
}
</style>

使用自定义组件：

<template>
  <view>
    <button @click="showModal = true">打开自定义弹窗</button>
    <custom-modal :visible.sync="showModal">
      <view>这是自定义弹窗内容</view>
    </custom-modal>
  </view>
</template>

<script>
import customModal from '@/components/custom-modal.vue';

export default {
  components: { customModal },
  data() {
    return {
      showModal: false
    }
  }
}
</script>