更新记录

1.0.2(2023-05-09) 下载此版本

优化

1.0.1(2023-05-08) 下载此版本

优化

1.0.0(2023-05-08) 下载此版本

上传

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

已内置uni-popup及uni-icons

props

属性 类型 默认 说明
v-model Boolean false 是否显示弹框
title String 标题 标题
showClose Boolean false 隐藏右上角关闭icon
closeIntercept Boolean false 右上角关闭拦截
hideCancel Boolean false 隐藏取消按钮
cancelIntercept Boolean false 取消按钮点击拦截
confirmText String 确定 确定按钮文案
cancelText String 取消 取消按钮文案
loading Boolean false loading动画
hideFooter Boolean false 隐藏底部按钮区
hideBgColor Boolean false 取消默认的白色背景色

emits

emit 说明
confirm 点击确定按钮事件,参数为close(),处理完相关任务后可以调用close()方法关闭弹框
cancel 点击取消按钮事件,参数为close(),开启cancelIntercept的时候调用close()方法关闭弹框
close 点击关闭图标事件,参数为close(),开启closeIntercept的时候调用close()方法关闭弹框

代码示例

<template>
  <view @click="showPopup">开启弹框</view>
  <mosowe-popup
    v-model="showPopupValue"
    title="test"
    showClose
    :loading="loading"
    closeIntercept
    cancelIntercept
    @confirm="confirmPopup"
    @cancel="cancelPopup"
    @close="closePopup">
    <view>11111</view>
  </mosowe-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showPopupValue = ref(false);
const loading = ref(false);
// 开启弹框
const showPopup = () => {
  showPopupValue.value = true;
};

// 关闭弹框
const closePopup = (close: any) => {
  uni.showModal({
    title: '确定关闭?',
    success: (res) => {
      if (res.confirm) {
        close();
      }
    }
  });
};

// 确认按钮点击
const confirmPopup = (close: any) => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    close();
  }, 1000);
};

// 取消按钮点击
const cancelPopup = (close: any) => {
  uni.showModal({
    title: '确定取消?',
    success: (res) => {
      if (res.confirm) {
        close();
      }
    }
  });
};
</script>

<style lang="scss" scoped></style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问