vue3 插件开发
插件是向vue添加全局功能。你如果是一个对象需要提供install方法，你如果是function就直接当install 方法去使用。
写一个loading组件供全局使用：
1)目录结构
index.ts文件内容：
import { createVNode, render, App } from 'vue'
import Loading from './index.vue'
export default {
// 自定义组件需要install 函数
install(app:App) {
// 先转成虚拟dom
const vNode = createVNode(Loading)
render(vNode, document.body)
// vnode中通过exposed属性获取组件导出的方法
app.config.globalProperties.$loading = {
show: vNode.component?.exposed?.show,
hide: vNode.component?.exposed?.hide
}
console.log(vNode);
}
}index.vue文件内容
<template>
<div v-if="showLoading">
loading...
</div>
</template>
<script setup>
let showLoading = ref(false)
const show = () => showLoading.value = true
const hide = () => showLoading.value = false
defineExpose({
show,
hide
})
</script>
<style scoped>
.loading {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba($color: #000000, $alpha: .8);
color: #fff;
}
</style>2) 在main.ts中引入
import loading from './components/loading' // 组件路径
//编写ts loading 声明文件放置报错 和 智能提示
type LoadingTypes = {
show: () => void,
hide: () => void
}
declare module '@vue/runtime-core' {
export interface ComponentCustomProperties {
$loading: LoadingTypes
}
}
app.use(loading)3) 使用
import { getCurrentInstance} from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Loading.show()
setTimeout(()=>{
instance?.proxy?.$Loading.hide()
},5000)