uni-app中怎么开发一个全局弹层组件（代码示例）

// template部分<uni-popup><view><view><!-- #ifndef APP-NVUE --><text v-if="option.type !== 'none' &amp;&amp; option.showIcon"></text><!-- #endif --><view><text>{{ option.msg }}</text></view></view><view><view v-if="option.showConfirmButton"><text>确认</text></view><view v-if="option.showCancelButton"><text>取消</text></view></view></view></uni-popup>

data() {    return {            option: {}    }},methods: {    open(option) {        let defaultOption = {                showCancelButton: false, // 是否显示取消按钮                cancelButtonText: '取消', // 取消按钮文字                showConfirmButton: true, // 是否显示确认按钮                confirmButtonText: '取消', // 确认按钮文字                showIcon: true, // 是否显示图标                iconClass: null, // 图标class自定义                type: 'none', // 类型                confirm: null, // 点击确认后的逻辑                cancel: null, // 点击取消后的逻辑                msg: ''        }        this.option = Object.assign({}, defaultOption, option)        this.$refs.popup.open()    },    close() {            this.$refs.popup.close()    },    confirmClick() {            const confirmHandler = this.option.confirm            if (confirmHandler && typeof confirmHandler === 'function') {                    confirmHandler()            }            this.close()            this.$emit('confirm')    },    cancelClick() {            const cancelHandler = this.option.cancel            if (cancelHandler && typeof cancelHandler === 'function') {                    cancelHandler()            }            this.close()            this.$emit('cancel')    }}

// test.vue  可以使用uni-app的 [easycom组件规范](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83)，不用写import语句<st-layer></st-layer>// js部分this.$refs.stLayer.open({    msg: '测试',    confirm: () =&gt; {        console.log('点击了确认')    },    cancel: () =&gt; {        console.log('点击了取消')    }})

open(msg).then(() => {    console.log('点击了确认')}).catch(() => {     console.log('点击了取消')})

...open() {     return new promise((reoslve, reject) => {        ...        this.option.confirm = this.option.confirm || function confirmResolve () {            resolve()        }         this.option.cancel = this.option.cancel || function cancelReject () {            reject()        }     }) }...

confirm(msg, option = {}) {        if (typeof msg === 'object') {                option = msg        } else {                option.msg = msg        }        return this.open({                ...option,                showCancelButton: true,                type: 'confirm'        })}// 调用方式this.$refs.stLayer.confirm('是否确认？').then().catch()

import main from './main.vue'const LayerConstructor = vue.extend(main)const initInstance = () => {  instance = new LayerConstructor({    el: document.createElement('div')  })  instance.callback = defaultCallback  document.getElementById('app').appendChild(instance.$el)}

// 第一步npm install vue-inset-loader --save-dev // 第二步 在vue.config.js(hbuilderx创建的项目没有的话新建一个)中注入loadermodule.export = {    chainWebpack: config =&gt; {            // 超级全局组件            config.module                    .rule('vue')                    .test(/.vue$/)                    .use()                    .loader(path.resolve(__dirname, "./node_modules/vue-inset-loader"))                    .end()} }// 支持自定义pages.json文件路径  // options: {  //     pagesPath: path.resolve(__dirname,'./src/pages.json')  // } // 第三步 pages.json配置文件中添加insetLoader"insetLoader": {      "config":{          "confirm": "<baseconfirm></baseconfirm>",          "abc": "<baseabc></baseabc>"      },      // 全局配置      "label":["confirm"],      "rootEle":"div"  }