码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue3封装全局插件


    定义一个全局加载组件

    一、首先定义dom元素

    定义一个index.vue文件

    1. <template>
    2. <div class="loading">
    3. loading...
    4. </div>
    5. </template>
    6. <script setup lang="ts">
    7. </script>
    8. <style scoped>
    9. .loading {
    10. display: flex;
    11. align-items: center;
    12. justify-content: center;
    13. font-size: 30px;
    14. color: #fff;
    15. background: rgba(0, 0, 0, 0.8);
    16. height: 100vh;
    17. }
    18. </style>

    第二步给dom元素添加,控制显示的开关和方法,然后通过defineExpose暴露出去

    1. <script setup lang="ts">
    2. import { ref } from "vue"
    3. const isShow = ref<boolean>(false);
    4. const show = () => {
    5. isShow.value = true
    6. }
    7. const hide = () => {
    8. isShow.value = false
    9. }
    10. defineExpose({
    11. isShow,
    12. show,
    13. hide
    14. })
    15. </script>
    二、把组件渲染到全局

    定义一个index.ts把组件暴露出去

    createVNode创建虚拟节点,render把节点渲染到body,然后创建一个全局变量方便操作$Loading

    1. import type { App, VNode } from "vue"
    2. import { createVNode, render } from 'vue'
    3. import loading from './index.vue'
    4. export default {
    5. install(app: App) {
    6. const Vnode: VNode = createVNode(loading);
    7. render(Vnode, document.body)
    8. app.config.globalProperties.$Loading = {
    9. show: Vnode.component?.exposed?.show,
    10. hide: Vnode.component?.exposed?.hide,
    11. }
    12. }
    13. }
    三、注册组件
    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import loading from './components/loading'
    4. const app = createApp(App)
    5. type Lod = {
    6. show():void,
    7. hide():void
    8. }
    9. declare module 'vue' {
    10. export interface ComponentCustomProperties {
    11. $Loading: Lod
    12. }
    13. }
    14. app.use(loading)
    15. app.mount('#app')

    使用

    1. <template>
    2. <div class="">
    3. </div>
    4. </template>
    5. <script setup lang="ts">
    6. import { getCurrentInstance } from 'vue';
    7. const app = getCurrentInstance();
    8. app?.proxy?.$Loading.show();
    9. setTimeout(() => {
    10. app?.proxy?.$Loading.hide();
    11. }, 2000)
    12. </script>
    13. <style scoped></style>

  • 相关阅读:
    力扣(LeetCode)3. 无重复字符的最长子串(C++)
    基于jeecgboot流程管理平台的在线表单设计修改成formdesigner(一)
    java ssm旅游景点景区门票预订及信息发布系统
    中小学综合实践活动项目式学习研究课题的开题报告
    P5906 【模板】回滚莫队&不删除莫队
    REACH认证办理流程,与高度关注物质SVHC认证的关系
    selenium结合jmeter进行测试
    【C++】类的封装 ② ( 封装最基本的表层概念 | 类对象作为参数传递的几种情况 )
    魔百盒九联UNT402A_S905L3_线刷固件包_语音蓝牙正常
    【FPGA】zynq 单端口RAM 双端口RAM 读写冲突 写写冲突
  • 原文地址:https://blog.csdn.net/QAEARQ/article/details/134540056
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号