vue2 插件demo 实现类似this.$message() 功能，通过逻辑调用

1.插件模板内容，就是常规的vue组件。下面会通过this.$chat方式调用

<template>
  <transition name="fade">
    <div v-if="visible" class="chat-dialog">
      <div class="header" @click="visible = false">header</div>
      <div>body:{{ params }}</div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'ChatDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      message: ''
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) this.params?.onClose()
      }
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.chat-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  min-height: 200px;
  background: #f5f5f5;

  .header {
    background: #ccc;
    height: 40px;
  }
}

.fade-enter-active {
  transition: all .3s ease;
}

.fade-leave-active {
  transition: all .5s ease;
}

.fade-enter,
.fade-leave-to {
  top: 0;
  opacity: 0;
}
</style>

2.注册插件

import ChatDialog from './index.vue'

const Chat = {}

Chat.install = function(Vue) {
  // Vue.component(ChatDialog.name, ChatDialog)
  console.log('插件安装成功')
  // vue构造器，创建一个“子类”
  const ChatDialogConstructor = Vue.extend(ChatDialog)
  console.log('chatDialogConstructor', ChatDialogConstructor)
  const instance = new ChatDialogConstructor()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  Vue.prototype.$chat = (title, params) => {
    // 放在$chat中每次调用都会注册新的，放在外面可以保证只有一个
    // const ChatDialogConstructor = Vue.extend(ChatDialog)
    // console.log('chatDialogConstructor', ChatDialogConstructor)
    // const instance = new ChatDialogConstructor()
    // instance.$mount(document.createElement('div'))
    // document.body.appendChild(instance.$el)
    console.log('调用弹窗')
    instance.title = title
    instance.params = params
    instance.visible = true
  }
}

export default Chat

3.挂载到vue实例上

import Chat from '@/views/plugin/chatDialog/index.js'
Vue.use(Chat)

4.使用插件

this.$chat('弹框提示！', {
  name: '张三',
  onClose: () => {
    console.log('关闭了！')
  }
})