确认提示 KLPopConfirm

基本形式

气泡弹框，主要用于备注或者更多信息提示。

<kl-pop-confirm content="Are you sure delete this task?">
    <kl-button title="删除"></kl-button>
</kl-pop-confirm>

配置属性content

设置气泡信息提示内容，一般为简单文本提示。

<kl-pop-confirm content="我是设置的气泡信息内容">
    <kl-button title="Content"></kl-button>
</kl-pop-confirm>

配置属性contentTemplate

气泡信息提示内容配置，可以自定义html格式

<kl-pop-confirm contentTemplate="<div><span class='u-red-font'>红色字体</span><span>普通字体</span></div>">
    <kl-button title="contentTemplate"></kl-button>
</kl-pop-confirm>

配置属性placement

气泡提示信息展示位置配置(箭头的位置)，取值有top、topLeft、topRight、left、leftTop、 leftBottom、right、rightTop、rightBottom、bottom、bottomLeft、 bottomRight。默认取值为top

<div class="g-row">
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在中间" placement="top">
        <kl-button title="top" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在左边" placement="topLeft">
        <kl-button title="topLeft" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在右边" placement="topRight">
        <kl-button title="topRight" />
    </kl-pop-confirm>
</div>
<div class="g-row">
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在中间" placement="left">
        <kl-button title="left" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在上边" placement="leftTop">
        <kl-button title="leftTop" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在下边" placement="leftBottom">
        <kl-button title="leftBottom" />
    </kl-pop-confirm>
</div>
<div class="g-row">
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在中间" placement="right">
        <kl-button title="right" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在上边" placement="rightTop">
        <kl-button title="rightTop" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在下边" placement="rightBottom">
        <kl-button title="rightBottom" />
    </kl-pop-confirm>
</div>
<div class="g-row">
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在中间" placement="bottom">
        <kl-button title="bottom" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在左边" placement="bottomLeft">
        <kl-button title="bottomLeft" />
    </kl-pop-confirm>
    <kl-pop-confirm content="kl-pop-confirm箭头的位置在右边" placement="bottomRight">
        <kl-button title="bottomRight" />
    </kl-pop-confirm>
</div>

配置属性hideWhenScroll

通过设置hideWhenScroll属性，控制window滚动时,是否隐藏popover,默认为false，不隐藏。

<kl-pop-confirm content="拖动页面滚动看效果【弹出框会关闭】" hideWhenScroll="{true}" >
    <kl-button title="hideWhenScroll:true"></kl-button>
</kl-pop-confirm>
<kl-pop-confirm content="拖动页面滚动看效果【弹出框不会关闭】">
    <kl-button title="hideWhenScroll:false"></kl-button>
</kl-pop-confirm>

配置属性cancelText

设置气泡提示信息，取消按钮的文本提示，默认为取消

<kl-pop-confirm content="Are you sure delete this task?" cancelText="{'cancelText'}">
    <kl-button title="cancelText">cancelText</kl-button>
</kl-pop-confirm>

配置属性okText

设置气泡提示信息，OK按钮的文本提示，默认为确定

<kl-pop-confirm content="Are you sure delete this task?" okText="{'okText'}">
    <kl-button title="okText"></kl-button>
</kl-pop-confirm>

ok方法

设置点击ok按钮调用的方法，默认会关闭提示框。通过on-ok绑定事件，可以通过$event传递消息事件对象。on-ok绑定方法调用之后会派发ok事件以及 参数$event{sender, data}其中sender为派发事件本身，data是相关数据

手动设置方法之后，提示框不会自动关闭，需手动调用关闭事件sender.destory()

<kl-pop-confirm contentTemplate="{testTemplate}" on-ok="{this.submit($event)}" okText="{'提交'}">
    <kl-button title="保存提交"></kl-button>
</kl-pop-confirm>
var component = new NEKUI.Component({
    template: template,
    config: function() {
        this.data.testTemplate = '<kl-textarea required showTip=false value={remark} height=50 />';
    },
    submit: function(evt) {
        if(evt.data.remark) {
            NEKUI.KLNotify.info(evt.data.remark)
        } else {
            NEKUI.KLNotify.info('ok按钮点击事件,内容为空');
        }
        // 手动关闭
        evt.sender.destroy();
    }
});

cancel方法

设置点击cancel按钮调用的方法，默认会关闭提示框。通过on-cancel绑定事件，可以通过$event传递消息事件对象。 on-cancel绑定方法调用之后会派发cancel事件以及参数$event{sender, data}其中sender为派发事件本身，data是相关数据。

手动设置方法之后，提示框不会自动关闭，需手动调用关闭事件

<kl-pop-confirm contentTemplate="{testTemplate}" on-cancel="{this.reset($event)}" cancelText="{'重置'}">
    <kl-button title="重置内容"></kl-button>
</kl-pop-confirm>
var component = new NEKUI.Component({
    template: template,
    config: function() {
        this.data.testTemplate = '<kl-textarea required showTip=false value={remark} height=50 />';
    },
    reset: function(evt) {
        // 手动关闭
        evt.sender.destroy();
    }
});

API

KLPopConfirm

KLPopConfirm

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 确定时触发Event

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

cancel 取消时触发Event

Name Type Description
sender object 事件发送对象
data object popConfirm组件的数据
通知
想让文档更完善？ 来 GitHub 提个 PR 吧！