(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{1231:function(s,t,a){},1327:function(s,t,a){"use strict";var n=a(1231);a.n(n).a},1424:function(s,t,a){"use strict";a.r(t);var n=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>\n    <a-modal title="Title" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel">\n      <p>{{ModalText}}</p>\n    </a-modal>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        ModalText: 'Content of the modal',\n        visible: false,\n        confirmLoading: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        this.ModalText = 'The modal will be closed after two seconds';\n        this.confirmLoading = true;\n        setTimeout(() => {\n          this.visible = false;\n          this.confirmLoading = false;\n        }, 2000);\n      },\n      handleCancel(e) {\n        console.log('Clicked cancel button');\n        this.visible = false;\n      },\n    },\n  };\n",style:null,us:"\n#### Asynchronously close\nAsynchronously close a modal dialog when a user clicked OK button, for example,\nyou can use this pattern when you submit a form.\n",cn:"\n#### 异步关闭\n点击确定后异步关闭对话框，例如提交表单。\n",sourceCode:'<template>\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>\n    <a-modal\n      title="Title"\n      :visible="visible"\n      @ok="handleOk"\n      :confirmLoading="confirmLoading"\n      @cancel="handleCancel"\n    >\n      <p>{{ModalText}}</p>\n    </a-modal>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        ModalText: \'Content of the modal\',\n        visible: false,\n        confirmLoading: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        this.ModalText = \'The modal will be closed after two seconds\';\n        this.confirmLoading = true;\n        setTimeout(() => {\n          this.visible = false;\n          this.confirmLoading = false;\n        }, 2000);\n      },\n      handleCancel(e) {\n        console.log(\'Clicked cancel button\');\n        this.visible = false;\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-button",{attrs:{type:"primary"},on:{click:s.showModal}},[s._v("Open Modal with async logic")]),s._v(" "),a("a-modal",{attrs:{title:"Title",visible:s.visible,confirmLoading:s.confirmLoading},on:{ok:s.handleOk,cancel:s.handleCancel}},[a("p",[s._v(s._s(s.ModalText))])])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"异步关闭"}},[s._v("异步关闭 "),a("a",{staticClass:"anchor",attrs:{href:"#异步关闭"}},[s._v("#")])]),s._v(" "),a("p",[s._v("点击确定后异步关闭对话框，例如提交表单。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Asynchronously-close"}},[s._v("Asynchronously close "),a("a",{staticClass:"anchor",attrs:{href:"#Asynchronously-close"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Asynchronously close a modal dialog when a user clicked OK button, for example,"),a("br"),s._v("\nyou can use this pattern when you submit a form."),a("br")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showModal"')]),s._v(">")]),s._v("Open Modal with async logic"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOk"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":confirmLoading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"confirmLoading"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@cancel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCancel"')]),s._v("\n    >")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),a("span",[s._v("{{")]),s._v("ModalText"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ModalText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Content of the modal'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("confirmLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      },\n      handleOk(e) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ModalText = "),a("span",{staticClass:"hljs-string"},[s._v("'The modal will be closed after two seconds'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".confirmLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".confirmLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(");\n      },\n      handleCancel(e) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Clicked cancel button'")]),s._v(");\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{ModalText:"Content of the modal",visible:!1,confirmLoading:!1}},methods:{showModal:function(){this.visible=!0},handleOk:function(s){var t=this;this.ModalText="The modal will be closed after two seconds",this.confirmLoading=!0,setTimeout((function(){t.visible=!1,t.confirmLoading=!1}),2e3)},handleCancel:function(s){console.log("Clicked cancel button"),this.visible=!1}}},l=a(31),o=Object(l.a)(e,n,[],!1,null,null,null);o.options.__file="components/modal/demo/async.md";var v=o.exports,i=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal</a-button>\n    <a-modal title="Basic Modal" v-model="visible" @ok="handleOk">\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        console.log(e);\n        this.visible = false;\n      },\n    },\n  };\n",style:null,us:"\n#### Basic\nBasic modal.\n",cn:"\n#### 基本\n第一个对话框。\n",sourceCode:'<template>\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal</a-button>\n    <a-modal title="Basic Modal" v-model="visible" @ok="handleOk">\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        console.log(e);\n        this.visible = false;\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-button",{attrs:{type:"primary"},on:{click:s.showModal}},[s._v("Open Modal")]),s._v(" "),a("a-modal",{attrs:{title:"Basic Modal"},on:{ok:s.handleOk},model:{value:s.visible,callback:function(t){s.visible=t},expression:"visible"}},[a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")])])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本"}},[s._v("基本 "),a("a",{staticClass:"anchor",attrs:{href:"#基本"}},[s._v("#")])]),s._v(" "),a("p",[s._v("第一个对话框。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Basic"}},[s._v("Basic "),a("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Basic modal.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showModal"')]),s._v(">")]),s._v("Open Modal"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Basic Modal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOk"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      },\n      handleOk(e) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(e);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};i._withStripped=!0;var _={data:function(){return{visible:!1}},methods:{showModal:function(){this.visible=!0},handleOk:function(s){console.log(s),this.visible=!1}}},c=Object(l.a)(_,i,[],!1,null,null,null);c.options.__file="components/modal/demo/basic.md";var r=c.exports,d=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <a-button @click="showConfirm">\n    Confirm\n  </a-button>\n',script:"\n  export default {\n    methods: {\n      showConfirm() {\n        this.$confirm({\n          title: 'Do you want to delete these items?',\n          content: 'When clicked the OK button, this dialog will be closed after 1 second',\n          onOk() {\n            return new Promise((resolve, reject) => {\n              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);\n            }).catch(() => console.log('Oops errors!'));\n          },\n          onCancel() {},\n        });\n      },\n    },\n  };\n",style:null,us:"\n#### Confirmation modal dialog use promise\nTo use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to\ndelay closing the dialog.\n",cn:"\n#### 确认对话框(promise)\n使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭\n",sourceCode:"<template>\n  <a-button @click=\"showConfirm\">\n    Confirm\n  </a-button>\n</template>\n<script>\n  export default {\n    methods: {\n      showConfirm() {\n        this.$confirm({\n          title: 'Do you want to delete these items?',\n          content: 'When clicked the OK button, this dialog will be closed after 1 second',\n          onOk() {\n            return new Promise((resolve, reject) => {\n              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);\n            }).catch(() => console.log('Oops errors!'));\n          },\n          onCancel() {},\n        });\n      },\n    },\n  };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-button",{on:{click:s.showConfirm}},[s._v("\n    Confirm\n  ")])],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"确认对话框(promise)"}},[s._v("确认对话框(promise) "),a("a",{staticClass:"anchor",attrs:{href:"#确认对话框(promise)"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("confirm()")]),s._v(" 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Confirmation-modal-dialog-use-promise"}},[s._v("Confirmation modal dialog use promise "),a("a",{staticClass:"anchor",attrs:{href:"#Confirmation-modal-dialog-use-promise"}},[s._v("#")])]),s._v(" "),a("p",[s._v("To use "),a("code",[s._v("confirm()")]),s._v(" to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to"),a("br"),s._v("\ndelay closing the dialog."),a("br")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showConfirm"')]),s._v(">")]),s._v("\n    Confirm\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Do you want to delete these items?'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'When clicked the OK button, this dialog will be closed after 1 second'")]),s._v(",\n          onOk() {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Promise")]),s._v("("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("resolve, reject")]),s._v(") =>")]),s._v(" {\n              setTimeout("),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(" ? resolve : reject, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n            }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Oops errors!'")]),s._v("));\n          },\n          onCancel() {},\n        });\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};d._withStripped=!0;var p={methods:{showConfirm:function(){this.$confirm({title:"Do you want to delete these items?",content:"When clicked the OK button, this dialog will be closed after 1 second",onOk:function(){return new Promise((function(s,t){setTimeout(Math.random()>.5?s:t,1e3)})).catch((function(){return console.log("Oops errors!")}))},onCancel:function(){}})}}},h=Object(l.a)(p,d,[],!1,null,null,null);h.options.__file="components/modal/demo/confirm-promise.md";var m=h.exports,u=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button @click="showConfirm">\n      Confirm\n    </a-button>\n    <a-button @click="showDeleteConfirm" type="dashed">\n      Delete\n    </a-button>\n    <a-button @click="showPropsConfirm" type="dashed">\n      With extra props\n    </a-button>\n  </div>\n',script:"\n  export default {\n    methods: {\n      showConfirm() {\n        this.$confirm({\n          title: 'Do you Want to delete these items?',\n          content: h => <div style=\"color:red;\">Some descriptions</div>,\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n          class: 'test',\n        });\n      },\n\n      showDeleteConfirm() {\n        this.$confirm({\n          title: 'Are you sure delete this task?',\n          content: 'Some descriptions',\n          okText: 'Yes',\n          okType: 'danger',\n          cancelText: 'No',\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n        });\n      },\n      showPropsConfirm() {\n        this.$confirm({\n          title: 'Are you sure delete this task?',\n          content: 'Some descriptions',\n          okText: 'Yes',\n          okType: 'danger',\n          okButtonProps: {\n            props: { disabled: true },\n          },\n          cancelText: 'No',\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n        });\n      },\n    },\n  };\n",style:null,us:"\n#### Confirmation modal dialog\nTo use `confirm()` to popup a confirmation modal dialog.\n",cn:"\n#### 确认对话框\n使用 `confirm()` 可以快捷地弹出确认框。\n",sourceCode:"<template>\n  <div>\n    <a-button @click=\"showConfirm\">\n      Confirm\n    </a-button>\n    <a-button @click=\"showDeleteConfirm\" type=\"dashed\">\n      Delete\n    </a-button>\n    <a-button @click=\"showPropsConfirm\" type=\"dashed\">\n      With extra props\n    </a-button>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      showConfirm() {\n        this.$confirm({\n          title: 'Do you Want to delete these items?',\n          content: h => <div style=\"color:red;\">Some descriptions</div>,\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n          class: 'test',\n        });\n      },\n\n      showDeleteConfirm() {\n        this.$confirm({\n          title: 'Are you sure delete this task?',\n          content: 'Some descriptions',\n          okText: 'Yes',\n          okType: 'danger',\n          cancelText: 'No',\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n        });\n      },\n      showPropsConfirm() {\n        this.$confirm({\n          title: 'Are you sure delete this task?',\n          content: 'Some descriptions',\n          okText: 'Yes',\n          okType: 'danger',\n          okButtonProps: {\n            props: { disabled: true },\n          },\n          cancelText: 'No',\n          onOk() {\n            console.log('OK');\n          },\n          onCancel() {\n            console.log('Cancel');\n          },\n        });\n      },\n    },\n  };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("div",[a("a-button",{on:{click:s.showConfirm}},[s._v("\n      Confirm\n    ")]),s._v(" "),a("a-button",{attrs:{type:"dashed"},on:{click:s.showDeleteConfirm}},[s._v("\n      Delete\n    ")]),s._v(" "),a("a-button",{attrs:{type:"dashed"},on:{click:s.showPropsConfirm}},[s._v("\n      With extra props\n    ")])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"确认对话框"}},[s._v("确认对话框 "),a("a",{staticClass:"anchor",attrs:{href:"#确认对话框"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("confirm()")]),s._v(" 可以快捷地弹出确认框。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Confirmation-modal-dialog"}},[s._v("Confirmation modal dialog "),a("a",{staticClass:"anchor",attrs:{href:"#Confirmation-modal-dialog"}},[s._v("#")])]),s._v(" "),a("p",[s._v("To use "),a("code",[s._v("confirm()")]),s._v(" to popup a confirmation modal dialog.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showConfirm"')]),s._v(">")]),s._v("\n      Confirm\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showDeleteConfirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dashed"')]),s._v(">")]),s._v("\n      Delete\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showPropsConfirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dashed"')]),s._v(">")]),s._v("\n      With extra props\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Do you Want to delete these items?'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color:red;"')]),s._v(">")]),s._v("Some descriptions"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")])]),s._v(",\n          onOk() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(");\n          },\n          onCancel() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(");\n          },\n          "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'test'")]),s._v(",\n        });\n      },\n\n      showDeleteConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure delete this task?'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Some descriptions'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yes'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okType")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No'")]),s._v(",\n          onOk() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(");\n          },\n          onCancel() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(");\n          },\n        });\n      },\n      showPropsConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure delete this task?'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Some descriptions'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yes'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okType")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okButtonProps")]),s._v(": {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" },\n          },\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No'")]),s._v(",\n          onOk() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(");\n          },\n          onCancel() {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(");\n          },\n        });\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};u._withStripped=!0;var C={methods:{showConfirm:function(){this.$createElement;this.$confirm({title:"Do you Want to delete these items?",content:function(s){return s("div",{style:"color:red;"},["Some descriptions"])},onOk:function(){console.log("OK")},onCancel:function(){console.log("Cancel")},class:"test"})},showDeleteConfirm:function(){this.$confirm({title:"Are you sure delete this task?",content:"Some descriptions",okText:"Yes",okType:"danger",cancelText:"No",onOk:function(){console.log("OK")},onCancel:function(){console.log("Cancel")}})},showPropsConfirm:function(){this.$confirm({title:"Are you sure delete this task?",content:"Some descriptions",okText:"Yes",okType:"danger",okButtonProps:{props:{disabled:!0}},cancelText:"No",onOk:function(){console.log("OK")},onCancel:function(){console.log("Cancel")}})}}},j=Object(l.a)(C,u,[],!1,null,null,null);j.options.__file="components/modal/demo/confirm.md";var g=j.exports,f=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button type="primary" @click="showModal">\n      Open Modal with customized footer\n    </a-button>\n    <a-modal v-model="visible" title="Title" onOk="handleOk">\n      <template slot="footer">\n        <a-button key="back" @click="handleCancel">Return</a-button>\n        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">\n          Submit\n        </a-button>\n      </template>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        loading: false,\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        this.loading = true;\n        setTimeout(() => {\n          this.visible = false;\n          this.loading = false;\n        }, 3000);\n      },\n      handleCancel(e) {\n        this.visible = false;\n      },\n    },\n  };\n",style:null,us:"\n#### Customized Footer\nA more complex example which define a customized footer button bar,\nthe dialog will change to loading state after clicking submit button, when the loading is over,\nthe modal dialog will be closed.\nYou could set `footer` to `null` if you don't need default footer buttons.\n",cn:"\n#### 自定义页脚\n更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。\n不需要默认确定取消按钮时，你可以把 `footer` 设为 `null`。\n",sourceCode:'<template>\n  <div>\n    <a-button type="primary" @click="showModal">\n      Open Modal with customized footer\n    </a-button>\n    <a-modal v-model="visible" title="Title" onOk="handleOk">\n      <template slot="footer">\n        <a-button key="back" @click="handleCancel">Return</a-button>\n        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">\n          Submit\n        </a-button>\n      </template>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        this.loading = true;\n        setTimeout(() => {\n          this.visible = false;\n          this.loading = false;\n        }, 3000);\n      },\n      handleCancel(e) {\n        this.visible = false;\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-button",{attrs:{type:"primary"},on:{click:s.showModal}},[s._v("\n      Open Modal with customized footer\n    ")]),s._v(" "),a("a-modal",{attrs:{title:"Title",onOk:"handleOk"},model:{value:s.visible,callback:function(t){s.visible=t},expression:"visible"}},[a("template",{slot:"footer"},[a("a-button",{key:"back",on:{click:s.handleCancel}},[s._v("Return")]),s._v(" "),a("a-button",{key:"submit",attrs:{type:"primary",loading:s.loading},on:{click:s.handleOk}},[s._v("\n          Submit\n        ")])],1),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")])],2)],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义页脚"}},[s._v("自定义页脚 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义页脚"}},[s._v("#")])]),s._v(" "),a("p",[s._v("更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。"),a("br"),s._v("\n不需要默认确定取消按钮时，你可以把 "),a("code",[s._v("footer")]),s._v(" 设为 "),a("code",[s._v("null")]),s._v("。"),a("br")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Customized-Footer"}},[s._v("Customized Footer "),a("a",{staticClass:"anchor",attrs:{href:"#Customized-Footer"}},[s._v("#")])]),s._v(" "),a("p",[s._v("A more complex example which define a customized footer button bar,"),a("br"),s._v("\nthe dialog will change to loading state after clicking submit button, when the loading is over,"),a("br"),s._v("\nthe modal dialog will be closed."),a("br"),s._v("\nYou could set "),a("code",[s._v("footer")]),s._v(" to "),a("code",[s._v("null")]),s._v(" if you don't need default footer buttons."),a("br"),a("br"),a("br")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showModal"')]),s._v(">")]),s._v("\n      Open Modal with customized footer\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("onOk")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOk"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"back"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCancel"')]),s._v(">")]),s._v("Return"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submit"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOk"')]),s._v(">")]),s._v("\n          Submit\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      },\n      handleOk(e) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      },\n      handleCancel(e) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};f._withStripped=!0;var b={data:function(){return{loading:!1,visible:!1}},methods:{showModal:function(){this.visible=!0},handleOk:function(s){var t=this;this.loading=!0,setTimeout((function(){t.visible=!1,t.loading=!1}),3e3)},handleCancel:function(s){this.visible=!1}}},y=Object(l.a)(b,f,[],!1,null,null,null);y.options.__file="components/modal/demo/footer.md";var k=y.exports,w=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button @click="info">Info</a-button>\n    <a-button @click="success">Success</a-button>\n    <a-button @click="error">Error</a-button>\n    <a-button @click="warning">Warning</a-button>\n  </div>\n',script:"\n  import { Modal } from 'ant-design-vue';\n  export default {\n    methods: {\n      info() {\n        const h = this.$createElement;\n        this.$info({\n          title: 'This is a notification message',\n          content: h('div', {}, [\n            h('p', 'some messages...some messages...'),\n            h('p', 'some messages...some messages...'),\n          ]),\n          onOk() {},\n        });\n      },\n\n      success() {\n        this.$success({\n          title: 'This is a success message',\n          // JSX support\n          content: (\n            <div>\n              <p>some messages...some messages...</p>\n              <p>some messages...some messages...</p>\n            </div>\n          ),\n        });\n      },\n\n      error() {\n        this.$error({\n          title: 'This is an error message',\n          content: 'some messages...some messages...',\n        });\n      },\n\n      warning() {\n        this.$warning({\n          title: 'This is a warning message',\n          content: 'some messages...some messages...',\n        });\n      },\n    },\n  };\n",style:null,us:"\n#### Information modal dialog\nIn the various types of information modal dialog, only one button to close dialog is provided.\n",cn:"\n#### 信息提示\n各种类型的信息提示，只提供一个按钮用于关闭。\n",sourceCode:"<template>\n  <div>\n    <a-button @click=\"info\">Info</a-button>\n    <a-button @click=\"success\">Success</a-button>\n    <a-button @click=\"error\">Error</a-button>\n    <a-button @click=\"warning\">Warning</a-button>\n  </div>\n</template>\n<script>\n  import { Modal } from 'ant-design-vue';\n  export default {\n    methods: {\n      info() {\n        const h = this.$createElement;\n        this.$info({\n          title: 'This is a notification message',\n          content: h('div', {}, [\n            h('p', 'some messages...some messages...'),\n            h('p', 'some messages...some messages...'),\n          ]),\n          onOk() {},\n        });\n      },\n\n      success() {\n        this.$success({\n          title: 'This is a success message',\n          // JSX support\n          content: (\n            <div>\n              <p>some messages...some messages...</p>\n              <p>some messages...some messages...</p>\n            </div>\n          ),\n        });\n      },\n\n      error() {\n        this.$error({\n          title: 'This is an error message',\n          content: 'some messages...some messages...',\n        });\n      },\n\n      warning() {\n        this.$warning({\n          title: 'This is a warning message',\n          content: 'some messages...some messages...',\n        });\n      },\n    },\n  };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("div",[a("a-button",{on:{click:s.info}},[s._v("Info")]),s._v(" "),a("a-button",{on:{click:s.success}},[s._v("Success")]),s._v(" "),a("a-button",{on:{click:s.error}},[s._v("Error")]),s._v(" "),a("a-button",{on:{click:s.warning}},[s._v("Warning")])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"信息提示"}},[s._v("信息提示 "),a("a",{staticClass:"anchor",attrs:{href:"#信息提示"}},[s._v("#")])]),s._v(" "),a("p",[s._v("各种类型的信息提示，只提供一个按钮用于关闭。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Information-modal-dialog"}},[s._v("Information modal dialog "),a("a",{staticClass:"anchor",attrs:{href:"#Information-modal-dialog"}},[s._v("#")])]),s._v(" "),a("p",[s._v("In the various types of information modal dialog, only one button to close dialog is provided.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("Error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Modal } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'ant-design-vue'")]),s._v(";\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      info() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a notification message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", {}, [\n            h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'some messages...some messages...'")]),s._v("),\n            h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'some messages...some messages...'")]),s._v("),\n          ]),\n          onOk() {},\n        });\n      },\n\n      success() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-comment"},[s._v("// JSX support")]),s._v("\n          content: (\n            "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n              "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some messages...some messages..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n              "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some messages...some messages..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")])]),s._v("\n          ),\n        });\n      },\n\n      error() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'some messages...some messages...'")]),s._v(",\n        });\n      },\n\n      warning() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$warning({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'some messages...some messages...'")]),s._v(",\n        });\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};w._withStripped=!0;var T={methods:{info:function(){var s=this.$createElement;this.$info({title:"This is a notification message",content:s("div",{},[s("p","some messages...some messages..."),s("p","some messages...some messages...")]),onOk:function(){}})},success:function(){var s=this.$createElement;this.$success({title:"This is a success message",content:s("div",[s("p",["some messages...some messages..."]),s("p",["some messages...some messages..."])])})},error:function(){this.$error({title:"This is an error message",content:"some messages...some messages..."})},warning:function(){this.$warning({title:"This is a warning message",content:"some messages...some messages..."})}}},x=Object(l.a)(T,w,[],!1,null,null,null);x.options.__file="components/modal/demo/info.md";var M=x.exports,O=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button type="primary" @click="showModal">Modal</a-button>\n    <a-modal title="Modal" v-model="visible" @ok="hideModal" okText="确认" cancelText="取消">\n      <p>Bla bla ...</p>\n      <p>Bla bla ...</p>\n      <p>Bla bla ...</p>\n    </a-modal>\n    <br/>\n    <br/>\n    <a-button @click="confirm">Confirm</a-button>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      hideModal() {\n        this.visible = false;\n      },\n      confirm() {\n        this.$confirm({\n          title: 'Confirm',\n          content: 'Bla bla ...',\n          okText: '确认',\n          cancelText: '取消',\n        });\n      },\n    },\n  };\n",style:null,us:"\n#### Internationalization\nTo customize the text of the buttons, you need to set `okText` and `cancelText` props.\n",cn:"\n#### 国际化\n设置 `okText` 与 `cancelText` 以自定义按钮文字。\n",sourceCode:'<template>\n  <div>\n    <a-button type="primary" @click="showModal">Modal</a-button>\n    <a-modal title="Modal" v-model="visible" @ok="hideModal" okText="确认" cancelText="取消">\n      <p>Bla bla ...</p>\n      <p>Bla bla ...</p>\n      <p>Bla bla ...</p>\n    </a-modal>\n    <br />\n    <br />\n    <a-button @click="confirm">Confirm</a-button>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      hideModal() {\n        this.visible = false;\n      },\n      confirm() {\n        this.$confirm({\n          title: \'Confirm\',\n          content: \'Bla bla ...\',\n          okText: \'确认\',\n          cancelText: \'取消\',\n        });\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-button",{attrs:{type:"primary"},on:{click:s.showModal}},[s._v("Modal")]),s._v(" "),a("a-modal",{attrs:{title:"Modal",okText:"确认",cancelText:"取消"},on:{ok:s.hideModal},model:{value:s.visible,callback:function(t){s.visible=t},expression:"visible"}},[a("p",[s._v("Bla bla ...")]),s._v(" "),a("p",[s._v("Bla bla ...")]),s._v(" "),a("p",[s._v("Bla bla ...")])]),s._v(" "),a("br"),s._v(" "),a("br"),s._v(" "),a("a-button",{on:{click:s.confirm}},[s._v("Confirm")])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"国际化"}},[s._v("国际化 "),a("a",{staticClass:"anchor",attrs:{href:"#国际化"}},[s._v("#")])]),s._v(" "),a("p",[s._v("设置 "),a("code",[s._v("okText")]),s._v(" 与 "),a("code",[s._v("cancelText")]),s._v(" 以自定义按钮文字。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Internationalization"}},[s._v("Internationalization "),a("a",{staticClass:"anchor",attrs:{href:"#Internationalization"}},[s._v("#")])]),s._v(" "),a("p",[s._v("To customize the text of the buttons, you need to set "),a("code",[s._v("okText")]),s._v(" and "),a("code",[s._v("cancelText")]),s._v(" props.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showModal"')]),s._v(">")]),s._v("Modal"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Modal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hideModal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("okText")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"确认"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("cancelText")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"取消"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Bla bla ..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Bla bla ..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Bla bla ..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"confirm"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      },\n      hideModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      confirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Confirm'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Bla bla ...'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("okText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确认'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n        });\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};O._withStripped=!0;var S={data:function(){return{visible:!1}},methods:{showModal:function(){this.visible=!0},hideModal:function(){this.visible=!1},confirm:function(){this.$confirm({title:"Confirm",content:"Bla bla ...",okText:"确认",cancelText:"取消"})}}},B=Object(l.a)(S,O,[],!1,null,null,null);B.options.__file="components/modal/demo/locale.md";var $=B.exports,P=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <a-button @click="countDown">Open modal to close in 5s</a-button>\n',script:"\n  export default {\n    methods: {\n      countDown() {\n        let secondsToGo = 5;\n        const modal = this.$success({\n          title: 'This is a notification message',\n          content: `This modal will be destroyed after ${secondsToGo} second.`,\n        });\n        const interval = setInterval(() => {\n          secondsToGo -= 1;\n          modal.update({\n            content: `This modal will be destroyed after ${secondsToGo} second.`,\n          });\n        }, 1000);\n        setTimeout(() => {\n          clearInterval(interval);\n          modal.destroy();\n        }, secondsToGo * 1000);\n      },\n    },\n  };\n",style:null,us:"\n#### Manual to update destroy\nManually updateing and destroying a modal from `Modal.method`.\n",cn:"\n#### 手动更新和移除\n手动更新和关闭 `Modal.method` 方式创建的对话框。\n",sourceCode:"<template>\n  <a-button @click=\"countDown\">Open modal to close in 5s</a-button>\n</template>\n<script>\n  export default {\n    methods: {\n      countDown() {\n        let secondsToGo = 5;\n        const modal = this.$success({\n          title: 'This is a notification message',\n          content: `This modal will be destroyed after ${secondsToGo} second.`,\n        });\n        const interval = setInterval(() => {\n          secondsToGo -= 1;\n          modal.update({\n            content: `This modal will be destroyed after ${secondsToGo} second.`,\n          });\n        }, 1000);\n        setTimeout(() => {\n          clearInterval(interval);\n          modal.destroy();\n        }, secondsToGo * 1000);\n      },\n    },\n  };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-button",{on:{click:s.countDown}},[s._v("Open modal to close in 5s")])],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"手动更新和移除"}},[s._v("手动更新和移除 "),a("a",{staticClass:"anchor",attrs:{href:"#手动更新和移除"}},[s._v("#")])]),s._v(" "),a("p",[s._v("手动更新和关闭 "),a("code",[s._v("Modal.method")]),s._v(" 方式创建的对话框。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Manual-to-update-destroy"}},[s._v("Manual to update destroy "),a("a",{staticClass:"anchor",attrs:{href:"#Manual-to-update-destroy"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Manually updateing and destroying a modal from "),a("code",[s._v("Modal.method")]),s._v(".")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"countDown"')]),s._v(">")]),s._v("Open modal to close in 5s"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      countDown() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" secondsToGo = "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" modal = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a notification message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`This modal will be destroyed after "),a("span",{staticClass:"hljs-subst"},[s._v("${secondsToGo}")]),s._v(" second.`")]),s._v(",\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" interval = setInterval("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          secondsToGo -= "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(";\n          modal.update({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`This modal will be destroyed after "),a("span",{staticClass:"hljs-subst"},[s._v("${secondsToGo}")]),s._v(" second.`")]),s._v(",\n          });\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          clearInterval(interval);\n          modal.destroy();\n        }, secondsToGo * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};P._withStripped=!0;var V={methods:{countDown:function(){var s=5,t=this.$success({title:"This is a notification message",content:"This modal will be destroyed after "+s+" second."}),a=setInterval((function(){s-=1,t.update({content:"This modal will be destroyed after "+s+" second."})}),1e3);setTimeout((function(){clearInterval(a),t.destroy()}),1e3*s)}}},A=Object(l.a)(V,P,[],!1,null,null,null);A.options.__file="components/modal/demo/manual.md";var I=A.exports,z=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div id="components-modal-demo-position">\n    <a-button type="primary" @click="() => setModal1Visible(true)">Display a modal dialog at 20px to Top</a-button>\n    <a-modal title="20px to Top" style="top: 20px;" :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">\n      <p>some contents...</p>\n      <p>some contents...</p>\n      <p>some contents...</p>\n    </a-modal>\n    <br/><br/>\n    <a-button type="primary" @click="() => modal2Visible = true">Vertically centered modal dialog</a-button>\n    <a-modal title="Vertically centered modal dialog" centered="" v-model="modal2Visible" @ok="() => modal2Visible = false">\n      <p>some contents...</p>\n      <p>some contents...</p>\n      <p>some contents...</p>\n    </a-modal>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        modal1Visible: false,\n        modal2Visible: false,\n      };\n    },\n    methods: {\n      setModal1Visible(modal1Visible) {\n        this.modal1Visible = modal1Visible;\n      },\n    },\n  };\n",style:null,us:"\n#### To customize the position of modal\nYou can use `centered`,`style.top` or other styles to set position of modal dialog.\n",cn:"\n#### 自定义位置\n使用 `centered` 或类似 `style.top` 的样式来设置对话框位置。\n",sourceCode:'<template>\n  <div id="components-modal-demo-position">\n    <a-button type="primary" @click="() => setModal1Visible(true)"\n      >Display a modal dialog at 20px to Top</a-button\n    >\n    <a-modal\n      title="20px to Top"\n      style="top: 20px;"\n      :visible="modal1Visible"\n      @ok="() => setModal1Visible(false)"\n      @cancel="() => setModal1Visible(false)"\n    >\n      <p>some contents...</p>\n      <p>some contents...</p>\n      <p>some contents...</p>\n    </a-modal>\n    <br /><br />\n    <a-button type="primary" @click="() => modal2Visible = true"\n      >Vertically centered modal dialog</a-button\n    >\n    <a-modal\n      title="Vertically centered modal dialog"\n      centered\n      v-model="modal2Visible"\n      @ok="() => modal2Visible = false"\n    >\n      <p>some contents...</p>\n      <p>some contents...</p>\n      <p>some contents...</p>\n    </a-modal>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        modal1Visible: false,\n        modal2Visible: false,\n      };\n    },\n    methods: {\n      setModal1Visible(modal1Visible) {\n        this.modal1Visible = modal1Visible;\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",{attrs:{id:"components-modal-demo-position"}},[a("a-button",{attrs:{type:"primary"},on:{click:function(){return s.setModal1Visible(!0)}}},[s._v("Display a modal dialog at 20px to Top")]),s._v(" "),a("a-modal",{staticStyle:{top:"20px"},attrs:{title:"20px to Top",visible:s.modal1Visible},on:{ok:function(){return s.setModal1Visible(!1)},cancel:function(){return s.setModal1Visible(!1)}}},[a("p",[s._v("some contents...")]),s._v(" "),a("p",[s._v("some contents...")]),s._v(" "),a("p",[s._v("some contents...")])]),s._v(" "),a("br"),a("br"),s._v(" "),a("a-button",{attrs:{type:"primary"},on:{click:function(){return s.modal2Visible=!0}}},[s._v("Vertically centered modal dialog")]),s._v(" "),a("a-modal",{attrs:{title:"Vertically centered modal dialog",centered:""},on:{ok:function(){return s.modal2Visible=!1}},model:{value:s.modal2Visible,callback:function(t){s.modal2Visible=t},expression:"modal2Visible"}},[a("p",[s._v("some contents...")]),s._v(" "),a("p",[s._v("some contents...")]),s._v(" "),a("p",[s._v("some contents...")])])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义位置"}},[s._v("自定义位置 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义位置"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("centered")]),s._v(" 或类似 "),a("code",[s._v("style.top")]),s._v(" 的样式来设置对话框位置。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"To-customize-the-position-of-modal"}},[s._v("To customize the position of modal "),a("a",{staticClass:"anchor",attrs:{href:"#To-customize-the-position-of-modal"}},[s._v("#")])]),s._v(" "),a("p",[s._v("You can use "),a("code",[s._v("centered")]),s._v(","),a("code",[s._v("style.top")]),s._v(" or other styles to set position of modal dialog.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"components-modal-demo-position"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"() => setModal1Visible(true)"')]),s._v("\n      >")]),s._v("Display a modal dialog at 20px to Top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v("\n    >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20px to Top"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top: 20px;"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"modal1Visible"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"() => setModal1Visible(false)"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@cancel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"() => setModal1Visible(false)"')]),s._v("\n    >")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"() => modal2Visible = true"')]),s._v("\n      >")]),s._v("Vertically centered modal dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v("\n    >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Vertically centered modal dialog"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("centered")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"modal2Visible"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"() => modal2Visible = false"')]),s._v("\n    >")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("modal1Visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("modal2Visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      setModal1Visible(modal1Visible) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".modal1Visible = modal1Visible;\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};z._withStripped=!0;var D={data:function(){return{modal1Visible:!1,modal2Visible:!1}},methods:{setModal1Visible:function(s){this.modal1Visible=s}}},E=Object(l.a)(D,z,[],!1,null,null,null);E.options.__file="components/modal/demo/position.md";var W=E.exports,K=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal with customized button props</a-button>\n    <a-modal title="Basic Modal" v-model="visible" @ok="handleOk" :okButtonProps="{ props: {disabled: true} }" :cancelButtonProps="{ props: {disabled: true} }">\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        console.log(e);\n        this.visible = false;\n      },\n      handleCancel(e) {\n        console.log(e);\n        this.visible = false;\n      },\n    },\n  };\n",style:null,us:"\n#### Customize footer buttons props\nPassing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props.\n",cn:"\n#### 自定义页脚按钮属性\n传入 `okButtonProps` 和 `cancelButtonProps` 可分别自定义确定按钮和取消按钮的 props。\n",sourceCode:'<template>\n  <div>\n    <a-button type="primary" @click="showModal">Open Modal with customized button props</a-button>\n    <a-modal\n      title="Basic Modal"\n      v-model="visible"\n      @ok="handleOk"\n      :okButtonProps="{ props: {disabled: true} }"\n      :cancelButtonProps="{ props: {disabled: true} }"\n    >\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n      <p>Some contents...</p>\n    </a-modal>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    },\n    methods: {\n      showModal() {\n        this.visible = true;\n      },\n      handleOk(e) {\n        console.log(e);\n        this.visible = false;\n      },\n      handleCancel(e) {\n        console.log(e);\n        this.visible = false;\n      },\n    },\n  };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-button",{attrs:{type:"primary"},on:{click:s.showModal}},[s._v("Open Modal with customized button props")]),s._v(" "),a("a-modal",{attrs:{title:"Basic Modal",okButtonProps:{props:{disabled:!0}},cancelButtonProps:{props:{disabled:!0}}},on:{ok:s.handleOk},model:{value:s.visible,callback:function(t){s.visible=t},expression:"visible"}},[a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")]),s._v(" "),a("p",[s._v("Some contents...")])])],1)]),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"自定义页脚按钮属性"}},[s._v("自定义页脚按钮属性 "),a("a",{staticClass:"anchor",attrs:{href:"#自定义页脚按钮属性"}},[s._v("#")])]),s._v(" "),a("p",[s._v("传入 "),a("code",[s._v("okButtonProps")]),s._v(" 和 "),a("code",[s._v("cancelButtonProps")]),s._v(" 可分别自定义确定按钮和取消按钮的 props。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Customize-footer-buttons-props"}},[s._v("Customize footer buttons props "),a("a",{staticClass:"anchor",attrs:{href:"#Customize-footer-buttons-props"}},[s._v("#")])]),s._v(" "),a("p",[s._v("Passing "),a("code",[s._v("okButtonProps")]),s._v(" and "),a("code",[s._v("cancelButtonProps")]),s._v(" can customize the ok button and cancel button props.")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showModal"')]),s._v(">")]),s._v("Open Modal with customized button props"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Basic Modal"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@ok")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOk"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":okButtonProps")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ props: {disabled: true} }"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":cancelButtonProps")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ props: {disabled: true} }"')]),s._v("\n    >")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-modal")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showModal() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      },\n      handleOk(e) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(e);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCancel(e) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(e);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};K._withStripped=!0;var L={data:function(){return{visible:!1}},methods:{showModal:function(){this.visible=!0},handleOk:function(s){console.log(s),this.visible=!1},handleCancel:function(s){console.log(s),this.visible=!1}}},N=Object(l.a)(L,K,[],!1,null,null,null);N.options.__file="components/modal/demo/button-props.md";var G=N.exports,Y=function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n  <a-button @click="showConfirm">\n    Confirm\n  </a-button>\n',script:"\n  import Button from '../../button';\n  export default {\n    methods: {\n      showConfirm() {\n        const self = this;\n        for (let i = 0; i < 3; i += 1) {\n          setTimeout(() => {\n            this.$confirm({\n              content: 'destroy all',\n              onOk() {\n                return new Promise((resolve, reject) => {\n                  setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);\n                }).catch(() => console.log('Oops errors!'));\n              },\n              cancelText: 'Click to destroy all',\n              onCancel() {\n                self.destroyAll();\n              },\n            });\n          }, i * 500);\n        }\n      },\n      destroyAll() {\n        this.$destroyAll();\n      },\n    },\n  };\n",style:null,us:"\n#### destroy confirmation modal dialog\n`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically\n",cn:"\n#### 销毁确认对话框\n使用 `Modal.destroyAll()` 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。\n",sourceCode:"<template>\n  <a-button @click=\"showConfirm\">\n    Confirm\n  </a-button>\n</template>\n<script>\n  import Button from '../../button';\n  export default {\n    methods: {\n      showConfirm() {\n        const self = this;\n        for (let i = 0; i < 3; i += 1) {\n          setTimeout(() => {\n            this.$confirm({\n              content: 'destroy all',\n              onOk() {\n                return new Promise((resolve, reject) => {\n                  setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);\n                }).catch(() => console.log('Oops errors!'));\n              },\n              cancelText: 'Click to destroy all',\n              onCancel() {\n                self.destroyAll();\n              },\n            });\n          }, i * 500);\n        }\n      },\n      destroyAll() {\n        this.$destroyAll();\n      },\n    },\n  };\n<\/script>\n"}}},[a("template",{slot:"component"},[a("a-button",{on:{click:s.showConfirm}},[s._v("\n    Confirm\n  ")])],1),s._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"销毁确认对话框"}},[s._v("销毁确认对话框 "),a("a",{staticClass:"anchor",attrs:{href:"#销毁确认对话框"}},[s._v("#")])]),s._v(" "),a("p",[s._v("使用 "),a("code",[s._v("Modal.destroyAll()")]),s._v(" 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。")])]),s._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"destroy-confirmation-modal-dialog"}},[s._v("destroy confirmation modal dialog "),a("a",{staticClass:"anchor",attrs:{href:"#destroy-confirmation-modal-dialog"}},[s._v("#")])]),s._v(" "),a("p",[a("code",[s._v("Modal.destroyAll()")]),s._v(" could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically")])]),s._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showConfirm"')]),s._v(">")]),s._v("\n    Confirm\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Button "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../../button'")]),s._v(";\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      showConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" self = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("; i < "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("; i += "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'destroy all'")]),s._v(",\n              onOk() {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Promise")]),s._v("("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("resolve, reject")]),s._v(") =>")]),s._v(" {\n                  setTimeout("),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(" ? resolve : reject, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n                }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'Oops errors!'")]),s._v("));\n              },\n              "),a("span",{staticClass:"hljs-attr"},[s._v("cancelText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Click to destroy all'")]),s._v(",\n              onCancel() {\n                self.destroyAll();\n              },\n            });\n          }, i * "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n        }\n      },\n      destroyAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$destroyAll();\n      },\n    },\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};Y._withStripped=!0;var F={methods:{showConfirm:function(){for(var s=this,t=this,a=0;a<3;a+=1)setTimeout((function(){s.$confirm({content:"destroy all",onOk:function(){return new Promise((function(s,t){setTimeout(Math.random()>.5?s:t,1e3)})).catch((function(){return console.log("Oops errors!")}))},cancelText:"Click to destroy all",onCancel:function(){t.destroyAll()}})}),500*a)},destroyAll:function(){this.$destroyAll()}}},R=Object(l.a)(F,Y,[],!1,null,null,null);R.options.__file="components/modal/demo/confirm-router.md";var q=R.exports,U=function(){var s=this.$createElement;this._self._c;return this._m(0)};U._withStripped=!0;var J=Object(l.a)({},U,[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[s._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("afterClose")]),s._v(" "),a("td",[s._v("Modal 完全关闭后的回调")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("bodyStyle")]),s._v(" "),a("td",[s._v("Modal body 样式")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("cancelText")]),s._v(" "),a("td",[s._v("取消按钮文字")]),s._v(" "),a("td",[s._v("string| slot")]),s._v(" "),a("td",[s._v("取消")])]),s._v(" "),a("tr",[a("td",[s._v("centered")]),s._v(" "),a("td",[s._v("垂直居中展示 Modal")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])])]),s._v(" "),a("tr",[a("td",[s._v("closable")]),s._v(" "),a("td",[s._v("是否显示右上角的关闭按钮")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("confirmLoading")]),s._v(" "),a("td",[s._v("确定按钮 loading")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("destroyOnClose")]),s._v(" "),a("td",[s._v("关闭时销毁 Modal 里的子元素")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("footer")]),s._v(" "),a("td",[s._v("底部内容，当不需要默认底部按钮时，可以设为 "),a("code",{pre:!0},[s._v(':footer="null"')])]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[s._v("确定取消按钮")])]),s._v(" "),a("tr",[a("td",[s._v("forceRender")]),s._v(" "),a("td",[s._v("强制渲染 Modal")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("getContainer")]),s._v(" "),a("td",[s._v("指定 Modal 挂载的 HTML 节点")]),s._v(" "),a("td",[s._v("(instance): HTMLElement")]),s._v(" "),a("td",[s._v("() => document.body")])]),s._v(" "),a("tr",[a("td",[s._v("keyboard")]),s._v(" "),a("td",[s._v("是否支持键盘 esc 关闭")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("mask")]),s._v(" "),a("td",[s._v("是否展示遮罩")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("maskClosable")]),s._v(" "),a("td",[s._v("点击蒙层是否允许关闭")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("maskStyle")]),s._v(" "),a("td",[s._v("遮罩样式")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("okText")]),s._v(" "),a("td",[s._v("确认按钮文字")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[s._v("确定")])]),s._v(" "),a("tr",[a("td",[s._v("okType")]),s._v(" "),a("td",[s._v("确认按钮类型")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("primary")])]),s._v(" "),a("tr",[a("td",[s._v("okButtonProps")]),s._v(" "),a("td",[s._v("ok 按钮 props, 遵循 jsx"),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx"}},[s._v("规范")])]),s._v(" "),a("td",[s._v("{props: "),a("a",{attrs:{href:"/components/button/#API"}},[s._v("ButtonProps")]),s._v(", on: {}}")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("cancelButtonProps")]),s._v(" "),a("td",[s._v("cancel 按钮 props, 遵循 jsx"),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx"}},[s._v("规范")])]),s._v(" "),a("td",[s._v("{props: "),a("a",{attrs:{href:"/components/button/#API"}},[s._v("ButtonProps")]),s._v(", on: {}}")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("标题")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("visible(v-model)")]),s._v(" "),a("td",[s._v("对话框是否可见")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("无")])]),s._v(" "),a("tr",[a("td",[s._v("width")]),s._v(" "),a("td",[s._v("宽度")]),s._v(" "),a("td",[s._v("string|number")]),s._v(" "),a("td",[s._v("520")])]),s._v(" "),a("tr",[a("td",[s._v("wrapClassName")]),s._v(" "),a("td",[s._v("对话框外层容器的类名")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("zIndex")]),s._v(" "),a("td",[s._v("设置 Modal 的 "),a("code",{pre:!0},[s._v("z-index")])]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1000")])])])]),s._v(" "),a("h3",{attrs:{id:"事件"}},[s._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("事件名称")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("回调参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("cancel")]),s._v(" "),a("td",[s._v("点击遮罩层或右上角叉或取消按钮的回调")]),s._v(" "),a("td",[s._v("function(e)")])]),s._v(" "),a("tr",[a("td",[s._v("ok")]),s._v(" "),a("td",[s._v("点击确定回调")]),s._v(" "),a("td",[s._v("function(e)")])])])]),s._v(" "),a("h4",{attrs:{id:"注意"}},[s._v("注意 "),a("a",{staticClass:"anchor",attrs:{href:"#注意"}},[s._v("#")])]),s._v(" "),a("blockquote",[a("p",[a("code",{pre:!0},[s._v("<Modal />")]),s._v(" 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 "),a("code",{pre:!0},[s._v("destroyOnClose")]),s._v("。")])]),s._v(" "),a("h3",{attrs:{id:"Modal.method()"}},[s._v("Modal.method() "),a("a",{staticClass:"anchor",attrs:{href:"#Modal.method()"}},[s._v("#")])]),s._v(" "),a("p",[s._v("包括：")]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("Modal.info")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.success")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.error")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.warning")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.confirm")])])]),s._v(" "),a("p",[s._v("以上均为一个函数，参数为 object，具体属性如下：")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("默认值")]),s._v(" "),a("th",[s._v("版本")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("autoFocusButton")]),s._v(" "),a("td",[s._v("指定自动获得焦点的按钮")]),s._v(" "),a("td",[s._v("null|string: "),a("code",{pre:!0},[s._v("ok")]),s._v(" "),a("code",{pre:!0},[s._v("cancel")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("ok")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("cancelText")]),s._v(" "),a("td",[s._v("取消按钮文字")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("取消")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("centered")]),s._v(" "),a("td",[s._v("垂直居中展示 Modal")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("closable")]),s._v(" "),a("td",[s._v("是否显示右上角的关闭按钮")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("class")]),s._v(" "),a("td",[s._v("容器类名")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("content")]),s._v(" "),a("td",[s._v("内容")]),s._v(" "),a("td",[s._v("string |vNode |function(h)")]),s._v(" "),a("td",[s._v("无")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("icon")]),s._v(" "),a("td",[s._v("自定义图标（1.14.0 新增）")]),s._v(" "),a("td",[s._v("string|()=>VNode")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v('<Icon type="question-circle">')])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("iconType")]),s._v(" "),a("td",[s._v("图标类型（1.14.0 后废弃，请使用 "),a("code",{pre:!0},[s._v("icon")]),s._v("）")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("question-circle")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("mask")]),s._v(" "),a("td",[s._v("是否展示遮罩")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("maskClosable")]),s._v(" "),a("td",[s._v("点击蒙层是否允许关闭")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("keyboard")]),s._v(" "),a("td",[s._v("是否支持键盘 esc 关闭")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okText")]),s._v(" "),a("td",[s._v("确认按钮文字")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("确定")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okType")]),s._v(" "),a("td",[s._v("确认按钮类型")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("primary")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okButtonProps")]),s._v(" "),a("td",[s._v("ok 按钮 props")]),s._v(" "),a("td",[a("a",{attrs:{href:"/components/button"}},[s._v("ButtonProps")])]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("cancelButtonProps")]),s._v(" "),a("td",[s._v("cancel 按钮 props")]),s._v(" "),a("td",[a("a",{attrs:{href:"/components/button"}},[s._v("ButtonProps")])]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("标题")]),s._v(" "),a("td",[s._v("string|vNode |function(h)")]),s._v(" "),a("td",[s._v("无")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("width")]),s._v(" "),a("td",[s._v("宽度")]),s._v(" "),a("td",[s._v("string|number")]),s._v(" "),a("td",[s._v("416")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("zIndex")]),s._v(" "),a("td",[s._v("设置 Modal 的 "),a("code",{pre:!0},[s._v("z-index")])]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1000")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("onCancel")]),s._v(" "),a("td",[s._v("取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("无")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("onOk")]),s._v(" "),a("td",[s._v("点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("无")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("parentContext")]),s._v(" "),a("td",[s._v("弹窗的父级上下文，一般用于获取父级 provider， 如获取 "),a("code",{pre:!0},[s._v("ConfigProvider")]),s._v(" 的配置")]),s._v(" "),a("td",[s._v("vue instance")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("1.4.11")])])])]),s._v(" "),a("p",[s._v("以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" modal = Modal.info();\n\nmodal.update({\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'修改的标题'")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'修改的内容'")]),s._v(",\n});\n\nmodal.destroy();\n")])]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("Modal.destroyAll")])])]),s._v(" "),a("p",[s._v("使用 "),a("code",{pre:!0},[s._v("Modal.destroyAll()")]),s._v(" 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" router = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueRouter({ ... })\n\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// router change")]),s._v("\nrouter.beforeEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("to, "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(", next")]),s._v(") =>")]),s._v(" {\n  Modal.destroyAll();\n})\n")])])])}],!1,null,null,null);J.options.__file="components/modal/index.zh-CN.md";var H=J.exports,X=function(){var s=this.$createElement;this._self._c;return this._m(0)};X._withStripped=!0;var Q=Object(l.a)({},X,[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[s._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Property")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("afterClose")]),s._v(" "),a("td",[s._v("Specify a function that will be called when modal is closed completely.")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("bodyStyle")]),s._v(" "),a("td",[s._v("Body style for modal body element. Such as height, padding etc.")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("cancelText")]),s._v(" "),a("td",[s._v("Text of the Cancel button")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("Cancel")])])]),s._v(" "),a("tr",[a("td",[s._v("centered")]),s._v(" "),a("td",[s._v("Centered Modal")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])])]),s._v(" "),a("tr",[a("td",[s._v("closable")]),s._v(" "),a("td",[s._v("Whether a close (x) button is visible on top right of the modal dialog or not")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("confirmLoading")]),s._v(" "),a("td",[s._v("Whether to apply loading visual effect for OK button or not")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("destroyOnClose")]),s._v(" "),a("td",[s._v("Whether to unmount child components on onClose")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("footer")]),s._v(" "),a("td",[s._v("Footer content, set as "),a("code",{pre:!0},[s._v(':footer="null"')]),s._v(" when you don't need default buttons")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[s._v("OK and Cancel buttons")])]),s._v(" "),a("tr",[a("td",[s._v("forceRender")]),s._v(" "),a("td",[s._v("Force render Modal")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("getContainer")]),s._v(" "),a("td",[s._v("Return the mount node for Modal")]),s._v(" "),a("td",[s._v("(instance): HTMLElement")]),s._v(" "),a("td",[s._v("() => document.body")])]),s._v(" "),a("tr",[a("td",[s._v("mask")]),s._v(" "),a("td",[s._v("Whether show mask or not.")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("maskClosable")]),s._v(" "),a("td",[s._v("Whether to close the modal dialog when the mask (area outside the modal) is clicked")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("true")])]),s._v(" "),a("tr",[a("td",[s._v("maskStyle")]),s._v(" "),a("td",[s._v("Style for modal's mask element.")]),s._v(" "),a("td",[s._v("object")]),s._v(" "),a("td",[s._v("{}")])]),s._v(" "),a("tr",[a("td",[s._v("okText")]),s._v(" "),a("td",[s._v("Text of the OK button")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("OK")])])]),s._v(" "),a("tr",[a("td",[s._v("okType")]),s._v(" "),a("td",[s._v("Button "),a("code",{pre:!0},[s._v("type")]),s._v(" of the OK button")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("primary")])])]),s._v(" "),a("tr",[a("td",[s._v("okButtonProps")]),s._v(" "),a("td",[s._v("The ok button props, follow jsx "),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx"}},[s._v("rules")])]),s._v(" "),a("td",[s._v("{props: "),a("a",{attrs:{href:"/components/button/#API"}},[s._v("ButtonProps")]),s._v(", on: {}}")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("cancelButtonProps")]),s._v(" "),a("td",[s._v("The cancel button props, follow jsx "),a("a",{attrs:{href:"https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx"}},[s._v("rules")])]),s._v(" "),a("td",[s._v("{props: "),a("a",{attrs:{href:"/components/button/#API"}},[s._v("ButtonProps")]),s._v(", on: {}}")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("The modal dialog's title")]),s._v(" "),a("td",[s._v("string|slot")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("visible")]),s._v(" "),a("td",[s._v("Whether the modal dialog is visible or not")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("width")]),s._v(" "),a("td",[s._v("Width of the modal dialog")]),s._v(" "),a("td",[s._v("string|number")]),s._v(" "),a("td",[s._v("520")])]),s._v(" "),a("tr",[a("td",[s._v("wrapClassName")]),s._v(" "),a("td",[s._v("The class name of the container of the modal dialog")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("zIndex")]),s._v(" "),a("td",[s._v("The "),a("code",{pre:!0},[s._v("z-index")]),s._v(" of the Modal")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1000")])])])]),s._v(" "),a("h3",{attrs:{id:"events"}},[s._v("events "),a("a",{staticClass:"anchor",attrs:{href:"#events"}},[s._v("#")])]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Events Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Arguments")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("cancel")]),s._v(" "),a("td",[s._v("Specify a function that will be called when a user clicks mask, close button on top right or Cancel button")]),s._v(" "),a("td",[s._v("function(e)")])]),s._v(" "),a("tr",[a("td",[s._v("ok")]),s._v(" "),a("td",[s._v("Specify a function that will be called when a user clicks the OK button")]),s._v(" "),a("td",[s._v("function(e)")])])])]),s._v(" "),a("h4",{attrs:{id:"Note"}},[s._v("Note "),a("a",{staticClass:"anchor",attrs:{href:"#Note"}},[s._v("#")])]),s._v(" "),a("blockquote",[a("p",[s._v("The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set "),a("code",{pre:!0},[s._v("destroyOnClose")]),s._v(" on it.")])]),s._v(" "),a("h3",{attrs:{id:"Modal.method()"}},[s._v("Modal.method() "),a("a",{staticClass:"anchor",attrs:{href:"#Modal.method()"}},[s._v("#")])]),s._v(" "),a("p",[s._v("There are five ways to display the information based on the content's nature:")]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("Modal.info")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.success")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.error")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.warning")])]),s._v(" "),a("li",[a("code",{pre:!0},[s._v("Modal.confirm")])])]),s._v(" "),a("p",[s._v("The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("Property")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")]),s._v(" "),a("th",[s._v("Version")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("autoFocusButton")]),s._v(" "),a("td",[s._v("Specify which button to autofocus")]),s._v(" "),a("td",[s._v("null|string: "),a("code",{pre:!0},[s._v("ok")]),s._v(" "),a("code",{pre:!0},[s._v("cancel")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("ok")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("cancelText")]),s._v(" "),a("td",[s._v("Text of the Cancel button")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("Cancel")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("centered")]),s._v(" "),a("td",[s._v("Centered Modal")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("closable")]),s._v(" "),a("td",[s._v("Whether a close (x) button is visible on top right of the modal dialog or not")]),s._v(" "),a("td",[s._v("boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("class")]),s._v(" "),a("td",[s._v("class of container")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("content")]),s._v(" "),a("td",[s._v("Content")]),s._v(" "),a("td",[s._v("string|vNode |function(h)")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("icon")]),s._v(" "),a("td",[s._v("custom icon ("),a("code",{pre:!0},[s._v("Added in 1.14.0")]),s._v(")")]),s._v(" "),a("td",[s._v("string|()=>VNode")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v('<Icon type="question-circle">')])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("iconType")]),s._v(" "),a("td",[s._v("Icon "),a("code",{pre:!0},[s._v("type")]),s._v(" of the Icon component (deperated after "),a("code",{pre:!0},[s._v("1.14.0")]),s._v(")")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("question-circle")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("keyboard")]),s._v(" "),a("td",[s._v("Whether support press esc to close")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("mask")]),s._v(" "),a("td",[s._v("Whether show mask or not.")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("maskClosable")]),s._v(" "),a("td",[s._v("Whether to close the modal dialog when the mask (area outside the modal) is clicked")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("false")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okText")]),s._v(" "),a("td",[s._v("Text of the OK button")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("OK")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okType")]),s._v(" "),a("td",[s._v("Button "),a("code",{pre:!0},[s._v("type")]),s._v(" of the OK button")]),s._v(" "),a("td",[s._v("string")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("primary")])]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("okButtonProps")]),s._v(" "),a("td",[s._v("The ok button props")]),s._v(" "),a("td",[a("a",{attrs:{href:"/components/button"}},[s._v("ButtonProps")])]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("cancelButtonProps")]),s._v(" "),a("td",[s._v("The cancel button props")]),s._v(" "),a("td",[a("a",{attrs:{href:"/components/button"}},[s._v("ButtonProps")])]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("Title")]),s._v(" "),a("td",[s._v("string|vNode |function(h)")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("width")]),s._v(" "),a("td",[s._v("Width of the modal dialog")]),s._v(" "),a("td",[s._v("string|number")]),s._v(" "),a("td",[s._v("416")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("zIndex")]),s._v(" "),a("td",[s._v("The "),a("code",{pre:!0},[s._v("z-index")]),s._v(" of the Modal")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("1000")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("onCancel")]),s._v(" "),a("td",[s._v("Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("onOk")]),s._v(" "),a("td",[s._v("Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed")]),s._v(" "),a("td",[s._v("function")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("parentContext")]),s._v(" "),a("td",[s._v("The parent context of the popup is generally used to get the parent provider, such as the configuration of "),a("code",{pre:!0},[s._v("ConfigProvider")])]),s._v(" "),a("td",[s._v("vue instance")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("1.4.11")])])])]),s._v(" "),a("p",[s._v("All the "),a("code",{pre:!0},[s._v("Modal.method")]),s._v("s will return a reference, and then we can update and close the modal dialog by the reference.")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" modal = Modal.info();\n\nmodal.update({\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Updated title'")]),s._v(",\n  "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'Updated content'")]),s._v(",\n});\n\nmodal.destroy();\n")])]),s._v(" "),a("ul",[a("li",[a("code",{pre:!0},[s._v("Modal.destroyAll")])])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("Modal.destroyAll()")]),s._v(" could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)")]),s._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" router = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" VueRouter({ ... })\n\n"),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[s._v("// router change")]),s._v("\nrouter.beforeEach("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[s._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[s._v("to, "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(", next")]),s._v(") =>")]),s._v(" {\n  Modal.destroyAll();\n})\n")])])])}],!1,null,null,null);Q.options.__file="components/modal/index.en-US.md";var Z=Q.exports,ss="# Modal 对话框\n          模态对话框。\n## 何时使用\n需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。\n另外当需要一个简洁的确认框询问用户时，可以使用 `Modal.confirm()` 等语法糖方法。\n          ## 代码演示",ts="# Modal\n          Modal dialogs.\n## When To Use\nWhen requiring users to interact with the application, but without jumping to a new page and interrupting\nthe user's workflow, you can use `Modal` to create a new floating layer over the current page to get user\nfeedback or display information.\nAdditionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`,\nand so on.\n## Examples\n",as={type:"Feedback",category:"Components",subtitle:"对话框",title:"Modal",render:function(){var s=arguments[0];return s("div",{attrs:{id:"components-modal-demo"}},[s("md",{attrs:{cn:ss,us:ts}}),s(v),s(r),s(m),s(g),s(k),s(M),s($),s(I),s(W),s(G),s(q),s("api",[s(H,{slot:"cn"}),s(Z)])])}},ns=(a(1327),Object(l.a)(as,void 0,void 0,!1,null,null,null));ns.options.__file="components/modal/demo/index.vue";t.default=ns.exports}}]);