开发框架是的uniapp.
组件库中没有找到可以现用的全局可调用的弹窗，只能使用微信提供的wx.showToast()。这个方法可以实现在项目每个位置都可以调用的逻辑。只是最多只可以修改弹窗中的图片。不能满足自定义全局弹窗的功能。
在参考https://zhuanlan.zhihu.com/p/183919769 后，在代码基础上做了修改。
首先，我们需要在创建好自己的公共组件。customer-toast.提供一个_show方法可以展示弹窗。
接下来在main.js中import 组件，绑定组件在全局上。
创建vue.config.js。
module.exports = {
chainWebpack: (config) => {
config.module
.rule(‘vue‘)
.use(‘vue-loader‘)
.loader(‘vue-loader‘)
.tap((options) => {
const compile = options.compiler.compile
options.compiler.compile = (template, ...args) => {
if (args[0].resourcePath.match(/^pages/)) {
template = template.replace(
/[\s\S]+?<[\d\D]+?>/,
(_) => `${_}
<custom-toast ref="custom-toast" />
`
)
}
return compile(template, ...args)
}
return options
})
}
}
我们在页面上使用this.$refs.custom-taost._show(msg,type)。可以展示弹窗。
展示弹窗方法可以绑定在vue对象上，我们可以在每一个页面使用this.customToast(title,type)来使用。
Vue.component(‘custom-toast‘, CustomToast) Vue.prototype.customToast = function (title, type) { this.$refs[‘custom-toast‘][‘_show‘](title, type) }
在公共js方法中调用组件，this指向目的不统一。我通过获取小程序当前页面的属性，方法来获取到refs来展示弹窗。
const _toast = function (msg, type) { const pages = getCurrentPages() const ctx = pages[pages.length - 1] ctx.$vm.$refs[‘custom-toast‘][‘_show‘](msg, type) }
这样就可以全局调用弹窗组件了。有可能有更好的方法～