Vue-Component-Loading

使用示例

<script type="text/javascript" src="build/vue.min.js"></script>
<script type="text/javascript" src="build/standalone.js"></script>

<div id="bodyCont" :is-loading-show="false">
    <vue-loading toast-text="加载中" :is-show="isLoadingShow"></vue-loading>
    <input type="button" @click="isLoadingShow=true" value="显示加载浮层">
</div>

<script type="text/javascript">
    new Vue({
        el: '#bodyCont',
        props: {
            isLoadingShow: Boolean
        }
    });
</script>

Directive支持的属性(Props)

| 属性 | 支持的值 | |:----------|:----------------------------------------------------------------------------| | toast-text | 加载中文案，只有默认皮肤时生效 | | is-show | 是否展示加载浮层组件 | | skin | 加载浮层皮肤样式，默认为黑色菊花，设置为meituan时为小团动画 |

暴露的方法列表

| 方法名 | 产生的动作 | |:----------|:----------------------------------------------------------------------------| | show | 显示加载浮层 | | hide | 隐藏加载浮层 | | toggle | 交替展示和隐藏加载浮层 |

监听的事件列表

| 事件名称 | 产生的动作 | |:----------|:----------------------------------------------------------------------------| | vue-loading-show | 显示加载浮层 | | vue-loading-hide | 隐藏加载浮层 | | vue-loading-toggle | 交替展示和隐藏加载浮层 |

使用截图

普通样式

小团样式