手把手教你快速开发一款 Vue.js 3 插件

plugins_object.js文件，代码如下所示：
export default { // 1.必须包含一个 install 函数
  install(app) {
    // 2.插件的作用是给app实例添加一个全局属性：$name
    app.config.globalProperties.$name = "coderwhy"
  }
}

......
import pluginObject from './plugins/plugins_object'
import App from './05_插件的使用/App.vue'
let app =createApp(App)
......
app.use(pluginObject); // 3.安装插件时，会执行插件的install函数
app.mount('#app')

<template>
  <div style="border:1px solid #ddd;margin:4px">App组件</div>
</template>
<script>
 import { getCurrentInstance } from "vue";
 export default {
    setup() {
      const instance = getCurrentInstance(); // 1.拿到组件实例，相当于 this
      // 2.通过组件实例访问全局属性: $name
      console.log("setup name=", instance.appContext.config.globalProperties.$name);
    },
    mounted() {
      //2.通过this访问全局属性: $name
      console.log("mounted name=", this.$name);
    }
 }
</script>

export default function(app) {
  // 1.插件是给app实例添加一个全局属性：$name  
  app.config.globalProperties.$name = "coderwhy"
  // todo... 可以继续给app实例添加全局的属性、方法、指令、组件、mixin等
}

......
import pluginFunction from './plugins/plugins_function'
import App from './05_插件的使用/App.vue'
let app =createApp(App)
......
// app.use(pluginObject);
app.use(pluginFunction); // 4.用app的use函数来安装插件
app.mount('#app')

import { render, createVNode } from 'vue';
import ToastComponent from './Toast.vue';


const VueToast = {
  install(app) {
    
    app.config.globalProperties.$toast = (message, type = 'info', duration = 3000) => {
      const container = document.createElement('div');
      // 1.创建一个挂载容器
      document.body.appendChild(container);
      // 2.创建虚拟节点
      let vm = createVNode(ToastComponent);
      // 3.渲染虚拟节点
      render(vm, container);
      // 4.调用 ToastComponent 组件暴露的方法显示 Toast
      vm.component.exposed.showToast(message, type, duration);
    };
    
  },
};
export default VueToast;

<template>
  <div :class="state.type" v-if="state.visible">{{ state.message }}</div>
</template>


<script setup>
import { reactive } from 'vue'
  
const state = reactive({
  message: '',
  type: '',
  visible: false,
})
// 1.显示 Toast 的方法
const showToast = (message, type, duration) => {
  state.message = message; // 显示的文本
  state.type = type; // 控制背景颜色
  state.visible = true; // 显示和隐藏
  setTimeout(() => {
    state.visible = false;
  }, duration);
}


// 2.将该方法暴露出去
defineExpose({
  showToast
})
</script>


<style scoped>
.vue-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.vue-toast.info {
  background-color: #3498db;
}


.vue-toast.success {
  background-color: #2ecc71;
}
</style>

// main.js
import { createApp } from 'vue';
import App from './06_VueToast的使用/App.vue'


import VueToast from './plugins/vue-toast'; // 1.导入插件
const app = createApp(App);
app.use(VueToast); // 2.安装 Vue Toast 插件


app.mount('#app');

<template>
  <div style="border:1px solid #ddd;margin:4px">
    App组件
    <button @click="showToast">显示 Toast</button>
  </div>
</template>
<script setup>
 import { getCurrentInstance } from "vue";
 const instance = getCurrentInstance();  // 1.拿到 this 实例
 const showToast = ()=>{
    instance.appContext.config.globalProperties  // 2.调用全局方法
        .$toast('这是一个示例 toast 消息', 'success');
}
</script>