uni-app+vue3+pina实现全局加载中效果,自定义全局变量和函数可供所有页面使用

首先自定义一个加载中组件

ccloading.vue

复制代码
<template>
  <view class="request-loading-view" v-if="loadingShow">
    <view class="loading-view">
      <image class="loading-img" :src="loading" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script setup>
import loading from "@/assets/images/loading.gif"
import {useCommonStore} from "@/store/common";
import {computed} from "vue";
const commonStore = useCommonStore();
const loadingShow=computed(()=> commonStore.showLoading)
</script>

<style scoped>
.request-loading-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-view {
  width: 100rpx;
  height: 140rpx;
  /* background-color: rgba(0, 0, 0, 0.6); */
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}


.loading-img {
  width: 100%;
  height: 100%;
}
</style>

然后再pina里面保存这个 showLoading的值。判断是否显示加载中。也就是上面引入的

复制代码
/store/common.ts文件
复制代码
import { defineStore } from 'pinia'
import piniaPersistConfig from "@/store/helper/persist";//因为persist不支持小程序的缓存。所以再这个页面重写了一下存储方式。参考这个

export interface State {
  showLoading: boolean;
}
// @ts-ignore
export const useCommonStore = defineStore('pack-store', {
  persist: piniaPersistConfig("pack-store"),
  state: (): State => ({
    showLoading:false,//loading是否显示
  }),
  getters: {},
  actions: {
    setChangeLoading(data:boolean){
      console.log("changeLoading",data)
      this.showLoading = data;
    },
  },
});

main.js定义全局组件。定义全局函数

复制代码
import { createSSRApp } from "vue";
import  Vue from "vue";
import App from "./App.vue";
import store from "./store";

import {useCommonStore} from "@/store/common";
import newRequestLoading from '@/components/ccloading/ccloading.vue';

export function createApp() {
  const app = createSSRApp(App);
  app.use(store);
  app.component('new-loading', newRequestLoading);
  const commonStore = useCommonStore();
  // 添加全局属性方法
  app.config.globalProperties.$loadingStatus=commonStore.showLoading;
  app.config.globalProperties.$loading = {
    show() {
      commonStore.setChangeLoading(true);
    },
    hide() {
      commonStore.setChangeLoading(false);
    }
  }

  return {
    app,
  };
}

然后就可以在页面使用了

index.vue

复制代码
<template>
  <new-loading/>
</template>
复制代码
<script setup lang="ts">
import {ref, reactive, getCurrentInstance} from "vue";
复制代码
const instance = getCurrentInstance()?.proxy
复制代码
onLoad((options) => {
  instance.$loading.show();//显示加载中
  getHide();
})

const getHide=()=>{

instance.$loading.hide();//隐藏加载中

}

相关推荐
鸿蒙布道师14 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚19 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧22 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸28 分钟前
2、中医基础入门和养生
前端·后端
局外人LZ32 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端
鹿九巫1 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长1 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了1 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API1 小时前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化