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

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

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

html 复制代码

<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 中使用

javascript 复制代码

<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 {
  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.target
      LdxLoading.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 颜色

📦 源码仓库 欢迎 star、fork、提 issue！ 👉 GitHub地址：https://github.com/lidaxuan/ldx-loading

🤝 结语这是一个简洁但实用的插件，希望能帮到你简化开发流程。未来我还会持续优化，计划加入：

✅ 自定义 SVG 动画支持

✅ 多实例栈管理

✅ 持续交互提示（如圈圈转 + 进度条）

如果你觉得这个项目有用，欢迎点个 Star ⭐，也欢迎在实际项目中应用它！你的鼓励是我持续更新的最大动力！