更新记录

1.0.4(2021-12-11) 下载此版本

添加app操作物理返回键时关闭弹框配置

1.0.3(2021-07-26) 下载此版本

更新高亮兼容、添加模态框内容大小控制

1.0.2(2021-07-26) 下载此版本

点击取消、确定按钮添加高亮

查看更多

平台兼容性

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

fy-showModal 显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮

替换app android端的uni.showModal模态框,其他端包括app ios端都是使用原生uni.showModal api,使模态框在各端按钮、样式相对统一。
参考g-show-modal,在其基础上将样式和小程序对齐,并修改了路由跳转跳转后模态框不能点击关闭的问题。
下面按钮提现不全,请下载代码查看每步的详细操作,涉及文件:app.vue、main.js、mixins/index.js、js_sdk/fy-showModal

注意

  1. this.$showModal 全局调用显示的模态框,在各端调用的api不一样,在app-android端调用的是fy-showModal,在小程序和app-ios端则是使用了uni.showModal,使用this.$showModal不需要开发者再去做兼容处理。
  2. 具体代码可以查看 项目更目录->js_sdk->fy_showModal->index.js文件
  3. this.$showModal成功失败的回调使用的是Promise的then、catch

调用示例

<!-- index.vue -->
<button class="button" @click="handlerClick">显示模态框</button>
// index.vue
export default {
    methods: {
        handlerClick() {
            this.$showModal();
        }
    }
}
// mixins/index.js
import Vue from 'vue'
import Fy from '@/js_sdk/fy-showModal/index.js'

export default {
    methods: {
        $showModal(e = {}) {
            return Fy.showModal(e)
        },
    }
}

nvue中使用时得注意mixins需要手动加载

// index.nvue
<script>
import indexMixins from '@/mixins/index.js'
export default {
    mixins: [indexMixins],
    methods: {
        handlerClick() {
            this.$showModal();
        }
    }
}
</script>

属性说明

属性名 类型 默认值 说明
title String 提示 提示的标题
content String 提示的内容 提示的内容
showCancel Boolean true 是否显示取消按钮,默认为 true
cancelText String 取消 取消按钮的文字,默认为"取消"
cancelColor String #000000 取消按钮的文字颜色,默认为"#000000"
confirmText String 确定 确定按钮的文字,默认为"确定"
confirmColor String #3CC51F 确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff"
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
contentWidth Number screenWidth*0.82 提示的内容的宽度
backbutton Boolean false app操作物理返回键时,是否关闭弹框

最后提示:也可将mixins中的$showModal放在store中调用,这可避免在nvue中文件多引用一次mixins。

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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