Dialog 对话框

模态对话框，在浮层中显示，引导用户进行相关操作，支持图片对话框。

基本用法

this.$dialog({
  title: "确定删除此订单？",
  content: "删除后将从你的记录里消失，无法找回"
});

直接关闭当前dialog

this.$dialog.closed()  //可以直接关闭当前dialog

ID

同一个页面中，id相同的Dialog的DOM只会同时存在一个，不指定id时，id的默认值为nut-dialog-default-id。

this.$dialog({
  id:'my-dialog',
  title: "确定删除此订单？",
  content: "删除后将从你的记录里消失，无法找回"
});

如果希望同时弹出多个Dialog，请给不同的Dialog设置不同的id。

事件

this.$dialog({
        title: "自定义Dialog标题",
        content: "小屏或移动端浏览效果最佳",
        closeBtn:true,  //显式右上角关闭按钮
        onOkBtn(event) {  //确定按钮点击事件
          alert("okBtn");
          this.close(); //关闭对话框
        },
        onCancelBtn(event) {  //取消按钮点击事件，默认行为关闭对话框
          alert("cancelBtn");
          //return false;  //阻止默认“关闭对话框”的行为
        },
        onCloseBtn(event) { //右上角关闭按钮点击事件
          alert("closeBtn");
          //return false;  //阻止默认“关闭对话框”的行为
        },
        closeCallback(target) {
          alert("will close");  //对话框关闭回调函数，无论通过何种方式关闭都会触发
        }
});

关闭dialog不销毁实例

 this.$dialog({
        animation: false, //禁用弹出动效
        title: "注册说明",
        canDestroy:false,
        content:
          "原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。"
      });

页面滚动锁定

lockBgScroll 值设为 true 时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。

this.$dialog({
        title: "背景滚动锁定",
        lockBgScroll:true,
        content:"弹窗弹出后，页面滚动锁止。在窗体和遮罩层上滑动时，页面不再跟随滚动。"
});

图片弹窗

type 值为 image 时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发 onClickImageLink 事件，返回false可阻止默认的跳转链接行为。

this.$dialog({
  type:"image", //设置弹窗类型为”图片弹窗“
  link:"http://m.jd.com", //点击图片跳转的Url
  imgSrc:"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg", //图片Url
  onClickImageLink:function(){ //图片点击事件，默认行为是跳转Url
    console.log(this); //this指向该Dialog实例
    return false;  //返回false可阻止默认的链接跳转行为
  }
});

标签式写法

如果Dialog内容有复杂交互，可使用Dialog的标签式用法。注意标签使用的时候，属性不建议使用驼峰，推荐使用如下写法

<nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
    <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
</nut-dialog>

export default {
  data() {
    return {
      dialogShow: false
    };
  }
}

prop

事件