当前位置：首页 > news >正文

一个轻量级、无依赖的 Loading 插件 —— @lijixuan/loading

news 2025/8/6 1:32:20

🚀 一个轻量级、无依赖的 Loading 插件 —— @lijixuan/loading
📦 NPM地址：https://www.npmjs.com/package/@lijixuan/loading
🧩 GitHub地址：https://github.com/lidaxuan/ldx-loading

前言
开发中，我们经常需要一个简洁好用的 Loading 组件，无论是请求数据时的全局遮罩，还是局部区域的加载提示，性能、兼容性和易用性都非常关键。在vue2中使用太过于繁琐!!!

<template><div class="" v-loading="loading"></div>
</template>
<script>
export default {data() {return {loading: false};},mounted() {this.loading = true;setTimeout(() => {this.loading = false;}, 2000);},
};
</script>

于是我开发了一个零依赖、支持原生 HTML、Vue2、Vue3 的 Loading 插件：@lijixuan/loading。欢迎大家试用、提 issue 或 PR！

✨ 项目特色

✅ 零依赖：无需引入任何第三方库，纯原生 JS 实现。
🎯 多框架支持：可直接用于 Vue2、Vue3 项目，也可在原生 HTML 项目中直接调用。
🎨 样式灵活：支持自定义颜色、文本、类名，支持全屏/局部模式。
🧠 防重复点击机制：自动禁用触发按钮，防止重复提交请求。
🧩 Element UI 风格：内置样式参考 Element UI，默认美观，开箱即用。
🪄 按需调用：提供 open() / close() 方法，使用方式清晰明了。

🚀 快速开始
安装
npm i @lijixuan/loading或者yarn add @lijixuan/loading

使用方式
Vue2 / Vue3 中使用

<template><div class="page-asd"><div><div v-for="item in 3" :key="item">奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变</div></div><el-button  @click="click1($event)">按钮1</el-button><el-button type="primary" @click="click2($event)">按钮2</el-button><div type="primary" @click="click2($event)">按钮3-div</div></div>
</template><script>
import LdxLoading from "./LdxLoading.js";LdxLoading.init({text: "加载中...",customClass: "ldx-loading",color: 'green',// fullscreen:false
})
export default {name: "", // Pascal命名mixins: [],components: {Comp,Compcopy},props: {},data() {return {query: {name: "zs"},};},mounted() {// this.initPage();},methods: {async initPage() {const el = document.querySelector('.page-asd')LdxLoading.open(el, {text: "页面加载中"});const res = await this.getData(this.query);LdxLoading.close(el);},getData(query) {return new Promise((resolve, reject) => {setTimeout(() => {resolve({...query, age: 18});}, 1000);});},click1(event) {console.log("点击了")this.initPage();},click2(event) {console.log("event", Array.from(event.target.classList).includes('ldx-loading-mask'));const el = event.currentTarget; // 或 event.targetLdxLoading.open(el, {text: ""});setTimeout(() => {LdxLoading.close(el);}, 3000);}}
};
</script>
<style lang="scss" scoped>
.page-asd {width: 100%;height: 100%;background: pink;overflow-y: auto;
}
</style>

⚙️ 参数说明

参数	类型	默认值	说明
target	`HTMLElement Event`	document.body	触发的元素
text	string	“”	loading 文案
fullscreen	boolean	false	是否全屏遮罩
lock	boolean	true	是否禁用目标按钮
customClass	string	‘’	自定义类名
color	string	#409EFF	loading 颜色