https://github.com/yujinjin/vue-loading-spin
vue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。
https://github.com/yujinjin/vue-loading-spin
component loading spin svg vue2 webapck3
Last synced: 11 months ago
JSON representation
vue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。
- Host: GitHub
- URL: https://github.com/yujinjin/vue-loading-spin
- Owner: yujinjin
- Created: 2018-07-04T03:24:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-12-06T03:44:18.000Z (over 4 years ago)
- Last Synced: 2025-07-29T08:44:24.462Z (11 months ago)
- Topics: component, loading, spin, svg, vue2, webapck3
- Language: Vue
- Homepage: https://yujinjin.github.io/vue-loading-spin/
- Size: 155 KB
- Stars: 14
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## vue-loading-spin
vue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。
## 运行项目
clone项目到本地，进入项目文件夹，安装依赖
```javascript
git clone https://github.com/yujinjin/vue-loading-spin.git
cd loading
npm install
```
运行demo，会自动打开浏览器地址运行
```javascript
npm run demo
```
编译打包项目
```javascript
npm run compile
```
## NPM
```javascript
npm install vue-loading-spin
```
## 依赖
- VUE
## 使用
作为插件
```javascript
import Vue from 'vue'
import Loading from 'vue-loading-spin'
import 'vue-loading-spin/dist/loading.css'
// VUE use
Vue.use(Loading);
// or with options
Vue.use(Loading, {
isFixed: true, // 是否固定位置，默认为true
isComponent: true, // 是否自动注册为全局组件，如果设置为false就不会注册成组件来使用
isShowAnimation: true // 是否显示动画效果，默认为true
});
```
```
作为JS 对象
```javascript
import Loading from 'vue-loading-spin'
import 'vue-loading-spin/dist/loading.css'
let loading = Loading.get({});
loading.showLoading();
loading.hideLoading();
loading.showNetTimeout();
```
## 配置选项
名称 | 描述 | 默认值 | 可选项
---|---|---|---
`isFixed` | 是否生成绝对定位的元素，相对于浏览器窗口进行定位。 | 全局属性时是：true,全局组件时是：false | `Boolean`
`isShowMask` | 是否显示遮罩背景 | false | `Boolean`
`autoRefresh` | 是否（点击）自动刷新 | false | `Boolean`
`isShowAnimation` | 是否显示动画（fadeIn）效果 | false | `Boolean`
`indicatorText` | 提示文案 | 加载中... | `String`
## API
###### 1. 默认实例方法
默认实例方法，有三个参数，可以一个都不传。默认三个参数：isShowMask = false, autoRefresh=false, indicatorText="加载中..."
```javascript
this.$showLoading();
```
示例：
###### 2. 带有白色背景
有白色背景的遮罩层
```javascript
this.$showLoading(true);
```
示例：
###### 3. 加载超时
网络请求超时，轻触自动刷新。默认实例方法有三个参数，也可以一个都不穿。默认三个参数：isShowMask = true, autoRefresh=true, indicatorText="网络请求超时啦，轻触自动刷新"
```javascript
this.$showNetTimeout();
```
示例：
###### 4. 自定义组件
作为组件来使用，其配置见文档中的“配置选项”。
```html
```
示例：
###### 5. 隐藏
隐藏加载的实例方法。
```javascript
this.$hideLoading()
```
## 弹窗dom结构
为了了解弹窗dom结构，这里把弹窗的源码贴出来，方便样式定义。
```html
```
## 最后
- 如果喜欢一定要 star哈!!!（谢谢!!）
- 如果有意见和问题 请在 lssues提出，我会在线解答。