代码演示

基本形式

确认提示 pop.confirm - 图1

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

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

确认提示 pop.confirm - 图2

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

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

确认提示 pop.confirm - 图3

  1. <pop.confirm contentTemplate={testTemplate} on-ok={this.onok($event)}>
    <button class="u-btn">保存提交</button>
    </pop.confirm>
  1. 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);
    }
    });

位置

确认提示 pop.confirm - 图4

  1. <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>
  1. var component = new NEKUI.Component({
    template: template
    });

API

Classes

Events

PopConfirm

Kind: global classExtend: Component

new PopConfirm()

ParamTypeDefaultDescription
[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]booleanfalse=> window滚动时,是否影藏popover

“ok 确定时触发”

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
dataobjectpopConfirm组件的数据

“cancel 取消时触发”

Kind: event emittedProperties

NameTypeDescription
senderobject事件发送对象
dataobjectpopConfirm组件的数据