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

  • 设在西部地区的鼓励类产业企业减按15%怎么填
  • 应纳税所得额100万以内,税负2.5%是什么意思
  • 累计交税如何计算?
  • 新入股的钱入什么科目
  • 疫情捐款收据有什么用吗
  • 合伙律师事务所的合伙人必须是
  • 年报和汇算清缴报表数字不一致
  • 一般纳税人的进项税额计入成本吗
  • 服装公司的吊牌是什么
  • 企业购买土地如何做账
  • 地下车位未使用 要交物业服务费
  • 本票汇票支票的区别
  • 固定资产不动产抵扣新政策
  • 租赁公司运输费计入什么科目
  • 中标服务费会计科目
  • 假设公司为增值税一般纳税人
  • 发票已认证未抵扣怎么办
  • 超市里销售
  • 增值税包括土地整治收入吗
  • 小规模企业需要汇算清缴吗
  • 全年一次性奖金计税方式2023
  • 劳务公司费用成本怎么算
  • 从贸易公司购买来的货物可以退税吗
  • 免征税收入和不征税收入的区别
  • 支付委托加工费用会计科目
  • php集成包
  • linux cls命令
  • 高新企业政府补贴政策
  • 成本会计工作流程表
  • php @method
  • input 文件
  • 员工报销垫付的钱怎么入账
  • 固定资产折旧的计算方法
  • 其他应付款贷方余额表示谁欠谁
  • 火车及机票退票扣多少钱
  • 损益表填制
  • js执行上下文的概念
  • 支付劳务费会计科目怎么写
  • 员工报销差旅费现金流量表里放在哪里
  • 坏账核销的会计处理
  • 应收账款是否存在的审计程序
  • 股东买房能在银行贷款吗
  • 预包装的标签有哪几种
  • 工商年报资产状况公示还是不公示
  • 建筑企业预缴所得税税率是多少
  • 行政单位收取现金的规定
  • 递延所得税当前试用25%,以后15%
  • 实际缴纳的税金比应交的多的部分记入什么科目
  • 开出银行承兑汇票
  • 建筑公司收到的工程服务发票怎么做账
  • 国家法定滞纳金规定
  • 自然人可以申请一般纳税人吗
  • 新注册公司工商如何做印章确认
  • 总账和明细账的保管期限
  • 年初建账考虑要点业务流程是否变化
  • sqlserver数据库中表的类型有哪些
  • sql server分页查询sql语句
  • linux开机启动过程图解
  • 进程registry
  • 任务栏图标右键
  • win8安装itunes
  • linux命令行图片
  • Win7系统如何清除流氓屏保
  • 怎么从win8装回win7
  • 宏基win8改win7
  • jquery禁止点击事件
  • [置顶]电影名字《收件人不详》
  • js中使用组件
  • node.js javascript
  • python 堆叠
  • 如何大小写字母转换
  • 搭建nodejs环境
  • Android Http请求方法汇总
  • jni静态注册和动态注册
  • node 创建文件夹
  • 彻底解决老鼠进发动机舱
  • android数据存储文件读写实验
  • 青岛市地方税务局关于发票
  • 无纸化同义词
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设