【uniapp-小程序】实现方法调用的全局tips弹窗_uniapp全局弹窗

【uniapp-小程序】实现方法调用的全局tips弹窗

• 开发背景
• • 弹窗组件
  • 全局调用
  • • 封装配置项入参
    • 全局注入
    • 使用
  • 附带：如何在uniapp-H5项目中实现全局自定义弹窗
  • • 组件定义
    • 定义vue插件
    • 引入

笑死，只有在想找工作的时候才会想更新博客。

开发背景

本来是个uniapp开发的H5项目，但是由于上面要求需要转为小程序版本，导致很多原先支持的功能都需要针对小程序环境进行兼容。这次先说说自定义的全局提示弹窗。代码中使用了较多uniapp组件，详细使用方法请查看uniapp官方文档
框架：uniapp、小程序、vue2

弹窗组件

弹窗组件其实就是个常规的vue页面，通过设置蒙层+层级实现弹窗效果，实现简单，可扩展性强。

• 样式中使用了import语法是为了覆盖uniapp原生样式，如不需要可去除；
• safeAreaTop为自定义字段，为获取的小程序顶部状态栏高度；
• 弹窗内容显示使用了uniapp的rich-text组件，如对弹窗内容显示要求没那么高的可以直接展示文本，如：{ {content}}，其中decode是为了实现换行;
• 很多配置项是为了满足我项目的需求，并非必须，可按需调整。

<template><view class=\"confirm-modal\" v-if=\"visible\" :style=\"{top:`${safeAreaTop}px`}\"><view class=\"confirm-modal-mask flex justify-center align-center\"><view class=\"confirm-modal-content\" :style=\"contentStyle\"><view class=\"close-top-btn flex justify-end align-center\" v-if=\"closeEnabled\"><uni-icons type=\"closeempty\" size=20 color=\"#999\" @click=\"handleClose\"></uni-icons></view><view class=\"title flex justify-center align-center\" v-if=\"title\">{ { title}}</view><view :style=\"{marginTop: closeEnabled&&!title?\'24px\':0}\"class=\"flex justify-center align-center text-center\"><rich-text :nodes=\"content\"></rich-text></view><view class=\"flex justify-between align-center operation\"><button type=\"primary\" :plain=\"cancelClassName.indexOf(\'cancel\')>-1\" v-if=\"showCancel\" @click=\"handleClose\" class=\"round\" :class=\"cancelClassName\"> { { cancelText}} </button><button type=\"primary\" :plain=\"confirmClassName.indexOf(\'cancel\')>-1\" v-if=\"showConfirm\" @click=\"handleOk\" class=\"round\" :class=\"confirmClassName\">{ { confirmText}} </button></view></view></view></view></template><script>import { mapGetters} from \'vuex\'export default { data() { return { safeAreaTop: this.$safeAreaTop, // 获取小程序顶部状态栏高度，按需使用}},computed: { ...mapGetters([\'confirmModal\']),title() { return this.confirmModal.title},content() { return this.confirmModal.content},// 默认:default, 整行: blockbtnType() { return this.confirmModal.btnType || \'default\'},cancelText() { return this.