按钮 KLButton

按钮类型

主按钮、次按钮、弱按钮及不可点4种状态,主按钮在同一操作区只能出现一个

<kl-button type="primary" title="主按钮" />
<kl-button title="次按钮" />
<kl-button type="warning" title="警示按钮" />
<kl-button disabled={true} title="不可点" />

按钮尺寸

小按钮多用于表格中,kl-card中操作按钮也推荐使用小尺寸

<kl-button title="大型按钮" size="lg" />
<kl-button title="默认大小" />
<kl-button title="小型按钮" size="sm" />

图标按钮

按钮内含icon,主要用在表单外的操作按钮里

<kl-button type="primary" icon="add" title="添加" class="doc-iconBtn" />
<kl-button type="warning" icon="warning" title="驳回" class="doc-iconBtn" />
<kl-button icon="success" title="通过" class="doc-iconBtn" />
<kl-button icon="copy" title="复制" class="doc-iconBtn" />
### 加载中的按钮
<kl-button action="update" loading />

按钮下载文件

列表中经常遇到导出的需求,通过一个异步请求返回一个下载链接,然后直接触发下载;可以通过设置按钮的download属性来实现

<kl-button icon="download" download={download} title="导出文件" on-click={this.download()} />
var component = new NEKUI.Component({
template: template,
download: function() {
this.data.download = 'https://haitao.nos.netease.com/644804ef-91de-46cb-a663-cb90d9015122.jpg'
}
});

按钮与异步请求结合

实际业务中推荐在全局改动一下异步请求的方法,传入一个btn参数,请求开始的时候设置btn为loading的状态,结束的时候还原回来。点击一下查看效果

<kl-button title="保存" on-click={this.save($event)} />
var component = new NEKUI.Component({
template: template,
save: function(e) {
var url = '/example/api';
var opts = {
//传入btn
btn: e.sender
}
this.request(url, opts);
},
//模拟一个请求
request: function(url, opts) {
var btn = opts.btn;
var self = this;
//发送请求开始的时候设置按钮为loading状态
btn && btn.$update('loading', true);
self.$update('loading', true);
//2s后成功返回
setTimeout(function() {
self.$update('loading', false);
btn && btn.$update('loading', false);
self.data.loading = false;
self.$update();
}, 2000)
}
});

API

KLButton

KLButton

Param Type Default Description
[options.data] object = 绑定属性
[options.data.title] string "确定" => 按钮标题
[options.data.type] string "default" => 按钮样式, default/primary/warning
[options.data.size] string "normal" => 按钮大小, sm/lg
[options.data.icon] string => 按钮图标;
[options.data.link] string => 按钮的链接
[options.data.target] string "_self" => 按钮链接的打开方式
[options.data.download] string => 下载链接
[options.data.loading] boolean false => 是否正在加载
[options.data.disabled] boolean false => 禁止按钮
[options.data.class] boolean false => 样式扩展

click 按钮点击事件Event

Name Type Description
sender object 事件发送对象
e object event对象