vue --- 全局彈窗，只調用對應實例

login.js

import Vue from 'vue'
import login from '@/components/login.vue'

const loginBox = Vue.extend(login)

login.install = function (data) {
  let instance = new loginBox({
    data
  }).$mount()

  document.body.appendChild(instance.$el)

  Vue.nextTick(() => {
    instance.show = true
    // show 和彈窗組件里的show對應，用於控制顯隱
  })
}
export default login

login.vue

<template>
    <view class="mask" v-if='show'>
        <view  class="content">
              <div class="content1">
                <div class="title"> 巴拉巴拉 </div>
                <div class="bx_img"></div>
                <div class="bx_num">+1</div>
                <div class="des">快去給你喜歡的選手比個心吧！</div>
                <div class="btn" @click.stop="onClick">開心收下</div>
              </div>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show:false,
            }
        },
        created(){
            let data = new Date()
            let time = new Object
            time.month = data.getMonth()+1
            time.day = data.getDate()
            let that = this 
            uni.getStorage({
                key:'timer',
                success(res){
                    if(res.errMsg=="getStorage:ok"){
                        if(res.data.month == time.month && res.data.day == time.day){
                            that.show = false
                        }else{
                            that.show = true
                        } 
                        
                    }
                },
                fail(err){
                    that.show = true
                },
            })
        },
        methods: {
            onClick(e) {
                this.click()
                let that = this 
                let data = new Date()
                let time = new Object
                time.month = data.getMonth()+1
                time.day = data.getDate()
                uni.setStorage({
                    key:'timer',
                    data:time,
                    success(res){
                        console.log(res)
                        that.show = false
                    }
                })
            },
            close() {
                uni.navigateBack()
            }
        }
    }
</script>

<style lang="less" scoped>
    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        font-size: .14rem;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .content {
        width: 3rem;
        height: 3rem;
        background: #fff;
        border-radius: .1rem;
        .txt{
            flex: 1;
            height: .2rem;
            text-align: center;
            line-height: .2rem;
            color: #262020;
        }
        .text{
            width: 1.2rem;
            height: .4rem;
            text-align: center;
            line-height: .4rem;
            margin: 0 auto;
            background: #ff0000;
            color: #fff !important;
            border-radius: .5rem;
            margin-bottom: .1rem;
        }
    }

    .text {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        line-height: 200px;
        text-align: center;
        color: #FFFFFF;
    }
    
    
    // .container {
    //   width: 100%;
    //   font-family: PingFangSC-Semibold, PingFang SC;
      .content1 {
        width: 2.65rem;
        height: 2.99rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.1rem;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        .title {
          font-size: 0.16rem;
          margin: 0.2rem auto 0;
          color: rgba(38, 32, 32, 1);
          text-align: center;
          font-weight: 600;
        }
        .bx_img {
          width: 1.6rem;
          height: 1.6rem;
          background: url('../static/school/禮物-比心-80@2x (1).png') no-repeat;
          background-size: 100% 100%;
          margin-left: 0.35rem;
        }
        .bx_num {
          font-weight: 600;
          font-size: 0.4rem;
          color: rgba(255, 0, 0, 1);
          position: absolute;
          top: 1rem;
          right: 0.57rem;
        }
        .des {
          font-size: 0.12rem;
          color: rgba(179, 175, 175, 1);
          width: 100%;
          text-align: center;
        }
        .btn {
          width: 2.33rem;
          height: 0.42rem;
          background: rgba(255, 0, 0, 1);
          border-radius: 0.21rem;
          text-align: center;
          margin: 0.2rem auto;
          font-size: 0.14rem;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          line-height: 0.42rem;
        }
      }
    // }
    
</style>

main.js  引入全局實例對象

import login from './common/api/login.js'

Vue.prototype.$login = login.install

 

 頁面調用方法

                this.$login({
                    title: '我是標題',
                    content: '我是內容',
                    btnText: '我是按鈕',
                    click: () => {
                                            console.log('我是你的事件回調')
                    }
                })