弹窗组件

目录：

文件index.js

import notify from './function'

export default (Vue) => {
  Vue.prototype.$alter = notify
}

文件function.js

import notify from './notify.vue'
import Vue from 'vue'
let Instance,
  canAppend = false;
let alter = () => {
  return {
    show(option){
      if(canAppend) return
      Instance = new Vue({
        render(h){
          return h(notify, {
            props: option,
            on: {
              // 可以用$emit触发 相当于 $on()
              changeApp(){
                canAppend = false
              }
            }
          })
        }
      })
      let el = Instance.$mount()
      document.body.appendChild(el.$el)
      canAppend = true
    },
    hide(){
      canAppend = false
      Instance.$children[0].notify()
    }
  }
  
}

export default alter()

文件notify.vue

<template>
  <transition name='fade'>
    <div 
      class="notify"
      :style="attr"
      v-if="show">
      <span>{{content}}{{text}}</span>
      <span @click="notify">{{notifyText}}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'notify',
  data() {
    return {
      show: true,
      text: ''
    }
  },
  props: {
    notifyText: {
      type: String,
      default: '关闭'
    },
    content: {
      type: String,
      required: true,
    },
    attr: {
      default(){
        return {
          top: '50%',
          left: '50%',
          transform: "translate(-50%, -50%)"
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    notify(){
      this.show = false
      console.log(this.changeAppend)
      this.$emit('changeAppend')
    }
  },
}
</script>

<style lang="stylus" scoped>

.notify
  position fixed
  top 100px
  left 100px
  display flex
  width 150px
  height 50px
  padding 0 20px
  background-color #000
  color #fff
  justify-content space-between
  align-items center
</style>

文件main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import './styl/reset.styl'

import Notify2 from './components/notify2'
Vue.use(Notify2)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')