3.0.3 • Published 6 years ago
vue-alert-loading v3.0.3
vue-alert-loading
Vue 自定义弹窗加载组件
效果演示
安装
npm install vue-alert-loading --save简单使用
<template>
<div style="margin:0 auto;">
<button @click="handleClick">显示默认弹窗</button>
<vue-alert-loading :visible="visible"/>
</div>
</template>
<script>
import Vue from 'vue';
import VueAlertLoading from 'vue-alert-loading';
Vue.use(VueAlertLoading);
exprot default{
data:{
visible:false
},
methods:{
handleClick(){
this.visible = true;
setTimeout(()=>{
this.visible = false;
},3000);
}
}
}
</script>选项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示加载框 | Boolean | — | false |
| title | 标题 | string | — | 请稍等! |
| titleColor | 标题颜色 | string | — | — |
| text | 显示文本 | string | — | — |
| textColor | 文本颜色 | string | — | — |
| direction | 显示方向 | string | row/col | col |
| loadingDivWidth | 加载div的宽度 | Number | — | 260 |
| originSize | 小圆点的个数 | Number | — | 6 |
| originWidth | 小圆点的宽度 | Number | — | 6 |
| originHeight | 小圆点的高度 | Number | — | 6 |
| originBg | 小圆点的背景色 | string | — | — |
| originDivHeight | 小圆点父div高度 | Number | — | 40 |
| originDivWidth | 小圆点父div宽度 | Number | — | 40 |
| type | 加载框类型 | string | pic/origin | origin |
| loadingBg | 加载框背景色 | string | — | — |
| loadingMaskBg | 背景图层颜色 | string | — | — |
运行源码
# 克隆项目
git clone https://github.com/chenjunwen/vue-alert-loading.git
# 进入项目目录
cd vue-alert-loading
# 安装所需模块
npm install
# 启动项目，默认访问地址 localhost:8080
npm run dev
# 打包发布
npm run build