vue3 全局loading条制作 | 工作生活记录12

src下新建目录 status，里面新建文件 loading.js

import { defineStore } from "pinia";

export const useLoading = defineStore('pageloading', {
    state:()=> {
        return {
            status: false,
        }
    },
    actions: {
        setName(name) {
            this.name = name
        }
    }
})

使用

import { useLoading } from "@/status/loading";

const loading = useLoading();
// loading 赋值
loading.$patch({status: true}); // 开始loading
loading.$patch({status: false}); // 结束loading

html

<div v-if="loading.status" class="page-loading"></div>

.page-loading {-webkit-animation:pageLoadingEffect 1s ease-in-out infinite;animation:pageLoadingEffect 1s ease-in-out infinite;background:#fbc308;height:2px;left:0;position:fixed;top:0;width:100%;will-change:opacity,transform;z-index:1000}
@-webkit-keyframes pageLoadingEffect {
    0% {transform:translateX(-100%)}
    40% {transform:translateX(0)}
    60% {transform:translateX(0)}
    to {transform:translateX(100%)}
}
@keyframes pageLoadingEffect {
    0% {transform:translateX(-100%)}
    40% {transform:translateX(0)}
    60% {transform:translateX(0)}
    to {transform:translateX(100%)}
}