代码演示
基本形式
<pop.confirm content="Are you sure delete this task?"><span>删除</span></pop.confirm>
var component = new NEKUI.Component({template: template});
事件(打开console, 查看输出)
<pop.confirm content="Are you sure delete this task?" on-ok={this.onok()}><button class="u-btn">保存提交</button></pop.confirm>
var component = new NEKUI.Component({template: template,onok: function() {console.log(123);}});
自定义模板(打开console, 查看输出)
<pop.confirm contentTemplate={testTemplate} on-ok={this.onok($event)}><button class="u-btn">保存提交</button></pop.confirm>
var component = new NEKUI.Component({template: template,config: function() {this.data.testTemplate = '<form.item ref="validation" title="备注" required row><ui.textarea required showTip=false value={remark} height=50 /></form.item>';},onok: function(json) {console.log(json.data.remark);console.log(json.sender);}});
位置
<div class="g-row"><pop.confirm content="pop.confirm箭头的位置在中间" placement="top"><ui.button title="top" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在左边" placement="topLeft"><ui.button title="topLeft" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在右边" placement="topRight"><ui.button title="topRight" /></pop.confirm></div><div class="g-row"><pop.confirm content="pop.confirm箭头的位置在中间" placement="left"><ui.button title="left" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在上边" placement="leftTop"><ui.button title="leftTop" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在下边" placement="leftBottom"><ui.button title="leftBottom" /></pop.confirm></div><div class="g-row"><pop.confirm content="pop.confirm箭头的位置在中间" placement="right"><ui.button title="right" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在上边" placement="rightTop"><ui.button title="rightTop" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在下边" placement="rightBottom"><ui.button title="rightBottom" /></pop.confirm></div><div class="g-row"><pop.confirm content="pop.confirm箭头的位置在中间" placement="bottom"><ui.button title="bottom" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在左边" placement="bottomLeft"><ui.button title="bottomLeft" /></pop.confirm><pop.confirm content="pop.confirm箭头的位置在右边" placement="bottomRight"><ui.button title="bottomRight" /></pop.confirm></div>
var component = new NEKUI.Component({template: template});
API
Classes
Events
PopConfirm
Kind: global classExtend: Component
new PopConfirm()
Param | Type | Default | Description |
---|---|---|---|
[options.data] | object | = 绑定属性 | |
[options.data.content] | string | => 弹窗中的文本内容 | |
[options.data.contentTemplate] | string | => 弹窗中的模板内容,回调中会将PopConfirm的data返回; | |
[options.data.placement] | string | "top" | => tips展示出的位置:top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom |
[options.data.okText] | string | "确定" | => ok按钮文案 |
[options.data.cancelText] | string | "取消" | => 取消按钮文案 |
[options.data.hideWhenScroll] | boolean | false | => window滚动时,是否影藏popover |
“ok 确定时触发”
Kind: event emittedProperties
Name | Type | Description |
---|---|---|
sender | object | 事件发送对象 |
data | object | popConfirm组件的数据 |
“cancel 取消时触发”
Kind: event emittedProperties
Name | Type | Description |
---|---|---|
sender | object | 事件发送对象 |
data | object | popConfirm组件的数据 |