位置: 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是什么进程 有什么用

  • 拼多多极速退款怎么关闭(拼多多极速退款后卖家拒收退货,必须还款吗)

    拼多多极速退款怎么关闭(拼多多极速退款后卖家拒收退货,必须还款吗)

  • 微信运动在哪里 苹果(微信运动在哪里开启和关闭)

    微信运动在哪里 苹果(微信运动在哪里开启和关闭)

  • 苹果x看不了对方的特效短信(苹果x看不了对方微信)

    苹果x看不了对方的特效短信(苹果x看不了对方微信)

  • 拼多多关注的主播怎么取消(拼多多关注的主播找不到了怎么办)

    拼多多关注的主播怎么取消(拼多多关注的主播找不到了怎么办)

  • 小米8关机键过于灵敏(小米手机关机键坏了怎么办)

    小米8关机键过于灵敏(小米手机关机键坏了怎么办)

  • 一直显示正在擦除数据(一直正在等待抹掉)

    一直显示正在擦除数据(一直正在等待抹掉)

  • 红米手机可以开空调吗(红米手机可以开美的空调吗)

    红米手机可以开空调吗(红米手机可以开美的空调吗)

  • vivo手机充电越充越少怎么办(vivo手机充电越充越少怎么解决视频)

    vivo手机充电越充越少怎么办(vivo手机充电越充越少怎么解决视频)

  • 密码字符是什么意思(密码 字符)

    密码字符是什么意思(密码 字符)

  • 微信怎么关闭自动进群(微信怎么关闭自动下载图片视频)

    微信怎么关闭自动进群(微信怎么关闭自动下载图片视频)

  • vivo内存卡在哪里设置(vivo内存卡哪个牌子好)

    vivo内存卡在哪里设置(vivo内存卡哪个牌子好)

  • word文档中英文改字体(Word文档中英文对照)

    word文档中英文改字体(Word文档中英文对照)

  • 空间秘密怎么知道是谁(空间秘密怎么知道密码)

    空间秘密怎么知道是谁(空间秘密怎么知道密码)

  • 惠普m154a感叹号闪烁(惠普color laser jet pro m154a感叹号)

    惠普m154a感叹号闪烁(惠普color laser jet pro m154a感叹号)

  • 联通5gn是什么意思(联通5gnr)

    联通5gn是什么意思(联通5gnr)

  • kindle青春版和经典版区别(kindle经典版和青春版哪个性价比更高)

    kindle青春版和经典版区别(kindle经典版和青春版哪个性价比更高)

  • 爱奇艺季卡可以叠加吗(爱奇艺季卡可以多少个设备)

    爱奇艺季卡可以叠加吗(爱奇艺季卡可以多少个设备)

  • 运营商认证失败有什么解决方法(手机运营商认证失败)

    运营商认证失败有什么解决方法(手机运营商认证失败)

  • 手机自动拨打电话是咋回事(手机自动拨打电话怎么设置)

    手机自动拨打电话是咋回事(手机自动拨打电话怎么设置)

  • 苹果耳机怎么关机(苹果耳机怎么关闭语音播报)

    苹果耳机怎么关机(苹果耳机怎么关闭语音播报)

  • 手机之间如何进行隔空投送传输文件(手机之间如何进行信息传递)

    手机之间如何进行隔空投送传输文件(手机之间如何进行信息传递)

  • 如何在Excel中添加链接(如何在Excel中添加筛选项)

    如何在Excel中添加链接(如何在Excel中添加筛选项)

  • 【论文精读】Tune-A-Video: One-Shot Tuning of Image Diffusion Models for Text-to-Video Generation(论文精读分析报告)

    【论文精读】Tune-A-Video: One-Shot Tuning of Image Diffusion Models for Text-to-Video Generation(论文精读分析报告)

  • 进口洋酒能存放多少年
  • 开增值税发票折扣折让是什么意思?
  • 小规模纳税人如何申报
  • 增值税抵扣了,附加税怎么算
  • 综合收益什么时候结算
  • 加班餐费有发票怎么入账
  • 出口退税免税申报怎么报
  • 销售自己使用过的物品
  • 应付税费包括
  • 免税的农业企业可以抵扣专票吗
  • 航天信息的服务费
  • 零售超豪华小汽车交消费税吗
  • 资金与费用
  • 子公司与总公司的关系说明书
  • 资产负债表日后事项是什么意思?
  • 现金流量表附表的其他指的是什么
  • 住房公积金利息怎么算的
  • 企业以盈余公积转增资本,会引起所有者权益总额的变动
  • w11如何激活
  • win10 21h1正式版怎么样
  • 暂估人工成本分录怎么写
  • 猜单词游戏代码
  • 什么是递延所得税资产和负债
  • 文本模式是什么意思?
  • 苹果14发布会时间
  • Linux下which、whereis、locate、find 区别
  • 用php做一个表格
  • 解决办法总比困难多
  • 支付违约金可以要求开发票吗
  • laravel php
  • 资本金投资回报率
  • js如何实现异步编程
  • laravel orm使用
  • 微信公众号php开发教程
  • 三维重建是啥意思
  • 表关联查询语句
  • 所得税费用为什么不计入营业利润
  • 销售鸡蛋免增值税吗
  • dedecms模版
  • 织梦程序
  • 劳动保护的各项支出列入工资总额的范围吗
  • 工资是负数怎么办
  • 建安类企业包括哪些公司
  • 建筑企业预缴的增值税怎么抵扣
  • sql server数据类型明明放的是浮点型,老是说是其他的
  • 注册资金的多少有什么影响
  • 劳务合同的特征有()
  • 出口退税帐务处理
  • 预交税会计分录
  • 上年度多提财务费用
  • 财务报表中的净利润
  • 工会经费的计提比例
  • 现金支付现金股利
  • 企业支付境外佣金要交税吗?
  • 无形资产计入待摊费用
  • 对公账户的钱可以花吗
  • 预提费用在新会计准则下该如何列支?
  • 建账的基本流程图
  • 安装sqlserver2000 IP地址出错怎样修改
  • 惠普台式笔记本一体机电脑bios中文
  • 电脑程序在运行桌面不显示的解决方法
  • 由于您计算机中windows的版本比较
  • centos8查看进程
  • appservicesdkscripterror
  • ubuntu ftp服务器怎么搭建
  • 支持iphone
  • linux如何快速统计文件个数
  • ie运行flash
  • linux那些事儿
  • unity3d特效教程
  • nodejs跳转到指定页面
  • 使用的英文
  • Unity3D之Transform参数
  • 健壮的什么
  • python strip函数作用
  • javascript设计
  • jquery实现下拉菜单
  • javascript教程chm
  • js动态添加trtd
  • 消费税申报详细流程图
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设