加载 KLLoading

基本形式

加载 KLLoading - 图1

  1. <kl-button on-click="{this.showLoading()}" title="显示加载，2秒后隐藏" />
    <kl-loading visible={visible} />
  1. var component = new NEKUI.Component({
        template: template,
        config: function(data) {
            data.visible = false;
        },
        showLoading: function() {
            this.data.visible = true;
            setTimeout(function() {
              this.$update('visible', false);
            }.bind(this), 2000);
        }
    });

嵌入文档流

加载 KLLoading - 图2

  1. <kl-button on-click="{visible = !visible}" title="{visible ? '隐藏加载' : '显示加载'}" />
    <p>
        <kl-loading visible={visible} static />
    </p>
  1. var component = new NEKUI.Component({
        template: template,
        config: function(data) {
            data.visible = false;
        }
    });

指定嵌入的父级元素

加载 KLLoading - 图3

  1. <kl-button on-click="{this.show()}" title="显示加载，2秒后隐藏" />
  1. var component = new NEKUI.Component({
        template: template,
        config: function(data) {
        },
        show: function() {
            var loading = new NEKUI.KLLoading({
                data: {
                    visible: true,
                    el: '#main'
                }
            });
            setTimeout(function() {
                loading.destroy();
            }, 2000);
        }
    });

API

KLLoading

KLLoading

ParamTypeDefaultDescription
[options.data]object= 绑定属性
[options.data.static]booleanfalse=> 是否嵌入文档流
[options.data.disabled]booleanfalse=> 是否禁用, 禁用后调用show和hide则无效
[options.data.visible]booleanfalse=> 是否显示
[options.data.class]string=> 补充class
[options.data.el]string=> 设置对话框要嵌入的父级元素，默认为document.body

.show() 显示组件method

.hide() 隐藏组件method

.loadingstatic property

ParamDescription
loading内部静态实例, 使用NEKUI.KLLoading的静态方法时,内部使用的是这个实例

.showstatic method

.hidestatic method