代码演示

基本形式

<jr-pop-confirm content="Are you sure delete this task?"><span>删除</span></jr-pop-confirm>
var component = new JRUI.Component({
    template: template
});

事件(打开console, 查看输出)

<jr-pop-confirm content="Are you sure delete this task?" on-ok={this.onok()}>
    <button class="u-btn">保存提交</button>
</jr-pop-confirm>
var component = new JRUI.Component({
    template: template,
    onok: function() {
        console.log(123);
    }
});

自定义模板(打开console, 查看输出)

<jr-pop-confirm contentTemplate={testTemplate} on-ok={this.onok($event)}>
    <button class="u-btn">保存提交</button>
</jr-pop-confirm>
var component = new JRUI.Component({
    template: template,
    config: function() {
        this.data.testTemplate = '<jr-textarea required showTip=false value={remark} height=50 />';
    },
    onok: function(json) {
        console.log(json.data.remark);
        console.log(json.sender);
    }
});

位置

<div class="g-row">
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在中间" placement="top"><jr-button title="top" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在左边" placement="topLeft"><jr-button title="topLeft" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在右边" placement="topRight"><jr-button title="topRight" /></jr-pop-confirm>
</div>
<div class="g-row">
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在中间" placement="left"><jr-button title="left" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在上边" placement="leftTop"><jr-button title="leftTop" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在下边" placement="leftBottom"><jr-button title="leftBottom" /></jr-pop-confirm>
</div>
<div class="g-row">
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在中间" placement="right"><jr-button title="right" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在上边" placement="rightTop"><jr-button title="rightTop" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在下边" placement="rightBottom"><jr-button title="rightBottom" /></jr-pop-confirm>
</div>
<div class="g-row">
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在中间" placement="bottom"><jr-button title="bottom" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在左边" placement="bottomLeft"><jr-button title="bottomLeft" /></jr-pop-confirm>
    <jr-pop-confirm content="jr-pop-confirm箭头的位置在右边" placement="bottomRight"><jr-button title="bottomRight" /></jr-pop-confirm>
</div>
var component = new JRUI.Component({
    template: template
});

API

Classes

JRPopConfirm

Constants

dom

JRPopConfirm 气泡弹框

Events

“ok 确定时触发”
“cancel 取消时触发”

JRPopConfirm

Kind: global class
Extend: Component

new JRPopConfirm()

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

dom

JRPopConfirm 气泡弹框

Kind: global constant

Author: ziane(zianecui@gmail.com)

“ok 确定时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
data object popConfirm组件的数据

“cancel 取消时触发”

Kind: event emitted
Properties

Name Type Description
sender object 事件发送对象
data object popConfirm组件的数据
← 通知