1 line
60 KiB
JavaScript
1 line
60 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{1432:function(t,n,s){"use strict";s.r(n);var i=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n onClick: () => {\n console.log('Notification Clicked!');\n },\n });\n },\n },\n };\n",style:null,us:"\n#### Basic\nThe simplest usage that close the notification box after 4.5s.\n",cn:"\n#### 基本\n最简单的用法，4.5 秒后自动关闭。\n",sourceCode:"<template>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n</template>\n<script>\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n onClick: () => {\n console.log('Notification Clicked!');\n },\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"基本"}},[t._v("基本 "),s("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),s("p",[t._v("最简单的用法，4.5 秒后自动关闭。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Basic"}},[t._v("Basic "),s("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),s("p",[t._v("The simplest usage that close the notification box after 4.5s.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),s("span",{staticClass:"hljs-string"},[t._v("'This is the content of the notification. This is the content of the notification. This is the content of the notification.'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("onClick")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'Notification Clicked!'")]),t._v(");\n },\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};i._withStripped=!0;var a={methods:{openNotification:function(){this.$notification.open({message:"Notification Title",description:"This is the content of the notification. This is the content of the notification. This is the content of the notification.",onClick:function(){console.log("Notification Clicked!")}})}}},o=s(31),e=Object(o.a)(a,i,[],!1,null,null,null);e.options.__file="components/notification/demo/basic.md";var c=e.exports,l=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n icon: <a-icon type=\"smile\" style=\"color: #108ee9\"/>,\n });\n },\n },\n };\n",style:null,us:"\n#### Customized Icon\nThe icon can be customized to any vue node or (h) => vue node.\n",cn:"\n#### 自定义图标\n图标可以被自定义。\n",sourceCode:'<template>\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n</template>\n<script>\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: \'Notification Title\',\n description:\n \'This is the content of the notification. This is the content of the notification. This is the content of the notification.\',\n icon: <a-icon type="smile" style="color: #108ee9" />,\n });\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义图标"}},[t._v("自定义图标 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义图标"}},[t._v("#")])]),t._v(" "),s("p",[t._v("图标可以被自定义。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Customized-Icon"}},[t._v("Customized Icon "),s("a",{staticClass:"anchor",attrs:{href:"#Customized-Icon"}},[t._v("#")])]),t._v(" "),s("p",[t._v("The icon can be customized to any vue node or (h) => vue node.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"vbscript"},[t._v("\n export "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n methods: {\n openNotification() {\n this.$notification.open({\n message: "),s("span",{staticClass:"hljs-comment"},[t._v("'Notification Title',")]),t._v("\n description:\n "),s("span",{staticClass:"hljs-comment"},[t._v("'This is the content of the notification. This is the content of the notification. This is the content of the notification.',")]),t._v("\n icon: <a-icon type="),s("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" style="),s("span",{staticClass:"hljs-string"},[t._v('"color: #108ee9"')]),t._v(" />,\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};l._withStripped=!0;var v={methods:{openNotification:function(){var t=this.$createElement;this.$notification.open({message:"Notification Title",description:"This is the content of the notification. This is the content of the notification. This is the content of the notification.",icon:t("a-icon",{attrs:{type:"smile"},style:"color: #108ee9"})})}}},_=Object(o.a)(v,l,[],!1,null,null,null);_.options.__file="components/notification/demo/custom-icon.md";var p=_.exports,r=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n style: {\n width: '600px',\n marginLeft: `${335 - 600}px`,\n },\n });\n },\n },\n };\n",style:null,us:"\n#### Customized style\nThe style and className are available to customize Notification.\n",cn:"\n#### 自定义样式\n使用 style 和 className 来定义样式。\n",sourceCode:"<template>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n</template>\n<script>\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n style: {\n width: '600px',\n marginLeft: `${335 - 600}px`,\n },\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义样式"}},[t._v("自定义样式 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义样式"}},[t._v("#")])]),t._v(" "),s("p",[t._v("使用 style 和 className 来定义样式。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Customized-style"}},[t._v("Customized style "),s("a",{staticClass:"anchor",attrs:{href:"#Customized-style"}},[t._v("#")])]),t._v(" "),s("p",[t._v("The style and className are available to customize Notification.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),s("span",{staticClass:"hljs-string"},[t._v("'This is the content of the notification. This is the content of the notification. This is the content of the notification.'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v(": {\n "),s("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'600px'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("marginLeft")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("`"),s("span",{staticClass:"hljs-subst"},[t._v("${"),s("span",{staticClass:"hljs-number"},[t._v("335")]),t._v(" - "),s("span",{staticClass:"hljs-number"},[t._v("600")]),t._v("}")]),t._v("px`")]),t._v(",\n },\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};r._withStripped=!0;var h={methods:{openNotification:function(){this.$notification.open({message:"Notification Title",description:"This is the content of the notification. This is the content of the notification. This is the content of the notification.",style:{width:"600px",marginLeft:"-265px"}})}}},f=Object(o.a)(h,r,[],!1,null,null,null);f.options.__file="components/notification/demo/custom-style.md";var d=f.exports,m=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'I will never close automatically. I will be close automatically. I will never close automatically.',\n duration: 0,\n });\n },\n },\n };\n",style:null,us:"\n#### Duration after which the notification box is closed\n`Duration` can be used to specify how long the notification stays open. After the duration time elapses,\nthe notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,\nthe notification box will never close automatically.\n",cn:"\n#### 自动关闭的延时\n自定义通知框自动关闭的延时，默认`4.5s`，取消自动关闭只要将该值设为 `0` 即可。\n",sourceCode:"<template>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n</template>\n<script>\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'I will never close automatically. I will be close automatically. I will never close automatically.',\n duration: 0,\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自动关闭的延时"}},[t._v("自动关闭的延时 "),s("a",{staticClass:"anchor",attrs:{href:"#自动关闭的延时"}},[t._v("#")])]),t._v(" "),s("p",[t._v("自定义通知框自动关闭的延时，默认"),s("code",[t._v("4.5s")]),t._v("，取消自动关闭只要将该值设为 "),s("code",[t._v("0")]),t._v(" 即可。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Duration-after-which-the-notification-box-is-closed"}},[t._v("Duration after which the notification box is closed "),s("a",{staticClass:"anchor",attrs:{href:"#Duration-after-which-the-notification-box-is-closed"}},[t._v("#")])]),t._v(" "),s("p",[s("code",[t._v("Duration")]),t._v(" can be used to specify how long the notification stays open. After the duration time elapses,"),s("br"),t._v("\nthe notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,"),s("br"),t._v("\nthe notification box will never close automatically."),s("br"),s("br")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),s("span",{staticClass:"hljs-string"},[t._v("'I will never close automatically. I will be close automatically. I will never close automatically.'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("duration")]),t._v(": "),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(",\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};m._withStripped=!0;var u={methods:{openNotification:function(){this.$notification.open({message:"Notification Title",description:"I will never close automatically. I will be close automatically. I will never close automatically.",duration:0})}}},C=Object(o.a)(u,m,[],!1,null,null,null);C.options.__file="components/notification/demo/duration.md";var j=C.exports,g=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-select v-model="selected" :style="{ width: \'120px\', marginRight: \'10px\' }">\n <a-select-option v-for="val in options" :key="val" :value="val">{{val}}</a-select-option>\n </a-select>\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n </div>\n',script:"\n const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];\n export default {\n data() {\n return {\n options,\n selected: 'topRight',\n };\n },\n watch: {\n selected(val) {\n this.$notification.config({\n placement: val,\n });\n },\n },\n methods: {\n openNotification(val) {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n },\n },\n };\n",style:null,us:"\n#### Placement\nA notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.\n",cn:"\n#### 位置\n可以设置通知从右上角、右下角、左下角、左上角弹出。\n",sourceCode:"<template>\n <div>\n <a-select v-model=\"selected\" :style=\"{ width: '120px', marginRight: '10px' }\">\n <a-select-option v-for=\"val in options\" :key=\"val\" :value=\"val\">{{val}}</a-select-option>\n </a-select>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n </div>\n</template>\n<script>\n const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];\n export default {\n data() {\n return {\n options,\n selected: 'topRight',\n };\n },\n watch: {\n selected(val) {\n this.$notification.config({\n placement: val,\n });\n },\n },\n methods: {\n openNotification(val) {\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-select",{style:{width:"120px",marginRight:"10px"},model:{value:t.selected,callback:function(n){t.selected=n},expression:"selected"}},t._l(t.options,(function(n){return s("a-select-option",{key:n,attrs:{value:n}},[t._v(t._s(n))])})),1),t._v(" "),s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"位置"}},[t._v("位置 "),s("a",{staticClass:"anchor",attrs:{href:"#位置"}},[t._v("#")])]),t._v(" "),s("p",[t._v("可以设置通知从右上角、右下角、左下角、左上角弹出。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Placement"}},[t._v("Placement "),s("a",{staticClass:"anchor",attrs:{href:"#Placement"}},[t._v("#")])]),t._v(" "),s("p",[t._v("A notification box can pop up from "),s("code",[t._v("topRight")]),t._v(" or "),s("code",[t._v("bottomRight")]),t._v(" or "),s("code",[t._v("bottomLeft")]),t._v(" or "),s("code",[t._v("topLeft")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-select")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"selected"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{ width: '120px', marginRight: '10px' }\"")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"val in options"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"val"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":value")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"val"')]),t._v(">")]),s("span",[t._v("{{")]),t._v("val"),s("span",[t._v("}}")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-select-option")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-select")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" options = ["),s("span",{staticClass:"hljs-string"},[t._v("'topLeft'")]),t._v(", "),s("span",{staticClass:"hljs-string"},[t._v("'topRight'")]),t._v(", "),s("span",{staticClass:"hljs-string"},[t._v("'bottomLeft'")]),t._v(", "),s("span",{staticClass:"hljs-string"},[t._v("'bottomRight'")]),t._v("];\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n options,\n "),s("span",{staticClass:"hljs-attr"},[t._v("selected")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'topRight'")]),t._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("watch")]),t._v(": {\n selected(val) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.config({\n "),s("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v(": val,\n });\n },\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification(val) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),s("span",{staticClass:"hljs-string"},[t._v("'This is the content of the notification. This is the content of the notification. This is the content of the notification.'")]),t._v(",\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};g._withStripped=!0;var b=["topLeft","topRight","bottomLeft","bottomRight"],y={data:function(){return{options:b,selected:"topRight"}},watch:{selected:function(t){this.$notification.config({placement:t})}},methods:{openNotification:function(t){this.$notification.open({message:"Notification Title",description:"This is the content of the notification. This is the content of the notification. This is the content of the notification."})}}},N=Object(o.a)(y,g,[],!1,null,null,null);N.options.__file="components/notification/demo/placement.md";var w=N.exports,k=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n const close = () => {\n console.log(\n 'Notification was closed. Either the close button was clicked or duration time elapsed.',\n );\n };\n export default {\n methods: {\n openNotification() {\n const key = `open${Date.now()}`;\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'A function will be be called after the notification is closed (automatically after the \"duration\" time of manually).',\n btn: h => {\n return h(\n 'a-button',\n {\n props: {\n type: 'primary',\n size: 'small',\n },\n on: {\n click: () => this.$notification.close(key),\n },\n },\n 'Confirm',\n );\n },\n key,\n onClose: close,\n });\n },\n },\n };\n",style:null,us:"\n#### Custom close button\nTo customize the style or font of the close button.\n",cn:"\n#### 自定义按钮\n自定义关闭按钮的样式和文字。\n",sourceCode:"<template>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n</template>\n<script>\n const close = () => {\n console.log(\n 'Notification was closed. Either the close button was clicked or duration time elapsed.',\n );\n };\n export default {\n methods: {\n openNotification() {\n const key = `open${Date.now()}`;\n this.$notification.open({\n message: 'Notification Title',\n description:\n 'A function will be be called after the notification is closed (automatically after the \"duration\" time of manually).',\n btn: h => {\n return h(\n 'a-button',\n {\n props: {\n type: 'primary',\n size: 'small',\n },\n on: {\n click: () => this.$notification.close(key),\n },\n },\n 'Confirm',\n );\n },\n key,\n onClose: close,\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义按钮"}},[t._v("自定义按钮 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义按钮"}},[t._v("#")])]),t._v(" "),s("p",[t._v("自定义关闭按钮的样式和文字。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Custom-close-button"}},[t._v("Custom close button "),s("a",{staticClass:"anchor",attrs:{href:"#Custom-close-button"}},[t._v("#")])]),t._v(" "),s("p",[t._v("To customize the style or font of the close button.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" close = "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log(\n "),s("span",{staticClass:"hljs-string"},[t._v("'Notification was closed. Either the close button was clicked or duration time elapsed.'")]),t._v(",\n );\n };\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" key = "),s("span",{staticClass:"hljs-string"},[t._v("`open"),s("span",{staticClass:"hljs-subst"},[t._v("${"),s("span",{staticClass:"hljs-built_in"},[t._v("Date")]),t._v(".now()}")]),t._v("`")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),s("span",{staticClass:"hljs-string"},[t._v("'A function will be be called after the notification is closed (automatically after the \"duration\" time of manually).'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("btn")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("h")]),t._v(" =>")]),t._v(" {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" h(\n "),s("span",{staticClass:"hljs-string"},[t._v("'a-button'")]),t._v(",\n {\n "),s("span",{staticClass:"hljs-attr"},[t._v("props")]),t._v(": {\n "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'primary'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'small'")]),t._v(",\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("on")]),t._v(": {\n "),s("span",{staticClass:"hljs-attr"},[t._v("click")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.close(key),\n },\n },\n "),s("span",{staticClass:"hljs-string"},[t._v("'Confirm'")]),t._v(",\n );\n },\n key,\n "),s("span",{staticClass:"hljs-attr"},[t._v("onClose")]),t._v(": close,\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};k._withStripped=!0;var T=function(){console.log("Notification was closed. Either the close button was clicked or duration time elapsed.")},x={methods:{openNotification:function(){var t=this,n="open"+Date.now();this.$notification.open({message:"Notification Title",description:'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',btn:function(s){return s("a-button",{props:{type:"primary",size:"small"},on:{click:function(){return t.$notification.close(n)}}},"Confirm")},key:n,onClose:T})}}},$=Object(o.a)(x,k,[],!1,null,null,null);$.options.__file="components/notification/demo/with-btn.md";var I=$.exports,O=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:"\n <div>\n <a-button @click=\"() => openNotificationWithIcon('success')\">Success</a-button>\n <a-button @click=\"() => openNotificationWithIcon('info')\">Info</a-button>\n <a-button @click=\"() => openNotificationWithIcon('warning')\">Warning</a-button>\n <a-button @click=\"() => openNotificationWithIcon('error')\">Error</a-button>\n </div>\n",script:"\n export default {\n methods: {\n openNotificationWithIcon(type) {\n this.$notification[type]({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n },\n },\n };\n",style:null,us:"\n#### Notification with icon\nA notification box with a icon at the left side.\n",cn:"\n#### 带有图标的通知提醒框\n通知提醒框左侧有图标。\n",sourceCode:"<template>\n <div>\n <a-button @click=\"() => openNotificationWithIcon('success')\">Success</a-button>\n <a-button @click=\"() => openNotificationWithIcon('info')\">Info</a-button>\n <a-button @click=\"() => openNotificationWithIcon('warning')\">Warning</a-button>\n <a-button @click=\"() => openNotificationWithIcon('error')\">Error</a-button>\n </div>\n</template>\n<script>\n export default {\n methods: {\n openNotificationWithIcon(type) {\n this.$notification[type]({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-button",{on:{click:function(){return t.openNotificationWithIcon("success")}}},[t._v("Success")]),t._v(" "),s("a-button",{on:{click:function(){return t.openNotificationWithIcon("info")}}},[t._v("Info")]),t._v(" "),s("a-button",{on:{click:function(){return t.openNotificationWithIcon("warning")}}},[t._v("Warning")]),t._v(" "),s("a-button",{on:{click:function(){return t.openNotificationWithIcon("error")}}},[t._v("Error")])],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"带有图标的通知提醒框"}},[t._v("带有图标的通知提醒框 "),s("a",{staticClass:"anchor",attrs:{href:"#带有图标的通知提醒框"}},[t._v("#")])]),t._v(" "),s("p",[t._v("通知提醒框左侧有图标。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Notification-with-icon"}},[t._v("Notification with icon "),s("a",{staticClass:"anchor",attrs:{href:"#Notification-with-icon"}},[t._v("#")])]),t._v(" "),s("p",[t._v("A notification box with a icon at the left side.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"() => openNotificationWithIcon('success')\"")]),t._v(">")]),t._v("Success"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"() => openNotificationWithIcon('info')\"")]),t._v(">")]),t._v("Info"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"() => openNotificationWithIcon('warning')\"")]),t._v(">")]),t._v("Warning"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"() => openNotificationWithIcon('error')\"")]),t._v(">")]),t._v("Error"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"vbscript"},[t._v("\n export "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n methods: {\n openNotificationWithIcon(type) {\n this.$notification[type]({\n message: "),s("span",{staticClass:"hljs-comment"},[t._v("'Notification Title',")]),t._v("\n description:\n "),s("span",{staticClass:"hljs-comment"},[t._v("'This is the content of the notification. This is the content of the notification. This is the content of the notification.',")]),t._v("\n });\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};O._withStripped=!0;var R={methods:{openNotificationWithIcon:function(t){this.$notification[t]({message:"Notification Title",description:"This is the content of the notification. This is the content of the notification. This is the content of the notification."})}}},L=Object(o.a)(R,O,[],!1,null,null,null);L.options.__file="components/notification/demo/with-icon.md";var W=L.exports,z=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <a-button type="primary" @click="openNotification">Open the notification box</a-button>\n',script:"\n const key = 'updatable';\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n key,\n message: 'Notification Title',\n description: 'description.',\n });\n setTimeout(() => {\n this.$notification.open({\n key,\n message: 'New Title',\n description: 'New description.',\n });\n }, 1000);\n },\n },\n };\n",style:null,us:"\n#### Update Message Content\nUpdate content with unique key.\n",cn:"\n#### 更新消息内容\n可以通过唯一的 key 来更新内容。\n",sourceCode:"<template>\n <a-button type=\"primary\" @click=\"openNotification\">Open the notification box</a-button>\n</template>\n<script>\n const key = 'updatable';\n export default {\n methods: {\n openNotification() {\n this.$notification.open({\n key,\n message: 'Notification Title',\n description: 'description.',\n });\n setTimeout(() => {\n this.$notification.open({\n key,\n message: 'New Title',\n description: 'New description.',\n });\n }, 1000);\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("a-button",{attrs:{type:"primary"},on:{click:t.openNotification}},[t._v("Open the notification box")])],1),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"更新消息内容"}},[t._v("更新消息内容 "),s("a",{staticClass:"anchor",attrs:{href:"#更新消息内容"}},[t._v("#")])]),t._v(" "),s("p",[t._v("可以通过唯一的 key 来更新内容。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Update-Message-Content"}},[t._v("Update Message Content "),s("a",{staticClass:"anchor",attrs:{href:"#Update-Message-Content"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Update content with unique key.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"openNotification"')]),t._v(">")]),t._v("Open the notification box"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" key = "),s("span",{staticClass:"hljs-string"},[t._v("'updatable'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n openNotification() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n key,\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'Notification Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'description.'")]),t._v(",\n });\n setTimeout("),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".$notification.open({\n key,\n "),s("span",{staticClass:"hljs-attr"},[t._v("message")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'New Title'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'New description.'")]),t._v(",\n });\n }, "),s("span",{staticClass:"hljs-number"},[t._v("1000")]),t._v(");\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};z._withStripped=!0;var S={methods:{openNotification:function(){var t=this;this.$notification.open({key:"updatable",message:"Notification Title",description:"description."}),setTimeout((function(){t.$notification.open({key:"updatable",message:"New Title",description:"New description."})}),1e3)}}},E=Object(o.a)(S,z,[],!1,null,null,null);E.options.__file="components/notification/demo/update.md";var A=E.exports,D=function(){var t=this.$createElement;this._self._c;return this._m(0)};D._withStripped=!0;var P=Object(o.a)({},D,[function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[s("h2",{attrs:{id:"何时使用"}},[t._v("何时使用 "),s("a",{staticClass:"anchor",attrs:{href:"#何时使用"}},[t._v("#")])]),t._v(" "),s("p",[t._v("在系统四个角显示通知提醒信息。经常用于以下情况：")]),t._v(" "),s("ul",[s("li",[t._v("较为复杂的通知内容。")]),t._v(" "),s("li",[t._v("带有交互的通知，给出用户下一步的行动点。")]),t._v(" "),s("li",[t._v("系统主动推送。")])]),t._v(" "),s("h2",{attrs:{id:"API"}},[t._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),s("ul",[s("li",[s("code",{pre:!0},[t._v("notification.success(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.error(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.info(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.warning(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.warn(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.open(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.close(key: String)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.destroy()")])])]),t._v(" "),s("p",[t._v("config 参数如下：")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("btn")]),t._v(" "),s("td",[t._v("自定义关闭按钮")]),t._v(" "),s("td",[t._v("vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("class")]),t._v(" "),s("td",[t._v("自定义 CSS class")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("description")]),t._v(" "),s("td",[t._v("通知提醒内容，必选")]),t._v(" "),s("td",[t._v("string |vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("duration")]),t._v(" "),s("td",[t._v("默认 4.5 秒后自动关闭，配置为 null 则不自动关闭")]),t._v(" "),s("td",[t._v("number")]),t._v(" "),s("td",[t._v("4.5")])]),t._v(" "),s("tr",[s("td",[t._v("icon")]),t._v(" "),s("td",[t._v("自定义图标")]),t._v(" "),s("td",[t._v("vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("key")]),t._v(" "),s("td",[t._v("当前通知唯一标志")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("message")]),t._v(" "),s("td",[t._v("通知提醒标题，必选")]),t._v(" "),s("td",[t._v("string |vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("placement")]),t._v(" "),s("td",[t._v("弹出位置，可选 "),s("code",{pre:!0},[t._v("topLeft")]),t._v(" "),s("code",{pre:!0},[t._v("topRight")]),t._v(" "),s("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),s("code",{pre:!0},[t._v("bottomRight")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("topRight")])]),t._v(" "),s("tr",[s("td",[t._v("style")]),t._v(" "),s("td",[t._v("自定义内联样式")]),t._v(" "),s("td",[t._v("Object | string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("onClose")]),t._v(" "),s("td",[t._v("点击默认关闭按钮时触发的回调函数")]),t._v(" "),s("td",[t._v("Function")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("onClick")]),t._v(" "),s("td",[t._v("点击通知时触发的回调函数")]),t._v(" "),s("td",[t._v("Function")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("p",[t._v("还提供了一个全局配置方法，在调用前提前配置，全局一次生效。")]),t._v(" "),s("ul",[s("li",[s("code",{pre:!0},[t._v("notification.config(options)")])])]),t._v(" "),s("pre",{pre:!0},[s("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[t._v("notification.config({\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'bottomRight'")]),t._v(",\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("bottom")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'50px'")]),t._v(",\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("duration")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n});\n")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("bottom")]),t._v(" "),s("td",[t._v("消息从底部弹出时，距离底部的位置，单位像素。")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("24px")])])]),t._v(" "),s("tr",[s("td",[t._v("duration")]),t._v(" "),s("td",[t._v("默认自动关闭延时，单位秒")]),t._v(" "),s("td",[t._v("number")]),t._v(" "),s("td",[t._v("4.5")])]),t._v(" "),s("tr",[s("td",[t._v("getContainer")]),t._v(" "),s("td",[t._v("配置渲染节点的输出位置")]),t._v(" "),s("td",[t._v("() => HTMLNode")]),t._v(" "),s("td",[t._v("() => document.body")])]),t._v(" "),s("tr",[s("td",[t._v("placement")]),t._v(" "),s("td",[t._v("弹出位置，可选 "),s("code",{pre:!0},[t._v("topLeft")]),t._v(" "),s("code",{pre:!0},[t._v("topRight")]),t._v(" "),s("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),s("code",{pre:!0},[t._v("bottomRight")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("topRight")])]),t._v(" "),s("tr",[s("td",[t._v("top")]),t._v(" "),s("td",[t._v("消息从顶部弹出时，距离顶部的位置，单位像素。")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("24px")])])])])])])}],!1,null,null,null);P.options.__file="components/notification/index.zh-CN.md";var U=P.exports,M=function(){var t=this.$createElement;this._self._c;return this._m(0)};M._withStripped=!0;var q=Object(o.a)({},M,[function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",[s("h2",{attrs:{id:"API"}},[t._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),s("ul",[s("li",[s("code",{pre:!0},[t._v("notification.success(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.error(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.info(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.warning(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.warn(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.open(config)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.close(key: String)")])]),t._v(" "),s("li",[s("code",{pre:!0},[t._v("notification.destroy()")])])]),t._v(" "),s("p",[t._v("The properties of config are as follows:")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("btn")]),t._v(" "),s("td",[t._v("Customized close button")]),t._v(" "),s("td",[t._v("vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("class")]),t._v(" "),s("td",[t._v("Customized CSS class")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("description")]),t._v(" "),s("td",[t._v("The content of notification box (required)")]),t._v(" "),s("td",[t._v("string| vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("duration")]),t._v(" "),s("td",[t._v("Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically")]),t._v(" "),s("td",[t._v("number")]),t._v(" "),s("td",[t._v("4.5")])]),t._v(" "),s("tr",[s("td",[t._v("icon")]),t._v(" "),s("td",[t._v("Customized icon")]),t._v(" "),s("td",[t._v("vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("key")]),t._v(" "),s("td",[t._v("The unique identifier of the Notification")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("message")]),t._v(" "),s("td",[t._v("The title of notification box (required)")]),t._v(" "),s("td",[t._v("string|vueNode |function(h)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("placement")]),t._v(" "),s("td",[t._v("Position of Notification, can be one of "),s("code",{pre:!0},[t._v("topLeft")]),t._v(" "),s("code",{pre:!0},[t._v("topRight")]),t._v(" "),s("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),s("code",{pre:!0},[t._v("bottomRight")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("topRight")])])]),t._v(" "),s("tr",[s("td",[t._v("style")]),t._v(" "),s("td",[t._v("Customized inline style")]),t._v(" "),s("td",[t._v("Object | string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("onClose")]),t._v(" "),s("td",[t._v("Specify a function that will be called when the close button is clicked")]),t._v(" "),s("td",[t._v("Function")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("onClick")]),t._v(" "),s("td",[t._v("Specify a function that will be called when the notification is clicked")]),t._v(" "),s("td",[t._v("Function")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("p",[s("code",{pre:!0},[t._v("notification")]),t._v(" also provides a global "),s("code",{pre:!0},[t._v("config()")]),t._v(" method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.")]),t._v(" "),s("ul",[s("li",[s("code",{pre:!0},[t._v("notification.config(options)")])])]),t._v(" "),s("pre",{pre:!0},[s("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[t._v("notification.config({\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("placement")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'bottomRight'")]),t._v(",\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("bottom")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("'50px'")]),t._v(",\n "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v("duration")]),t._v(": "),s("span",{pre:!0,attrs:{class:"hljs-number"}},[t._v("3")]),t._v(",\n});\n")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("bottom")]),t._v(" "),s("td",[t._v("Distance from the bottom of the viewport, when "),s("code",{pre:!0},[t._v("placement")]),t._v(" is "),s("code",{pre:!0},[t._v("bottomRight")]),t._v(" or "),s("code",{pre:!0},[t._v("bottomLeft")]),t._v(" (unit: pixels).")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("24px")])])]),t._v(" "),s("tr",[s("td",[t._v("duration")]),t._v(" "),s("td",[t._v("Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically")]),t._v(" "),s("td",[t._v("number")]),t._v(" "),s("td",[t._v("4.5")])]),t._v(" "),s("tr",[s("td",[t._v("getContainer")]),t._v(" "),s("td",[t._v("Return the mount node for Notification")]),t._v(" "),s("td",[t._v("() => HTMLNode")]),t._v(" "),s("td",[t._v("() => document.body")])]),t._v(" "),s("tr",[s("td",[t._v("placement")]),t._v(" "),s("td",[t._v("Position of Notification, can be one of "),s("code",{pre:!0},[t._v("topLeft")]),t._v(" "),s("code",{pre:!0},[t._v("topRight")]),t._v(" "),s("code",{pre:!0},[t._v("bottomLeft")]),t._v(" "),s("code",{pre:!0},[t._v("bottomRight")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("topRight")])])]),t._v(" "),s("tr",[s("td",[t._v("top")]),t._v(" "),s("td",[t._v("Distance from the top of the viewport, when "),s("code",{pre:!0},[t._v("placement")]),t._v(" is "),s("code",{pre:!0},[t._v("topRight")]),t._v(" or "),s("code",{pre:!0},[t._v("topLeft")]),t._v(" (unit: pixels).")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("24px")])])])])])])}],!1,null,null,null);q.options.__file="components/notification/index.en-US.md";var F=q.exports,B="# 通知提醒框\n全局展示通知提醒信息。\n## 何时使用\n在系统四个角显示通知提醒信息。经常用于以下情况：\n- 较为复杂的通知内容。\n- 带有交互的通知，给出用户下一步的行动点。\n- 系统主动推送。\n\n## 代码演示",H="# Notification\nDisplay a notification message globally.\n## When To Use\nTo display a notification message at any of the four corners of the viewport. Typically it can be\nused in the following cases:\n- A notification with complex content.\n- A notification providing a feedback based on the user interaction. Or it may show some details\n about upcoming steps the user may have to follow.\n- A notification that is pushed by the application.\n## Examples ",J={category:"Components",type:"Feedback",noinstant:!0,title:"Notification",subtitle:"通知提醒框",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:B,us:H}}),t(c),t(p),t(d),t(j),t(w),t(I),t(W),t(A),t("api",[t(U,{slot:"cn"}),t(F)])])}},G=Object(o.a)(J,void 0,void 0,!1,null,null,null);G.options.__file="components/notification/demo/index.vue";n.default=G.exports}}]); |