在使用vue框架中,自定义了一系列的指令,但样式能修改的局限性比较大,所以自己可以自定义一个!!
vue2与vue3除了文件格式外,基本是一样的,不做过多讲解,以vue3为例
没有华丽的文采,直接上代码哈
-
创建
vep-loading.js
或vep-loading.ts
文件(名字可自取)export const vepLoading = { beforeMount(el: any, binding: any) { const isLoading = binding.value; if (isLoading) { showLoading(el); } }, mounted(el: any, binding: any) { const isLoading = binding.value; if (isLoading) { showLoading(el); } }, updated(el: any, binding: any) { const isLoading = binding.value; if (isLoading !== binding.oldValue) { isLoading ? showLoading(el) : hideLoading(el); } }, unmounted(el: any) { hideLoading(el); } } function showLoading(el: any) { el.classList.add('vep-loading'); } function hideLoading(el: any) { el.classList.remove('vep-loading'); }
-
在
main.js
或main.ts
文件中全局注册import {createApp} from 'vue' // 引入vue属性 import App from './App.vue' // 引入App文件 import {vepLoading} from "@/utils/vep-loading.ts" const app = createApp(App) app.directive('vep-loading', vepLoading)
-
使用(任意div均可,这里以表格为例)
<template> <div> <div v-vep-loading="loading" class="box"></div> <el-button type="primary" @click="openHandle" > 指令方式 </el-button> </div> </template> <script setup lang="ts"> import {ref} from 'vue' const loading = ref(false); const openHandle= () => { loading.value = true; setTimeout(() => { loading.value = false; }, 2000); } </script> <style scoped> .box{ width: 500px; height: 300px; border: 1px solid red; } </style>
在
el-table
中(该文件见之前自定义vep-crud
组件) -
样式
// 自定义加载动画指令 .vep-loading { position: relative; &::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 9999999; background-position: center; background-color: rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-size: 64px 64px; background-image: url("http://175.178.164.195:9000/kylin-mall/icon/loading-02.gif"); // 可替换自己的图片 } }
-
展示效果:
注:背景颜色可以在css中自定义,我用的是黑色透明的,element-ui
用的是白色透明的,根据个人喜好来
代码持续更新,若有更好的方法,欢迎各位道友评论区留言探讨!