需求:做一个全局使用的插件,show方法打开div盒子,hide方法关闭div盒子。
- 创建loading文件夹(存在index.vue,index.ts)
- index.vue 文件代码
<template>
<div v-show="isShow" class="bg">
loading....
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const isShow = ref<boolean>(false)
const show = ()=> isShow.value = true
const hide = ()=> isShow.value = false
defineExpose({
show,hide,isShow
})
</script>
<style lang="scss" scoped>
.bg {
background: #000;
width: 300px;
height: 300px;
color:#fff;
}
</style>
- index.ts 文件代码
import type {App,VNode} from 'vue'
import Loading from './index.vue'
import { createVNode, render } from 'vue'
export default {
install(app:App){
const vnode:VNode = createVNode(Loading)
render(vnode,document.body)
app.config.globalProperties.$loading = {
show: vnode.component?.exposed.show,
hide: vnode.component.exposed.hide
}
app.config.globalProperties.$loading.show()
setTimeout(()=>{
app.config.globalProperties.$loading.hide()
},5000)
console.log('123:',app,vnode.component?.exposed)
}
}
import { createApp } from 'vue'
import App from './App.vue'
import Loading from './components/Loading'
const app = createApp(App)
app.use(Loading)
app.mount('#app')
如此,写好的插件就能全局进行使用