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