0
点赞
收藏
分享

微信扫一扫

蓝桥杯算法赛(二进制王国)

需求:做一个全局使用的插件,show方法打开div盒子,hide方法关闭div盒子。

  • 创建loading文件夹(存在index.vue,index.ts)
  1. 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)
// 打开div盒子
const show = ()=> isShow.value = true
// 隐藏div盒子
const hide = ()=> isShow.value = false

// 把定义的两个方法和属性 暴露出去
defineExpose({
  show,hide,isShow
})

</script>

<style lang="scss" scoped>
.bg {
    background: #000;
    width: 300px;
    height: 300px;
    color:#fff;
}
</style>

  1. index.ts 文件代码
// 引入app,vnode  type 类型
import type {App,VNode} from 'vue'

// 引入 写的插件
import Loading from './index.vue'

// createVNode 把 组件内容 改成 vnode 形式显示
import { createVNode, render } from 'vue'

export default {
    // 插件必须实现 install 函数 
    install(app:App){
        // loading插件写的内容 变更成 vnode 的方式,方便render函数进行渲染
        const vnode:VNode = createVNode(Loading)
        
        // render函数渲染,挂载到body上,可根据具体业务进行修改
        render(vnode,document.body)

        // 组件里的方法渲染到全局上
        app.config.globalProperties.$loading = {
            show: vnode.component?.exposed.show,
            hide: vnode.component.exposed.hide
        }
        
        // 全局调用打开loading函数 可在任何组件内使用
        app.config.globalProperties.$loading.show()

        // 5 秒 隐藏
        setTimeout(()=>{
            app.config.globalProperties.$loading.hide()
        },5000)

        console.log('123:',app,vnode.component?.exposed)
    }
}
  • main.ts 中引入写好的插件
import { createApp } from 'vue'
import App from './App.vue'
// 引入写好的插件
import Loading from './components/Loading'

const app = createApp(App)

// 挂载到app上
app.use(Loading)

app.mount('#app')

如此,写好的插件就能全局进行使用

举报

相关推荐

0 条评论