26-自定义vue插件

 

 

 

 

<template>
  <div v-if="isShow" class="loading">
    <div class="loading-content">loading</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let isShow = ref<boolean>(false)

const show = () => {
  isShow.value = true
}

const hide = () => {
  isShow.value = false
}

defineExpose({
  isShow,
  show,
  hide,
})
</script>

<style lang="less" scoped>
.loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  &-content {
    font-size: 30px;
    color: #fff;
  }
}

</style>


import { App, createVNode, VNode, render }  from 'vue'

import Loading from './index.vue'


export default {
  install(app: App) {
    const vnode:VNode = createVNode(Loading)
    render(vnode, document.body)
    app.config.globalProperties.$loadingShow = {
      show: vnode.component?.exposed?.show,
      hide: vnode.component?.exposed?.hide,
    }
    // console.log(vnode.component?.exposed)
  }
}

<template>
  <button @click="showLoading">切换</button>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ComponentInternalInstance,  } from 'vue'

  const { appContext } = getCurrentInstance() as ComponentInternalInstance

  console.log(appContext, 'xxxxxx')

  const showLoading = () => {
    appContext.config.globalProperties.$loadingShow.show()

    setTimeout(() => {
      appContext.config.globalProperties.$loadingShow.hide()
    }, 2000)
  }
</script>

<style lang="less" scoped>

</style>