插件编写

// 使用页面

<template>

  <div></div>

  </template>

 

  <script setup lang='ts'>

  import { ref, reactive } from 'vue'

  const app = getCurrentInstance()

  app?.proxy?.$Loading.hide() // 在main中declar module就不会提示错误了

  </script>

 

  <style scoped lang='scss'>

 

  </style>

 

// 插件主要组件

<template>

<div class="loding" v-if="flag">Loding</div>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

let flag = ref(false)

 

const show = () => {

  flag.value = true

}

const hide = () => {

  flag.value = false

}

// 因为install中的创建的虚拟dom无法直接获取show和hide方法，所以通过expose暴露给install中使用

defineExpose({

  show,

  hide

})

</script>

<style scoped lang='scss'>

.loding {

  width: 100vw;

  height: 100vh;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

</style>

 

// 插件编写语法

import type { App, VNode } from 'vue'

import Loading from './index.vue'

import { createVNode, render } from 'vue'

export default {

  install(app:App) { // 插件标准写法，在mian.js中的app.use(插件)就是执行install方法

    const vNode:VNode = createVNode(Loading) // 创建一个vue文件的虚拟dom

    render(vNode, document.body) // render在body标签中

    app.config.globalProperties.$Loading = { // 提供给安装插件的项目调用使用该插件的方法

      show: vNode.component?.exposed?.show,

      hide: vNode.component?.exposed?.hide

    }

  }

}

 

// 插件main.js引用插件

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

 

const app = createApp(App)

 

import Loading from './study/Loading';  // 引入插件，如果插件是npm安装的，则为import Loading from Loding

app.use(Loading) // 插件使用

app.mount('#app')