https://github.com/weilkss/react-vue-loading
适用于vue、react的loading谷歌加载组件,Loading Google load component for Vue and react
https://github.com/weilkss/react-vue-loading
loading reactjs shelljs vuejs
Last synced: about 1 month ago
JSON representation
适用于vue、react的loading谷歌加载组件,Loading Google load component for Vue and react
- Host: GitHub
- URL: https://github.com/weilkss/react-vue-loading
- Owner: weilkss
- License: apache-2.0
- Created: 2019-02-18T03:18:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T03:40:00.000Z (almost 6 years ago)
- Last Synced: 2025-07-08T09:08:02.351Z (11 months ago)
- Topics: loading, reactjs, shelljs, vuejs
- Language: JavaScript
- Homepage: https://www.weilkss.cn/react-vue-loading
- Size: 32.2 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 react-vue-loading
A Zero-Dependency, Cross-Framework Loading Component.
---
## ✨ 特性 (Features)
- **真正零依赖 (Zero-Dependency)**：底层基于原生 Web Components 实现，不依赖任何框架的 Runtime。
- **跨框架通用**：完美支持 `React`, `Vue 2/3`, `Svelte`, `SolidJS`, 甚至**原生纯 HTML**。
- **极致轻量**：打包体积仅 **~1KB**，且完全没有内存泄漏。
- **完美的 TypeScript 支持**：开箱即用，在 React 和 Vue 中都有极佳的 Props 代码提示。
## 📦 安装 (Install)
```shell
npm install react-vue-loading
# or
yarn add react-vue-loading
# or
pnpm add react-vue-loading
```
## 🔧 引入 (Import)
```js
```
## 💻 使用指南 (Usage)
由于底层架构的升级，你**不再需要**像以前那样配置 `Vue.use()`，直接引入即可使用！
### ⚛️ 在 React 中使用
```tsx
import React from "react";
import RVLoading from "react-vue-loading";
export default function App() {
return (
React Example
);
}
```
### 💚 在 Vue 3 / Vue 2 中使用
```vue
Vue Example
import RVLoading from "react-vue-loading";
</>
```
> **💡 Vue 用户小贴士**: 如果在控制台看到 `Failed to resolve component...` 警告，这是因为 Vue 试图解析原生 Web Component。你可以在 `vite.config.ts` 或 `vue.config.js` 中配置 `compilerOptions.isCustomElement = tag => tag === 'rv-loading'` 即可消除警告。
### 🌐 在纯 HTML / 原生 JS 中使用
不仅是框架，在没有任何构建工具的原生网页中也能跑！
```html
<!DOCTYPE html>
<html>
<head>
<!-- 引入组件库即可自动注册 -->
<script type="module">
import "react-vue-loading";