vue3+antd注册全局v-loading指令

embedded/2024/11/28 9:57:19/

文章目录

  • 1. 创建指令文件
  • 2. 全局注册
  • 3. 使用

1. 创建指令文件

src/directives
在directives中创建如下文件

src│─directives│  index.ts└─loadingindex.tsindex.vue
  • directives/ index.ts
export * from './loading'
  • directives/loading/index.ts
import { createApp } from 'vue'
import type { Directive } from 'vue'
import Loading from './index.vue'
// 注册组件
export const loading: Directive = {mounted(el, binding) {const app = createApp(Loading)const instance = app.mount(document.createElement('div'))el.instance = instanceif (binding.value) {appendEl(el)}},updated(el, binding) {if (binding.value !== binding.oldValue) {binding.value ? appendEl(el) : removeEl(el)}}
}
// 插入元素
const appendEl = (el: any) => {// 给父元素加个定位,让loading元素定位el.style.position = 'relative'el?.appendChild(el.instance.$el)
}
// 移除元素
const removeEl = (el: any) => {el.style.position = ''const $el = el.instance.$elif (el?.contains($el)) {el?.removeChild($el)}
}
  • directives/loading/index.vue
<template><div class="loading-box"><Spin tip="Loading" /></div>
</template><script lang="ts" setup>javascript">
import {Spin} from "ant-design-vue";
</script><style scoped lang="less">
.loading-box {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.2);position: absolute;top: 0;left: 0;:deep(.ant-spin-dot-item) {background-color:#f55345;}:deep(.ant-spin.ant-spin-show-text .ant-spin-text) {color: #f55345;}
}
</style>

2. 全局注册

src/main.ts

import './assets/style/main.less'
import { createApp, type Directive } from 'vue'
import App from './App.vue'
import * as directives from './directives'const app = createApp(App)
// 循环注册指令
Object.keys(directives).forEach(key => {app.directive(key, (directives as { [key: string]: Directive })[key])
})
app.mount('#app')

3. 使用

注册成功之后就可以在全局范围内使用了

<div v-loadin="true"></div>

http://www.ppmy.cn/embedded/141157.html

相关文章

Scala的字符串

package hfd.test32import java.io.PrintWriter import scala.io.Sourceobject Test {def main(args: Array[String]): Unit {//从文件1.txt中&#xff0c;读入内容val content Source.fromFile("1.txt").mkStringprintln(content)//把字符串中的每个单词&#xff…

数据结构——排序算法第二幕(交换排序:冒泡排序、快速排序(三种版本) 归并排序:归并排序(分治))超详细!!!!

文章目录 前言一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本 快排1.2.2 挖坑法 快排1.2.3 lomuto前后指针 快排 二、归并排序总结 前言 继上篇学习了排序的前面两个部分:直接插入排序和选择排序 今天我们来学习排序中常用的交换排序以及非常稳定的归并排序 快排可是有多…

【LC】3101. 交替子数组计数

题目描述&#xff1a; 给你一个二进制数组nums 。如果一个子数组中 不存在 两个 相邻 元素的值 相同 的情况&#xff0c;我们称这样的子数组为 交替子数组 。返回数组 nums 中交替子数组的数量。 示例 1&#xff1a; 输入&#xff1a; nums [0,1,1,1] 输出&#xff1a; 5 …

Android - 权限管理漏洞

所属分类&#xff1a;Android - 权限管理漏洞缺陷详解&#xff1a;应用未正确实施最小权限原则或滥用已声明的权限可能导致敏感信息泄露。例如&#xff0c;恶意代码利用已授予的权限绕过用户授权&#xff0c;访问通讯录、位置、短信等敏感资源。部分开发者还可能滥用权限以执行…

挑战 Cursor,Codeium 推出下一代 AI IDE Windsurf

适应技术不是人类社会的长项 面向我们展开的 是越发不可知 而被忽略的险境 自从 AI 的出现&#xff0c;在 IDE 的领域&#xff0c;不断的有新的带有 AI 性质的 IDE 出现&#xff0c;这不 Codeium 公司在前几天又推出了一款新的 AI IDE windsurf。 用过 vscode 的同学或多或少…

gdscript体会

前言&#xff1a;gdscript是Godot引擎提供的编程语言&#xff0c;代码结构上与Python类似 gdscript的match语句失效&#xff1f; gdscript提供match实现其它编程语言的switch case效果&#xff0c;常见的结构如下 var value 0match value:-1:print("left") 0:prin…

五,[GXYCTF2019]Ping Ping Ping1

进入靶场&#xff0c;有提示 我们在url试着输入本地IP&#xff0c;返回了ping命令 既然要在url处传参&#xff0c;那就用postman&#xff0c;再输入ip127.0.0.1 & ls&#xff0c;试着列出目录内容 ok&#xff0c;好像是个脏话,它过滤了空格 试着穿越又看到了脏话&#xff0…

Linux 共享环境搭建

NFS网络文件系统 说明&#xff1a;这个主要是应用于Linux系统与Linux系统之间的通信。 服务端 步骤&#xff1a; 在被共享的系统中安装nfs服务 sudo apt-get install nfs-kernel-server注意&#xff1a;如果系统提示无法定位软件包&#xff0c;就需要更新软件源 sudo apt-g…