uniapp点击弹窗

实现 Uniapp 点击弹窗的方法

方法一：使用 uni.showModal 基础弹窗
适用于简单的确认或取消操作，支持自定义标题和内容。

uni.showModal({
  title: '提示',
  content: '确定执行此操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

方法二：使用 uni.showToast 轻提示
适用于短暂的消息提示，无交互按钮。

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

方法三：自定义弹窗组件
通过编写组件实现复杂弹窗，步骤如下：

1. 创建组件
   在 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>

2. 引入组件
   在页面中注册并使用组件。

   <template>
     <view>
       <button @click="showModal = true">打开弹窗</button>
       <custom-modal :visible.sync="showModal">
         <text>自定义内容</text>
       </custom-modal>
     </view>
   </template>
   <script>
   import CustomModal from '@/components/custom-modal.vue';
   export default {
     components: { CustomModal },
     data() {
       return { showModal: false };
     }
   };
   </script>

方法四：第三方插件（如 uView UI）
使用 UI 库提供的弹窗组件，快速实现高级功能（如表单、动画）。

1. 安装 uView UI 后直接调用：

   this.$u.toast('提示消息');
   // 或
   this.$u.modal({ title: '标题', content: '内容' });

注意事项

• 遮罩层点击关闭：自定义弹窗需通过 @click.stop 阻止事件冒泡。
• 多端兼容性：测试不同平台（H5、小程序、App）的样式和交互一致性。
• 性能优化：频繁弹窗建议使用单例模式或复用组件。