Dialog 对话框

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

基本用法

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

直接关闭当前dialog

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

ID

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

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

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

事件

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

关闭dialog不销毁实例

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

页面滚动锁定

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

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

图片弹窗

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

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

标签式写法

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

  1. <nut-dialog title="标签形式调用" :visible="dialogShow" @ok-btn-click="dialogShow=false" @cancel-btn-click="dialogShow=false" @close="dialogShow=false">
  2. <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
  3. </nut-dialog>
  1. export default {
  2. data() {
  3. return {
  4. dialogShow: false
  5. };
  6. }
  7. }

prop

字段说明类型默认值
id标识符,相同者共享一个实例String/Numbernut-dialog-default-id
canDestroy是否关闭弹窗时销毁实例Booleantrue
title标题String-
content内容,支持HTMLString-
type弹窗类型,值为image时为图片弹窗String-
closeOnClickModal点击蒙层是否关闭对话框Booleantrue
noFooter是否隐藏底部按钮栏Booleanfalse
noOkBtn是否隐藏确定按钮Booleanfalse
noCancelBtn是否隐藏取消按钮Booleanfalse
cancelBtnTxt取消按钮文案String”取 消“
okBtnTxt确定按钮文案String”确 定“
okBtnDisabled禁用确定按钮Booleanfalse
cancelAutoClose取消按钮是否默认关闭弹窗Booleantrue
textAlign文字对齐方向,可选值同css的text-alignString“center”
maskBgStyle遮罩层样式(颜色、透明度)String-
customClass增加一个自定义classString-
link点击图片跳转的Url,仅对图片类型弹窗有效String-
imgSrc图片Url,仅对图片类型弹窗有效String-
animation是否开启默认动效Booleantrue
closeOnPopstate是否在页面回退时自动关闭Booleanfalse
lockBgScroll锁定遮罩层滚动,不影响弹窗内部滚动(实验性质)会给body添加posotion:fix属性,注意Booleanfalse

事件

字段说明类型默认值
onOkBtn确定按钮回调Function-
onCancelBtn取消按钮回调Function-
onCloseBtn关闭按钮回调Function-
closeCallback关闭回调,任何情况关闭弹窗都会触发Function-
onClickImageLink图片链接点击回调,仅对图片类型弹窗有效Function-
closed关闭dialogFunction-

Dialog 对话框 - 图1