位置: IT常识 - 正文

vue3 自定义全局loading组件 (PC和移动端都非常适用)(vue3全局属性)

编辑:rootadmin
vue3 自定义全局loading组件 (PC和移动端都非常适用) 前言

推荐整理分享vue3 自定义全局loading组件 (PC和移动端都非常适用)(vue3全局属性),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue设置全局样式,vue3定义全局变量,vue3全局属性,vue定义全局指令,vue3 自定义全局组件,vue3定义全局变量,vue3 自定义全局指令,vue3 自定义全局指令,内容如对您有帮助,希望把文章链接给更多的朋友!

在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到loading加载框,PC的一些ui库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。

效果图(loading样式可以自定义)vue3 自定义全局loading组件 (PC和移动端都非常适用)(vue3全局属性)

代码实现

自定义组件 loading.vue(图片放在文末,自行右键另存为)

<template> <div class="loading" v-show="msg.show"> <div class="load-box"> <img src="@/assets/img/load.png"> <!--<img src="@/assets/img/loading_white.png">--> <span>{{msg.title}}</span> </div> </div></template><script>export default { name: 'loading', props: { msg: Object, }}</script><style scoped lang="scss">.loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 9999; .load-box { background-color: rgba(0, 0, 0, .5); width: 100px;height: 100px;border-radius: 5px; box-shadow:0px 1px 15px rgba(0,0,0, .5);color: #fff; display: flex;flex-direction: column;align-items: center; justify-content: center;letter-spacing: .8px; font-size: 13px; img{ width: 30px;margin-bottom: 8px; -webkit-animation:rotate .8s linear infinite; } }}@keyframes rotate{ to{ transform: rotate(360deg); }}</style>

utils/loading.js 创建封装js控制显示和隐藏,以及需要显示的文字

import { createApp, reactive } from 'vue'import myLoad from '@/components/Loading/loading.vue'const msg = reactive({ show: false, title: '加载中...'})const $loading = createApp(myLoad, {msg}).mount(document.createElement('div'))const load = { show(title: any = msg.title) { // 控制显示loading的方法 msg.show = true msg.title = title document.body.appendChild($loading.$el) }, hide() { // 控制loading隐藏的方法 msg.show = false }}export { load }

页面使用

import { load } from '@/utils/loading.js';// 在需要使用时调用show方法// 例如在指定api调用,或者其他耗时操作时打开loading// 不传参默认为 加载中...load.show();load.show('登录中...');//在加载完成时关闭load.hide();小结大家可以根据自己的习惯和方式来选择用哪一张图片,也可以动态传参改变。样式是仿照移动端的加载框,我是不习惯用那种全屏的加载,大家也可以把样式改为全屏的加载为了避免在加载的过程,用户点击页面其它元素,所以本文的样式层级很高,大家可以自行去更改图片在这里

图片右击另存为即可,但是这里有水印,大家也可以去图标库找其它的加载图标代替,效果也是一样的

本文链接地址:https://www.jiuchutong.com/zhishi/283673.html 转载请保留说明!

上一篇:最大交易量的支付平台是什么(最大交易笔数什么意思)

下一篇:NDSTray.exe - NDSTray是什么进程 有什么用

  • 彩色激光打印机哪个型号的好(彩色激光打印机哪个牌子好)(彩色激光打印机家用推荐)

    彩色激光打印机哪个型号的好(彩色激光打印机哪个牌子好)(彩色激光打印机家用推荐)

  • 苹果手机热点名称在哪改(苹果手机热点名字在哪里看)

    苹果手机热点名称在哪改(苹果手机热点名字在哪里看)

  • 小米10是曲面屏还是直面屏手机(小米10是曲面屏还是平面屏)

    小米10是曲面屏还是直面屏手机(小米10是曲面屏还是平面屏)

  • ipad1474是ipad几(ipad1474是ipad air几)

    ipad1474是ipad几(ipad1474是ipad air几)

  • 腾讯课堂改名字怎么改(腾讯课堂改名字以前的记录)

    腾讯课堂改名字怎么改(腾讯课堂改名字以前的记录)

  • 淘宝bp是什么意思(淘宝bd是啥意思是什么)

    淘宝bp是什么意思(淘宝bd是啥意思是什么)

  • 闪充充电器可以充别的手机吗(闪充充电器可以给快充手机充电吗)

    闪充充电器可以充别的手机吗(闪充充电器可以给快充手机充电吗)

  • pr脱机是什么意思(pr脱机状态)

    pr脱机是什么意思(pr脱机状态)

  • 抖音换头像会被降权吗(抖音换头像被权限了怎么恢复啊)

    抖音换头像会被降权吗(抖音换头像被权限了怎么恢复啊)

  • 抖音抖币怎么算(抖音抖币怎么算的)

    抖音抖币怎么算(抖音抖币怎么算的)

  • 怎么扩大单元格(word表格怎么扩大单元格)

    怎么扩大单元格(word表格怎么扩大单元格)

  • 新注册的抖音号发出去没播放量是什么情况(新注册的抖音号为什么关注不了别人)

    新注册的抖音号发出去没播放量是什么情况(新注册的抖音号为什么关注不了别人)

  • 抖音评论功能已封禁怎么恢复(抖音评论功能已封禁怎么解)

    抖音评论功能已封禁怎么恢复(抖音评论功能已封禁怎么解)

  • 为什么微信收款没有语音播报(为什么微信收款屏幕不显示收款金额显示新消息)

    为什么微信收款没有语音播报(为什么微信收款屏幕不显示收款金额显示新消息)

  • 微信朋友圈怎么发多张照片(微信朋友圈怎么统一回复评论)

    微信朋友圈怎么发多张照片(微信朋友圈怎么统一回复评论)

  • ipadmini有多大(ipadmini内存)

    ipadmini有多大(ipadmini内存)

  • 机顶盒los代表什么(机顶盒los什么意思)

    机顶盒los代表什么(机顶盒los什么意思)

  • 为什么手机卡显示无卡(为什么手机卡显示2g)

    为什么手机卡显示无卡(为什么手机卡显示2g)

  • 计算机软件一般分为(计算机软件一般分为系统软件和什么两大类)

    计算机软件一般分为(计算机软件一般分为系统软件和什么两大类)

  • 抹掉iphone照片还在吗(抹掉iphone照片还会有吗)

    抹掉iphone照片还在吗(抹掉iphone照片还会有吗)

  • 华为mate30要贴膜吗(华为mate30贴膜后无法截屏)

    华为mate30要贴膜吗(华为mate30贴膜后无法截屏)

  • 抖音怎么只允许一个人看(抖音怎么只允许关注的人评论)

    抖音怎么只允许一个人看(抖音怎么只允许关注的人评论)

  • blnkl路由器怎么设置(blink路由)

    blnkl路由器怎么设置(blink路由)

  • 手机淘宝怎么换皮肤(手机淘宝怎么换绑支付宝)

    手机淘宝怎么换皮肤(手机淘宝怎么换绑支付宝)

  • 头条上的视频怎么保存(头条上的视频怎么隐藏起来)

    头条上的视频怎么保存(头条上的视频怎么隐藏起来)

  • 如何取消qq消息弹窗(如何取消qq消息提示音分组)

    如何取消qq消息弹窗(如何取消qq消息提示音分组)

  • 微软发布最新Win10 KB5005716补丁直接升级Win11(微软发布新windows)

    微软发布最新Win10 KB5005716补丁直接升级Win11(微软发布新windows)

  • 苹果11屏幕尺寸介绍(苹果11屏幕尺寸长宽)

    苹果11屏幕尺寸介绍(苹果11屏幕尺寸长宽)

  • Linux下使用quota命令管理磁盘空间的实例教程

    Linux下使用quota命令管理磁盘空间的实例教程

  • vue 项目中刷新当前路由(vue页面刷新时原有的数据还在吗)

    vue 项目中刷新当前路由(vue页面刷新时原有的数据还在吗)

  • 未办理税务登记的个体户怎么注销营业执照
  • 资产的计税基础怎么计算
  • 小规模纳税人专票免税吗?
  • 存货跌价准备的分录
  • 网银转账往来款
  • 起重机属于固定资产哪个类别
  • 金蝶未结账是否可以重新起账
  • 挂牌出售无形资产
  • 享受专项附加扣除该怎么申报
  • 虚开发票应如何进行处罚
  • 当期允许抵扣的农产品进项税额
  • 进项交税吗
  • 固定资产属于净资产的哪一项
  • 个人账户转公司账户需要交税吗
  • 代扣代缴个人所得税手续费返还 增值税
  • 投资公司收回投资款
  • 公司将我转到另外一家公司
  • 交通补贴可以抵扣个税吗
  • 单位付款方式
  • 一般纳税人开具房屋租赁费税率
  • 车辆租赁费可以开专票吗
  • 开旅游公司有补贴吗
  • 增值税免税收入进项税额转出
  • 固定资产一次性计入费用的账务处理
  • 房地产企业开具零税率发票
  • 处置其他权益工具投资会影响当期损益吗
  • 城建税计税依据及税率
  • 报销抵冲银行日记帐要怎么入帐?
  • 小规模税局代增值税专用发票怎么交税
  • 进项税额暂不转出情况说明怎么写
  • 商贸公司进项税额大
  • linux如何用root用户登录
  • 期间费用率的意义
  • 购入办公楼按多少折算
  • php使用while循环计算1到100的和
  • 深入php:面向对象、模式与实践
  • 代垫费用的进项税怎么算
  • 安博塞利国家公园狮子
  • 企业购买预付卡送人分录
  • 劳务报酬怎么做帐
  • php打包网站并在哪里打开
  • 开具增值税专用发票的要求
  • 食堂现金管理办法
  • tensorboard作用
  • 前端面试题什么是网络协议
  • gpt 4927
  • libev & libevent简介 IntelIOT 博客园
  • 存货的期末计价属于会计政策吗
  • 实收资本的会计处理
  • 预缴增值税款怎么入账
  • 个人抬头的发票可以入账吗
  • 企业增值税的计算
  • 行政划拨的土地有使用年限吗
  • 小规模没有销售额如何申报
  • 股东借款如何认定为出资
  • 资源税的账务处理
  • 多交的税费申请抵扣下期
  • 挂靠单位账务处理是?
  • 超过诉讼时效的法律后果
  • 代发工资业务流程
  • 财务费用和应付利息都在借方
  • 公交车ic卡网上充值
  • 工会经费不够
  • 费用预算表怎么做
  • Mysql主库死锁了导致从库停止复制
  • sqlserver批量删除数据
  • sql里case
  • Win7系统关闭怎么办
  • 安装win7系统需要注意什么
  • 富士通FUJITSU笔记本电脑开机进入BIOS的方法(F2)
  • ssgrate.exe - ssgrate是什么进程
  • win8.1删除所有内容并重新安装
  • win10的三个安全问题
  • window7系统清理
  • jquery 报表
  • python语言基本语法
  • 全国税务系统12366纳税服务热线工作规范
  • 电子税务局用户名和密码是什么
  • 实名办税信息采集的身份证件
  • 异地车如何查车主信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设