vue-componnet-loading

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	交替展示和隐藏加载浮层

使用截图

普通样式

小团样式