@58fe/p5/src/doc/loading.md

pc端vue组件

<script>
	module.exports = {
        methods:{
            showLoading(){
                this.show = true;
                setTimeout(()=>{
                    this.show = false;
                },2000)
            },
			showBallTypeLoading() {
				this.showBallType = true;
                setTimeout(()=>{
                    this.showBallType = false;
                },2000)
			},
			showBowTypeLoading() {
				this.showBowType = true;
                setTimeout(()=>{
                    this.showBowType = false;
                },2000)
			},
			showRectTypeLoading() {
				this.showRectType = true;
                setTimeout(()=>{
                    this.showRectType = false;
                },2000)
			},
			showRotatePlaneTypeLoading() {
				this.showRotatePlaneType = true;
                setTimeout(()=>{
                    this.showRotatePlaneType = false;
                },2000)
			},
            showPluginLoading(){
                this.$p5.loading().show();
                setTimeout(()=>{
                    this.$p5.loading().hide();
                },2000)
			},
            showPluginBallTypeLoading(){
                this.$p5.loading({type:'ball'}).show();
                setTimeout(()=>{
                    this.$p5.loading().hide();
                },2000)
            }
        },
		data() {
			return {
                show: false,
                showPlugin:false,
				showBallType: false,
				showBowType: false,
				showRectType: false,
				showRotatePlaneType: false
			};
		}
	}
</script>

## Loading

### 引入
```javascript
import { loading } from '@58fe/p5';
```

### 基本用法

:::demo 按钮

```html
<btn @click="showLoading()">默认情况</btn>
<loading v-model="show"></loading>

<script>
export default {
	methods: {
		showLoading(){
            this.show = true;
            setTimeout(()=>{
                this.show = false;
            },2000)
        },
        showLoadingNotMask(){
            this.showNotMask = true;
            setTimeout(()=>{
                this.showNotMask = false;
            },2000)
        }
    },
    data() {
		return {
			show: false,
			isMask:false,
			showNotMask: false
		};
	}
};
</script>
```

:::

### 各种类型

:::demo 按钮

```html
<btn @click="showBallTypeLoading()">小球类型</btn>
<btn @click="showBowTypeLoading()">圆环类型</btn>
<btn @click="showRectTypeLoading()">长方条类型</btn>
<btn @click="showRotatePlaneTypeLoading()">旋转的平面体类型</btn>

<loading v-model="showBallType" type="ball"></loading>
<loading v-model="showBowType" type="bow"></loading>
<loading v-model="showRectType" type="rect"></loading>
<loading v-model="showRotatePlaneType" type="rotatePlane"></loading>

<script>
	module.exports = {
        methods:{
            showLoading(){
                this.show = true;
                setTimeout(()=>{
                    this.show = false;
                },2000)
            },
			showBallTypeLoading() {
				this.showBallType = true;
                setTimeout(()=>{
                    this.showBallType = false;
                },2000)
			},
			showBowTypeLoading() {
				this.showBowType = true;
                setTimeout(()=>{
                    this.showBowType = false;
                },2000)
			},
			showRectTypeLoading() {
				this.showRectType = true;
                setTimeout(()=>{
                    this.showRectType = false;
                },2000)
			},
			showRotatePlaneTypeLoading() {
				this.showRotatePlaneType = true;
                setTimeout(()=>{
                    this.showRotatePlaneType = false;
                },2000)
			},
            showPluginLoading(){
                this.$p5.loading.show();
                setTimeout(()=>{
                    this.$p5.loading.hide();
                },2000)
            }
        },
		data() {
			return {
                show: false,
                showPlugin:false,
				isMask: false,
				showBallType: false,
				showBowType: false,
				showRectType: false,
				showRotatePlaneType: false
			};
		}
	}
</script>
```
:::

### 插件使用

```javascript
import { loadingPlugin } from '@58fe/p5';
Vue.use(loadingPlugin);
```

:::demo 按钮

```html
<btn @click="showPluginLoading()">默认插件</btn>
<btn @click="showPluginBallTypeLoading()">小球类型插件</btn>

<script>
export default {
	methods: {
		showPluginLoading(){
            Vue.$p5.loading().show();
            setTimeout(()=>{
               Vue.$p5.loading().hide();
            },2000)
		},
		showPluginBallTypeLoading(){
			this.$p5.loading({type:'ball'}).show();
			setTimeout(()=>{
				this.$p5.loading().hide();
			},2000)
		}
}
};
</script>
```

:::

### 参数

| 参数         | 说明         | 类型    | 可选值  | 默认值  |
| ------------ | ------------ | ------- | ------- | ------- |
| type         | loading 类型 | String  | default/ball/bow/rect/rotatePlane | default |
| othClassName | 其他样式     | String  | ——      | ——      |