val

vue-alert-loading

Vue 自定义弹窗加载组件

Showing:

Popularity

Downloads/wk

7

GitHub Stars

3

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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是否显示加载框Booleanfalse
title标题string请稍等!
titleColor标题颜色string
text显示文本string
textColor文本颜色string
direction显示方向stringrow/colcol
loadingDivWidth加载div的宽度Number260
originSize小圆点的个数Number6
originWidth小圆点的宽度Number6
originHeight小圆点的高度Number6
originBg小圆点的背景色string
originDivHeight小圆点父div高度Number40
originDivWidth小圆点父div宽度Number40
type加载框类型stringpic/originorigin
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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial