最终实现效果

可以实现提示文字和背景颜色的自定义
xzw-loading-text=‘别急嘛~’ // 默认为加载中
xzw-loading-background=‘rgba(0, 0, 0, .4)’ // 默认背景色为rgba(255,255,255,.8)

创建自定义指令函数

路径：/src/directives/loading/index.ts
Vue3与Vue2的自定义指令钩子有了很大的改变改变，详情戳链接

Vue3自定义指令钩子

created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

const MyDirective = {beforeMount(el, binding, vnode, prevVnode) {},mounted() {},beforeUpdate() {}, // 新updated() {},beforeUnmount() {}, // 新unmounted() {}
}

上TS代码然后解析

// 全局加载组件
const handleMove = (e: TouchEvent) => {e.preventDefault()
}export default {beforeMount(el: HTMLElement, binding: any) {},mounted() {},beforeUpdate() {}, // 新updated(el: HTMLElement, binding: any) { // 更新的时候用这个if (binding.value) {/*** binding.value就是v-loading='true'传过来的那个值* 如果传过来的值为true 你们就是要展示loading* el是当前指令绑定的对象 binding是传过来的值*/// 在移动端页面禁用滚动document.body.addEventListener('touchmove', handleMove, { passive: false })// 判断当前页面是否存在没有消失的loading// hasLoading 值为false 时表明没有loading 可以添加loadingconst hasLoading = el.getElementsByClassName('xzw-loading').length !== 0if (hasLoading) return '日你温哦，有loading了还添加个锤子'// 判断是否传入了自定义提示文字const hasCustomText = el.getAttribute('xzw-loading-text')// 判断是否传入了自定义背景色const hasCustomBgColor = el.getAttribute('xzw-loading-background')el.style.position = 'relative'const mask = document.createElement('div') // 创建最外层div 高度占满（包含滚动）const loadingBox = document.createElement('div') // 显示loading的div 高度是100vhconst svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') // svg标签 用来实现旋转的圆const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle') // 旋转的那个圆const text = document.createElement('p') // 加载的文字// 下面所添加的class样式都会在后面贴出mask.setAttribute('class', 'xzw-loading')mask.style.background = !hasCustomBgColor ? 'rgba(255, 255, 255, .8)' : hasCustomBgColorloadingBox.setAttribute('class', 'xzw-loading-box')svg.setAttribute('class', 'xzw-loading_circular refleash')svg.setAttribute('viewBox', '25 25 50 50')circle.setAttribute('cx', '50')circle.setAttribute('cy', '50')circle.setAttribute('r', '20')circle.setAttribute('fill', 'none')text.innerText = !hasCustomText ? '加载中' : hasCustomTextsvg.appendChild(circle)loadingBox.appendChild(svg)loadingBox.appendChild(text)mask.appendChild(loadingBox)el.appendChild(mask)} else {/*** 传过来的值为false 不需要展示loading* 移除loading相关dom*/for (let i = 0; i < el.childNodes.length; i++) {if ((el.childNodes[i] as any).className === 'xzw-loading') {const childNodes = el.getElementsByClassName('xzw-loading')[0]el.removeChild(childNodes)break}}// 弹窗消失时移除'禁用滑动事件'document.body.removeEventListener('touchmove', handleMove)}},beforeUnmount() {}, // 新unmounted() {}
}

样式代码（修改类名后可直接使用）

// 自定义loading相关样式
.xzw-loading{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 100;text-align: center;p{color: $primary-color;}.xzw-loading-box{width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}
}// 旋转整个svg容器
.refleash{animation: RotateCricle 1s linear infinite;
}// svg容器样式 以及 里面的circle的旋转
.xzw-loading_circular {width: 40px;height: 40px;color: $primary-color;margin-bottom: 20px;circle{animation: xzw-circular 1.5s ease-in-out infinite;stroke: currentColor;stroke-width: 3;stroke-linecap: round;}
}@keyframes RotateCricle{from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}@keyframes xzw-circular{0% {stroke-dasharray: 1, 200;stroke-dashoffset: 0;}50% {stroke-dasharray: 90, 150;stroke-dashoffset: -20;}100% {stroke-dasharray: 90, 150;stroke-dashoffset: -120;}
}

main.ts里注册为全局指令

import loading from '@/directives/loading/index'
app.directive('loading', loading)

在页面中使用（简单演示）

<div class='container' v-loading='loading' xzw-loading-text='别急嘛~'xzw-loading-background='rgba(0, 0, 0, .4)'
>
</div>
<button @click='handleClickGetData '>Click To Get Data</button>

export default defineComponent({setup(props, ctx) {const loading = ref<boolean>(false)const handleClickGetData = async() => {// 开启loadingloading.value = trueconst res = await GetData({id})if (res.data.code === 200) {// 关闭loadingloading.value = false}}return{handleClickGetData ,loading}}
})

实现起来其实也不复杂。如果对你有帮助的话请点个赞再收藏一下吧~

Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画相关推荐

Android 实用自定义Dialog页面加载动画
现在所能看到的加载动画五花八门,也有很多优秀的库,但是有些时候并不能满足我们小公司的需求,比如页面中接口请求时的加载动画,可能只是需要很简单的一个大众的加载效果,自己去写的话需要花费很多时间.只要明白 ...
Vite搭建Vue3 + TypeScript 项目(NPM)
文章目录运行环境使用Vite初始化项目 vite提供不同工具的初始化以NPM为例: 运行环境请确保电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 & ...
Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
Vite搭建Vue3 + TypeScript 项目(Yarn)
文章目录运行环境 Node.js yarn安装与配置 Vite初始化项目 vite提供不同工具的初始化以Yarn为例: 运行环境 Node.js 请确保你的电脑上成功安装 Node.js,本项目使 ...
vue3 antd项目实战——Modal弹窗自定义遮罩（利用maskStyle属性自定义遮罩样式）
vue3 antd项目实战--Modal弹窗自定义遮罩 maskStyle 知识回调场景复现关于mask遮罩的API属性利用maskStyle属性自定义遮罩样式知识回调文章内容文章链接 v ...
web loding 自定义加载动画插件
官网指南介绍 Web 中实现 loading 的方式有很多种,例如使用css动画.js操作元素.gif图片.svg动画.ui框架中自带loading等等,各有所优,操作元素可能更方便,但会影响性能 ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...
vue 项目在加载完成之前，显示预置加载动画
vue 项目在加载完成之前,显示预置加载动画自己有一个日记项目,由于服务器带宽很小1MB,在加载之前页面中显示是空白的,就想给它加个前置的动画,这个用户体验更好. 一.实现 1. 定义项目入口如果 ...
keras 自定义评估函数和损失函数loss训练模型后加载模型出现ValueError: Unknown metric function:fbeta_score
keras分类回归的损失函数与评价指标目标函数 (1)mean_squared_error / mse 均方误差,常用的目标函数,公式为((y_pred-y_true)**2).mean() (2) ...

Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画

最终实现效果

创建自定义指令函数

Vue3自定义指令钩子

上TS代码然后解析

样式代码（修改类名后可直接使用）

main.ts里注册为全局指令

在页面中使用（简单演示）

Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画相关推荐

最新文章

热门文章

Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画

最终实现效果

创建自定义指令函数

Vue3自定义指令钩子

上TS代码 然后解析

样式代码（修改类名后可直接使用）

main.ts里注册为全局指令

在页面中使用（简单演示）

Vue3+TypeScript项目构建之实现自定义指令v-loading， axios请求时的加载动画相关推荐

最新文章

热门文章

上TS代码然后解析