import{d as m,bh as k,_ as d,l as f,w as s,j as e,k as r,f as c,e as t,b as n,T as Z,bi as N,r as v,a as B,q as R}from"./index.3fe853a6.js";import{S as X}from"./SmileOutlined.02787c93.js";import{b as Y,c as V,R as S,a as H}from"./RadiusUprightOutlined.fbf236c5.js";const T=m({setup(){return{openNotification:()=>{k.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:()=>{console.log("Notification Clicked!")}})}}}});function x(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"The simplest usage that close the notification box after 4.5s.",cn:"\u6700\u7B80\u5355\u7684\u7528\u6CD5\uFF0C4.5 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\uFF0C4.5 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>The simplest usage that close the notification box after 4.5s.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic usage"},relativePath:"components/notification/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgbm90aWZpY2F0aW9uIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG9wZW5Ob3RpZmljYXRpb24gPSAoKSA9PiB7CiAgICAgIG5vdGlmaWNhdGlvbi5vcGVuKHsKICAgICAgICBtZXNzYWdlOiAnTm90aWZpY2F0aW9uIFRpdGxlJywKICAgICAgICBkZXNjcmlwdGlvbjoKICAgICAgICAgICdUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4gVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLicsCiAgICAgICAgb25DbGljazogKCkgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ05vdGlmaWNhdGlvbiBDbGlja2VkIScpOwogICAgICAgIH0sCiAgICAgIH0pOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICBvcGVuTm90aWZpY2F0aW9uLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4gVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLicsCiAgICAgICAgb25DbGljazogKCkgPT4gewogICAgICAgICAgY29uc29sZS5sb2coJ05vdGlmaWNhdGlvbiBDbGlja2VkIScpOwogICAgICAgIH0sCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t("Open the notification box")])),_:1,__:[0]},8,["onClick"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"onClick"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Notification Clicked!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"onClick"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
          console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Notification Clicked!'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const P=d(T,[["render",x]]),j=m({setup(){return{openNotification:()=>{k.open({message:"Notification Title",description:"I will never close automatically. I will be close automatically. I will never close automatically.",duration:0})}}}});function L(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"`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.",cn:"\u81EA\u5B9A\u4E49\u901A\u77E5\u6846\u81EA\u52A8\u5173\u95ED\u7684\u5EF6\u65F6\uFF0C\u9ED8\u8BA4 `4.5s`\uFF0C\u53D6\u6D88\u81EA\u52A8\u5173\u95ED\u53EA\u8981\u5C06\u8BE5\u503C\u8BBE\u4E3A `0` \u5373\u53EF\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u81EA\u5B9A\u4E49\u901A\u77E5\u6846\u81EA\u52A8\u5173\u95ED\u7684\u5EF6\u65F6\uFF0C\u9ED8\u8BA4 <code>4.5s</code>\uFF0C\u53D6\u6D88\u81EA\u52A8\u5173\u95ED\u53EA\u8981\u5C06\u8BE5\u503C\u8BBE\u4E3A <code>0</code> \u5373\u53EF\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p><code>Duration</code> can be used to specify how long the notification stays open. After the duration time elapses,
the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
the notification box will never close automatically.</p>
`,order:1,title:{"zh-CN":"\u81EA\u52A8\u5173\u95ED\u7684\u5EF6\u65F6","en-US":"Duration after which the notification box is closed"},relativePath:"components/notification/demo/duration.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgbm90aWZpY2F0aW9uIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG9wZW5Ob3RpZmljYXRpb24gPSAoKSA9PiB7CiAgICAgIG5vdGlmaWNhdGlvbi5vcGVuKHsKICAgICAgICBtZXNzYWdlOiAnTm90aWZpY2F0aW9uIFRpdGxlJywKICAgICAgICBkZXNjcmlwdGlvbjoKICAgICAgICAgICdJIHdpbGwgbmV2ZXIgY2xvc2UgYXV0b21hdGljYWxseS4gSSB3aWxsIGJlIGNsb3NlIGF1dG9tYXRpY2FsbHkuIEkgd2lsbCBuZXZlciBjbG9zZSBhdXRvbWF0aWNhbGx5LicsCiAgICAgICAgZHVyYXRpb246IDAsCiAgICAgIH0pOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICBvcGVuTm90aWZpY2F0aW9uLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246ICdJIHdpbGwgbmV2ZXIgY2xvc2UgYXV0b21hdGljYWxseS4gSSB3aWxsIGJlIGNsb3NlIGF1dG9tYXRpY2FsbHkuIEkgd2lsbCBuZXZlciBjbG9zZSBhdXRvbWF0aWNhbGx5LicsCiAgICAgICAgZHVyYXRpb246IDAsCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t("Open the notification box")])),_:1,__:[0]},8,["onClick"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'I will never close automatically. I will be close automatically. I will never close automatically.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"duration"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'I will never close automatically. I will be close automatically. I will never close automatically.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"duration"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const J=d(j,[["render",L]]),F=m({setup(){return{openNotificationWithIcon:a=>{k[a]({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."})}}}});function K(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"A notification box with a icon at the left side.",cn:"\u901A\u77E5\u63D0\u9192\u6846\u5DE6\u4FA7\u6709\u56FE\u6807\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u901A\u77E5\u63D0\u9192\u6846\u5DE6\u4FA7\u6709\u56FE\u6807\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>A notification box with a icon at the left side.</p>
`,order:2,title:{"zh-CN":"\u5E26\u6709\u56FE\u6807\u7684\u901A\u77E5\u63D0\u9192\u6846","en-US":"Notification with icon"},relativePath:"components/notification/demo/with-icon.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ3N1Y2Nlc3MnKSI+U3VjY2VzczwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ2luZm8nKSI+SW5mbzwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ3dhcm5pbmcnKSI+V2FybmluZzwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ2Vycm9yJykiPkVycm9yPC9hLWJ1dHRvbj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IG5vdGlmaWNhdGlvbiB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24gPSAodHlwZTogc3RyaW5nKSA9PiB7CiAgICAgIG5vdGlmaWNhdGlvblt0eXBlXSh7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246CiAgICAgICAgICAnVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4nLAogICAgICB9KTsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgb3Blbk5vdGlmaWNhdGlvbldpdGhJY29uLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ3N1Y2Nlc3MnKSI+U3VjY2VzczwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ2luZm8nKSI+SW5mbzwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ3dhcm5pbmcnKSI+V2FybmluZzwvYS1idXR0b24+CiAgICA8YS1idXR0b24gQGNsaWNrPSIoKSA9PiBvcGVuTm90aWZpY2F0aW9uV2l0aEljb24oJ2Vycm9yJykiPkVycm9yPC9hLWJ1dHRvbj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgbm90aWZpY2F0aW9uIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgb3Blbk5vdGlmaWNhdGlvbldpdGhJY29uID0gdHlwZSA9PiB7CiAgICAgIG5vdGlmaWNhdGlvblt0eXBlXSh7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4gVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLicsCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb25XaXRoSWNvbiwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[n("div",null,[c(p,{onClick:a[0]||(a[0]=()=>o.openNotificationWithIcon("success"))},{default:s(()=>a[4]||(a[4]=[t("Success")])),_:1,__:[4]}),c(p,{onClick:a[1]||(a[1]=()=>o.openNotificationWithIcon("info"))},{default:s(()=>a[5]||(a[5]=[t("Info")])),_:1,__:[5]}),c(p,{onClick:a[2]||(a[2]=()=>o.openNotificationWithIcon("warning"))},{default:s(()=>a[6]||(a[6]=[t("Warning")])),_:1,__:[6]}),c(p,{onClick:a[3]||(a[3]=()=>o.openNotificationWithIcon("error"))},{default:s(()=>a[7]||(a[7]=[t("Error")])),_:1,__:[7]})])]),htmlCode:s(()=>a[8]||(a[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('success')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Success"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('info')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Info"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('warning')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Warning"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('error')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Error"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotificationWithIcon"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(" string")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"["),t("type"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotificationWithIcon`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[9]||(a[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('success')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Success"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('info')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Info"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('warning')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Warning"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => openNotificationWithIcon('error')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Error"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotificationWithIcon"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"type"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"["),t("type"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotificationWithIcon`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const z=d(F,[["render",K]]),U=m({setup(){return{openNotification:()=>{k.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:()=>Z(X,{style:"color: #108ee9"})})}}}});function E(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"The icon can be customized to any vue node or (h) => vue node.",cn:"\u56FE\u6807\u53EF\u4EE5\u88AB\u81EA\u5B9A\u4E49\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u56FE\u6807\u53EF\u4EE5\u88AB\u81EA\u5B9A\u4E49\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>The icon can be customized to any vue node or (h) =&gt; vue node.</p>
`,order:3,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u56FE\u6807","en-US":"Customized Icon"},relativePath:"components/notification/demo/custom-icon.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgU21pbGVPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IG5vdGlmaWNhdGlvbiB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBoIH0gZnJvbSAndnVlJzsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246CiAgICAgICAgICAnVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4nLAogICAgICAgIGljb246ICgpID0+IGgoU21pbGVPdXRsaW5lZCwgeyBzdHlsZTogJ2NvbG9yOiAjMTA4ZWU5JyB9KSwKICAgICAgfSk7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBTbWlsZU91dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgbm90aWZpY2F0aW9uIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIGggfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgb3Blbk5vdGlmaWNhdGlvbiA9ICgpID0+IHsKICAgICAgbm90aWZpY2F0aW9uLm9wZW4oewogICAgICAgIG1lc3NhZ2U6ICdOb3RpZmljYXRpb24gVGl0bGUnLAogICAgICAgIGRlc2NyaXB0aW9uOiAnVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4nLAogICAgICAgIGljb246ICgpID0+IGgoU21pbGVPdXRsaW5lZCwgewogICAgICAgICAgc3R5bGU6ICdjb2xvcjogIzEwOGVlOScsCiAgICAgICAgfSksCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t("Open the notification box")])),_:1,__:[0]},8,["onClick"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" SmileOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" h "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"icon"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),t("SmileOutlined"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'color: #108ee9'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" SmileOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" h "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"icon"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),t("SmileOutlined"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'color: #108ee9'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const O=d(U,[["render",E]]),D=()=>{console.log("Notification was closed. Either the close button was clicked or duration time elapsed.")},_=m({setup(){return{openNotification:()=>{const a=`open${Date.now()}`;k.open({message:"Notification Title",description:'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',btn:()=>Z(N,{type:"primary",size:"small",onClick:()=>k.close(a)},{default:()=>"Confirm"}),key:a,onClose:D})}}}});function Q(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"To customize the style or font of the close button.",cn:"\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE\u7684\u6837\u5F0F\u548C\u6587\u5B57\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE\u7684\u6837\u5F0F\u548C\u6587\u5B57\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>To customize the style or font of the close button.</p>
`,order:4,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u6309\u94AE","en-US":"Custom close button"},relativePath:"components/notification/demo/with-btn.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgbm90aWZpY2F0aW9uLCBCdXR0b24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGgsIGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7Cgpjb25zdCBjbG9zZSA9ICgpID0+IHsKICBjb25zb2xlLmxvZygKICAgICdOb3RpZmljYXRpb24gd2FzIGNsb3NlZC4gRWl0aGVyIHRoZSBjbG9zZSBidXR0b24gd2FzIGNsaWNrZWQgb3IgZHVyYXRpb24gdGltZSBlbGFwc2VkLicsCiAgKTsKfTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IG9wZW5Ob3RpZmljYXRpb24gPSAoKSA9PiB7CiAgICAgIGNvbnN0IGtleSA9IGBvcGVuJHtEYXRlLm5vdygpfWA7CiAgICAgIG5vdGlmaWNhdGlvbi5vcGVuKHsKICAgICAgICBtZXNzYWdlOiAnTm90aWZpY2F0aW9uIFRpdGxlJywKICAgICAgICBkZXNjcmlwdGlvbjoKICAgICAgICAgICdBIGZ1bmN0aW9uIHdpbGwgYmUgYmUgY2FsbGVkIGFmdGVyIHRoZSBub3RpZmljYXRpb24gaXMgY2xvc2VkIChhdXRvbWF0aWNhbGx5IGFmdGVyIHRoZSAiZHVyYXRpb24iIHRpbWUgb2YgbWFudWFsbHkpLicsCiAgICAgICAgYnRuOiAoKSA9PgogICAgICAgICAgaCgKICAgICAgICAgICAgQnV0dG9uLAogICAgICAgICAgICB7CiAgICAgICAgICAgICAgdHlwZTogJ3ByaW1hcnknLAogICAgICAgICAgICAgIHNpemU6ICdzbWFsbCcsCiAgICAgICAgICAgICAgb25DbGljazogKCkgPT4gbm90aWZpY2F0aW9uLmNsb3NlKGtleSksCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsgZGVmYXVsdDogKCkgPT4gJ0NvbmZpcm0nIH0sCiAgICAgICAgICApLAogICAgICAgIGtleSwKICAgICAgICBvbkNsb3NlOiBjbG9zZSwKICAgICAgfSk7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24sIEJ1dHRvbiB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKaW1wb3J0IHsgaCwgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKY29uc3QgY2xvc2UgPSAoKSA9PiB7CiAgY29uc29sZS5sb2coJ05vdGlmaWNhdGlvbiB3YXMgY2xvc2VkLiBFaXRoZXIgdGhlIGNsb3NlIGJ1dHRvbiB3YXMgY2xpY2tlZCBvciBkdXJhdGlvbiB0aW1lIGVsYXBzZWQuJyk7Cn07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBjb25zdCBrZXkgPSBgb3BlbiR7RGF0ZS5ub3coKX1gOwogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246ICdBIGZ1bmN0aW9uIHdpbGwgYmUgYmUgY2FsbGVkIGFmdGVyIHRoZSBub3RpZmljYXRpb24gaXMgY2xvc2VkIChhdXRvbWF0aWNhbGx5IGFmdGVyIHRoZSAiZHVyYXRpb24iIHRpbWUgb2YgbWFudWFsbHkpLicsCiAgICAgICAgYnRuOiAoKSA9PiBoKEJ1dHRvbiwgewogICAgICAgICAgdHlwZTogJ3ByaW1hcnknLAogICAgICAgICAgc2l6ZTogJ3NtYWxsJywKICAgICAgICAgIG9uQ2xpY2s6ICgpID0+IG5vdGlmaWNhdGlvbi5jbG9zZShrZXkpLAogICAgICAgIH0sIHsKICAgICAgICAgIGRlZmF1bHQ6ICgpID0+ICdDb25maXJtJywKICAgICAgICB9KSwKICAgICAgICBrZXksCiAgICAgICAgb25DbG9zZTogY2xvc2UsCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t("Open the notification box")])),_:1,__:[0]},8,["onClick"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification"),n("span",{class:"token punctuation"},","),t(" Button "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" h"),n("span",{class:"token punctuation"},","),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"close"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
  console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),t(`
    `),n("span",{class:"token string"},"'Notification was closed. Either the close button was clicked or duration time elapsed.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" key "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"open"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("Date"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"now"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},";"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},`'A function will be be called after the notification is closed (automatically after the "duration" time of manually).'`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"btn"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(`
          `),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),t(`
            Button`),n("span",{class:"token punctuation"},","),t(`
            `),n("span",{class:"token punctuation"},"{"),t(`
              `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'primary'"),n("span",{class:"token punctuation"},","),t(`
              `),n("span",{class:"token literal-property property"},"size"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'small'"),n("span",{class:"token punctuation"},","),t(`
              `),n("span",{class:"token function-variable function"},"onClick"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" notification"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"close"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
            `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
            `),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token string"},"'Confirm'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
        key`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"onClose"),n("span",{class:"token operator"},":"),t(" close"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification"),n("span",{class:"token punctuation"},","),t(" Button "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" h"),n("span",{class:"token punctuation"},","),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"close"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
  console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Notification was closed. Either the close button was clicked or duration time elapsed.'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" key "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"open"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("Date"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"now"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},";"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},`'A function will be be called after the notification is closed (automatically after the "duration" time of manually).'`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"btn"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),t("Button"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'primary'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"size"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'small'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token function-variable function"},"onClick"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" notification"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"close"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token string"},"'Confirm'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
        key`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"onClose"),n("span",{class:"token operator"},":"),t(" close"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const q=d(_,[["render",Q]]);const $=m({setup(){return{openNotification:()=>{k.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:`${-265}px`},class:"notification-custom-class"})}}}});function M(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"The `style` and `class` are available to customize Notification.",cn:"\u4F7F\u7528 `style` \u548C `class` \u6765\u5B9A\u4E49\u6837\u5F0F\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u4F7F\u7528 <code>style</code> \u548C <code>class</code> \u6765\u5B9A\u4E49\u6837\u5F0F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>The <code>style</code> and <code>class</code> are available to customize Notification.</p>
`,order:5,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u6837\u5F0F","en-US":"Customized style"},relativePath:"components/notification/demo/custom-style.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246CiAgICAgICAgICAnVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4nLAogICAgICAgIHN0eWxlOiB7CiAgICAgICAgICB3aWR0aDogJzYwMHB4JywKICAgICAgICAgIG1hcmdpbkxlZnQ6IGAkezMzNSAtIDYwMH1weGAsCiAgICAgICAgfSwKICAgICAgICBjbGFzczogJ25vdGlmaWNhdGlvbi1jdXN0b20tY2xhc3MnLAogICAgICB9KTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBvcGVuTm90aWZpY2F0aW9uLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KLm5vdGlmaWNhdGlvbi1jdXN0b20tY2xhc3MgewogIGNvbG9yOiByZWQ7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPk9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3g8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogJ05vdGlmaWNhdGlvbiBUaXRsZScsCiAgICAgICAgZGVzY3JpcHRpb246ICdUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4gVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLicsCiAgICAgICAgc3R5bGU6IHsKICAgICAgICAgIHdpZHRoOiAnNjAwcHgnLAogICAgICAgICAgbWFyZ2luTGVmdDogYCR7MzM1IC0gNjAwfXB4YCwKICAgICAgICB9LAogICAgICAgIGNsYXNzOiAnbm90aWZpY2F0aW9uLWN1c3RvbS1jbGFzcycsCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlPgoubm90aWZpY2F0aW9uLWN1c3RvbS1jbGFzcyB7CiAgY29sb3I6IHJlZDsKfQo8L3N0eWxlPg=="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t("Open the notification box")])),_:1,__:[0]},8,["onClick"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token literal-property property"},"width"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'600px'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"marginLeft"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),n("span",{class:"token number"},"335"),t(),n("span",{class:"token operator"},"-"),t(),n("span",{class:"token number"},"600"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"},"px"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token keyword"},"class"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'notification-custom-class'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
`),n("span",{class:"token selector"},".notification-custom-class"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),t(" red"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Open the notification box"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token literal-property property"},"width"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'600px'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"marginLeft"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),n("span",{class:"token number"},"335"),t(),n("span",{class:"token operator"},"-"),t(),n("span",{class:"token number"},"600"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"},"px"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token keyword"},"class"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'notification-custom-class'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
`),n("span",{class:"token selector"},".notification-custom-class"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),t(" red"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const nn=d($,[["render",M]]),tn=m({components:{RadiusUpleftOutlined:Y,RadiusUprightOutlined:V,RadiusBottomleftOutlined:S,RadiusBottomrightOutlined:H},setup(){return{openNotification:a=>{k.open({message:`Notification ${a}`,description:"This is the content of the notification. This is the content of the notification. This is the content of the notification.",placement:a})}}}});function an(o,a,l,u,g,b){const p=e("radius-upleft-outlined"),i=e("a-button"),I=e("radius-upright-outlined"),h=e("a-divider"),A=e("radius-bottomleft-outlined"),y=e("radius-bottomright-outlined"),G=e("demo-box");return r(),f(G,{jsfiddle:{us:"A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.",cn:"\u53EF\u4EE5\u8BBE\u7F6E\u901A\u77E5\u4ECE\u53F3\u4E0A\u89D2\u3001\u53F3\u4E0B\u89D2\u3001\u5DE6\u4E0B\u89D2\u3001\u5DE6\u4E0A\u89D2\u5F39\u51FA\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u53EF\u4EE5\u8BBE\u7F6E\u901A\u77E5\u4ECE\u53F3\u4E0A\u89D2\u3001\u53F3\u4E0B\u89D2\u3001\u5DE6\u4E0B\u89D2\u3001\u5DE6\u4E0A\u89D2\u5F39\u51FA\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>A notification box can pop up from <code>topRight</code> or <code>bottomRight</code> or <code>bottomLeft</code> or <code>topLeft</code>.</p>
`,order:6,title:{"zh-CN":"\u4F4D\u7F6E","en-US":"Placement"},relativePath:"components/notification/demo/placement.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvcGVuTm90aWZpY2F0aW9uKCd0b3BMZWZ0JykiPgogICAgICA8cmFkaXVzLXVwbGVmdC1vdXRsaW5lZCAvPgogICAgICB0b3BMZWZ0CiAgICA8L2EtYnV0dG9uPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib3Blbk5vdGlmaWNhdGlvbigndG9wUmlnaHQnKSI+CiAgICAgIDxyYWRpdXMtdXByaWdodC1vdXRsaW5lZCAvPgogICAgICB0b3BSaWdodAogICAgPC9hLWJ1dHRvbj4KICAgIDxhLWRpdmlkZXIgLz4KICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24oJ2JvdHRvbUxlZnQnKSI+CiAgICAgIDxyYWRpdXMtYm90dG9tbGVmdC1vdXRsaW5lZCAvPgogICAgICBib3R0b21MZWZ0CiAgICA8L2EtYnV0dG9uPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib3Blbk5vdGlmaWNhdGlvbignYm90dG9tUmlnaHQnKSI+CiAgICAgIDxyYWRpdXMtYm90dG9tcmlnaHQtb3V0bGluZWQgLz4KICAgICAgYm90dG9tUmlnaHQKICAgIDwvYS1idXR0b24+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgewogIFJhZGl1c1VwbGVmdE91dGxpbmVkLAogIFJhZGl1c1VwcmlnaHRPdXRsaW5lZCwKICBSYWRpdXNCb3R0b21sZWZ0T3V0bGluZWQsCiAgUmFkaXVzQm90dG9tcmlnaHRPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB0eXBlIHsgTm90aWZpY2F0aW9uUGxhY2VtZW50IH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFJhZGl1c1VwbGVmdE91dGxpbmVkLAogICAgUmFkaXVzVXByaWdodE91dGxpbmVkLAogICAgUmFkaXVzQm90dG9tbGVmdE91dGxpbmVkLAogICAgUmFkaXVzQm90dG9tcmlnaHRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3Qgb3Blbk5vdGlmaWNhdGlvbiA9IChwbGFjZW1lbnQ6IE5vdGlmaWNhdGlvblBsYWNlbWVudCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogYE5vdGlmaWNhdGlvbiAke3BsYWNlbWVudH1gLAogICAgICAgIGRlc2NyaXB0aW9uOgogICAgICAgICAgJ1RoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4gVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uJywKICAgICAgICBwbGFjZW1lbnQsCiAgICAgIH0pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvcGVuTm90aWZpY2F0aW9uKCd0b3BMZWZ0JykiPgogICAgICA8cmFkaXVzLXVwbGVmdC1vdXRsaW5lZCAvPgogICAgICB0b3BMZWZ0CiAgICA8L2EtYnV0dG9uPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib3Blbk5vdGlmaWNhdGlvbigndG9wUmlnaHQnKSI+CiAgICAgIDxyYWRpdXMtdXByaWdodC1vdXRsaW5lZCAvPgogICAgICB0b3BSaWdodAogICAgPC9hLWJ1dHRvbj4KICAgIDxhLWRpdmlkZXIgLz4KICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24oJ2JvdHRvbUxlZnQnKSI+CiAgICAgIDxyYWRpdXMtYm90dG9tbGVmdC1vdXRsaW5lZCAvPgogICAgICBib3R0b21MZWZ0CiAgICA8L2EtYnV0dG9uPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ib3Blbk5vdGlmaWNhdGlvbignYm90dG9tUmlnaHQnKSI+CiAgICAgIDxyYWRpdXMtYm90dG9tcmlnaHQtb3V0bGluZWQgLz4KICAgICAgYm90dG9tUmlnaHQKICAgIDwvYS1idXR0b24+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IFJhZGl1c1VwbGVmdE91dGxpbmVkLCBSYWRpdXNVcHJpZ2h0T3V0bGluZWQsIFJhZGl1c0JvdHRvbWxlZnRPdXRsaW5lZCwgUmFkaXVzQm90dG9tcmlnaHRPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IG5vdGlmaWNhdGlvbiB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBSYWRpdXNVcGxlZnRPdXRsaW5lZCwKICAgIFJhZGl1c1VwcmlnaHRPdXRsaW5lZCwKICAgIFJhZGl1c0JvdHRvbWxlZnRPdXRsaW5lZCwKICAgIFJhZGl1c0JvdHRvbXJpZ2h0T3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IG9wZW5Ob3RpZmljYXRpb24gPSBwbGFjZW1lbnQgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogYE5vdGlmaWNhdGlvbiAke3BsYWNlbWVudH1gLAogICAgICAgIGRlc2NyaXB0aW9uOiAnVGhpcyBpcyB0aGUgY29udGVudCBvZiB0aGUgbm90aWZpY2F0aW9uLiBUaGlzIGlzIHRoZSBjb250ZW50IG9mIHRoZSBub3RpZmljYXRpb24uIFRoaXMgaXMgdGhlIGNvbnRlbnQgb2YgdGhlIG5vdGlmaWNhdGlvbi4nLAogICAgICAgIHBsYWNlbWVudCwKICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgb3Blbk5vdGlmaWNhdGlvbiwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[n("div",null,[c(i,{type:"primary",onClick:a[0]||(a[0]=C=>o.openNotification("topLeft"))},{default:s(()=>[c(p),a[4]||(a[4]=t(" topLeft "))]),_:1,__:[4]}),c(i,{type:"primary",onClick:a[1]||(a[1]=C=>o.openNotification("topRight"))},{default:s(()=>[c(I),a[5]||(a[5]=t(" topRight "))]),_:1,__:[5]}),c(h),c(i,{type:"primary",onClick:a[2]||(a[2]=C=>o.openNotification("bottomLeft"))},{default:s(()=>[c(A),a[6]||(a[6]=t(" bottomLeft "))]),_:1,__:[6]}),c(i,{type:"primary",onClick:a[3]||(a[3]=C=>o.openNotification("bottomRight"))},{default:s(()=>[c(y),a[7]||(a[7]=t(" bottomRight "))]),_:1,__:[7]})])]),htmlCode:s(()=>a[8]||(a[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('topLeft')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-upleft-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      topLeft
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('topRight')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-upright-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      topRight
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-divider")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('bottomLeft')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-bottomleft-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      bottomLeft
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('bottomRight')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-bottomright-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      bottomRight
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  RadiusUpleftOutlined`),n("span",{class:"token punctuation"},","),t(`
  RadiusUprightOutlined`),n("span",{class:"token punctuation"},","),t(`
  RadiusBottomleftOutlined`),n("span",{class:"token punctuation"},","),t(`
  RadiusBottomrightOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(" type "),n("span",{class:"token punctuation"},"{"),t(" NotificationPlacement "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    RadiusUpleftOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusUprightOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusBottomleftOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusBottomrightOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"placement"),n("span",{class:"token operator"},":"),t(" NotificationPlacement")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"Notification "),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("placement"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
          `),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        placement`),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[9]||(a[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('topLeft')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-upleft-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      topLeft
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('topRight')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-upright-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      topRight
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-divider")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('bottomLeft')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-bottomleft-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      bottomLeft
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification('bottomRight')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("radius-bottomright-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      bottomRight
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" RadiusUpleftOutlined"),n("span",{class:"token punctuation"},","),t(" RadiusUprightOutlined"),n("span",{class:"token punctuation"},","),t(" RadiusBottomleftOutlined"),n("span",{class:"token punctuation"},","),t(" RadiusBottomrightOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    RadiusUpleftOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusUprightOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusBottomleftOutlined`),n("span",{class:"token punctuation"},","),t(`
    RadiusBottomrightOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"placement"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"Notification "),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("placement"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'This is the content of the notification. This is the content of the notification. This is the content of the notification.'"),n("span",{class:"token punctuation"},","),t(`
        placement`),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const sn=d(tn,[["render",an]]),w="updatable",on=m({setup(){const o=()=>{k.open({key:w,message:"Notification Title",description:"description."}),setTimeout(()=>{k.open({key:w,message:"New Title",description:"New description."})},1e3)},a=v("Notification Title"),l=v("description");return{openNotification:o,openNotification2:()=>{k.open({message:()=>a.value,description:()=>l.value}),setTimeout(()=>{a.value="New Title",l.value="New description."},1e3)}}}});function en(o,a,l,u,g,b){const p=e("a-button"),i=e("demo-box");return r(),f(i,{jsfiddle:{us:"Update content with unique key, or use reactive data.",cn:"\u53EF\u4EE5\u901A\u8FC7\u552F\u4E00\u7684 key \u6765\u66F4\u65B0\u5185\u5BB9, \u6216\u8005\u901A\u8FC7\u54CD\u5E94\u5F0F\u6570\u636E\u66F4\u65B0\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u53EF\u4EE5\u901A\u8FC7\u552F\u4E00\u7684 key \u6765\u66F4\u65B0\u5185\u5BB9, \u6216\u8005\u901A\u8FC7\u54CD\u5E94\u5F0F\u6570\u636E\u66F4\u65B0\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Update content with unique key, or use reactive data.</p>
`,order:7,title:{"zh-CN":"\u66F4\u65B0\u6D88\u606F\u5185\u5BB9","en-US":"Update Message Content"},relativePath:"components/notification/demo/update.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPgogICAgT3BlbiB0aGUgbm90aWZpY2F0aW9uIGJveCAodXBkYXRlIGJ5IGtleSkKICA8L2EtYnV0dG9uPgogIDxiciAvPgogIDxiciAvPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24yIj4KICAgIE9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3ggKHVwZGF0ZSBieSByZWFjdGl2ZSkKICA8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgbm90aWZpY2F0aW9uIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGtleSA9ICd1cGRhdGFibGUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgb3Blbk5vdGlmaWNhdGlvbiA9ICgpID0+IHsKICAgICAgbm90aWZpY2F0aW9uLm9wZW4oewogICAgICAgIGtleSwKICAgICAgICBtZXNzYWdlOiAnTm90aWZpY2F0aW9uIFRpdGxlJywKICAgICAgICBkZXNjcmlwdGlvbjogJ2Rlc2NyaXB0aW9uLicsCiAgICAgIH0pOwogICAgICBzZXRUaW1lb3V0KCgpID0+IHsKICAgICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgICBrZXksCiAgICAgICAgICBtZXNzYWdlOiAnTmV3IFRpdGxlJywKICAgICAgICAgIGRlc2NyaXB0aW9uOiAnTmV3IGRlc2NyaXB0aW9uLicsCiAgICAgICAgfSk7CiAgICAgIH0sIDEwMDApOwogICAgfTsKICAgIGNvbnN0IG1lc3NhZ2UgPSByZWYoJ05vdGlmaWNhdGlvbiBUaXRsZScpOwogICAgY29uc3QgZGVzY3JpcHRpb24gPSByZWYoJ2Rlc2NyaXB0aW9uJyk7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uMiA9ICgpID0+IHsKICAgICAgLy8gY29udGVudCBtdXN0IHVzZSBmdW5jdGlvbgogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAgbWVzc2FnZTogKCkgPT4gbWVzc2FnZS52YWx1ZSwKICAgICAgICBkZXNjcmlwdGlvbjogKCkgPT4gZGVzY3JpcHRpb24udmFsdWUsCiAgICAgIH0pOwogICAgICBzZXRUaW1lb3V0KCgpID0+IHsKICAgICAgICBtZXNzYWdlLnZhbHVlID0gJ05ldyBUaXRsZSc7CiAgICAgICAgZGVzY3JpcHRpb24udmFsdWUgPSAnTmV3IGRlc2NyaXB0aW9uLic7CiAgICAgIH0sIDEwMDApOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIG9wZW5Ob3RpZmljYXRpb24sCiAgICAgIG9wZW5Ob3RpZmljYXRpb24yLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24iPgogICAgT3BlbiB0aGUgbm90aWZpY2F0aW9uIGJveCAodXBkYXRlIGJ5IGtleSkKICA8L2EtYnV0dG9uPgogIDxiciAvPgogIDxiciAvPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9wZW5Ob3RpZmljYXRpb24yIj4KICAgIE9wZW4gdGhlIG5vdGlmaWNhdGlvbiBib3ggKHVwZGF0ZSBieSByZWFjdGl2ZSkKICA8L2EtYnV0dG9uPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBub3RpZmljYXRpb24gfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKY29uc3Qga2V5ID0gJ3VwZGF0YWJsZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBvcGVuTm90aWZpY2F0aW9uID0gKCkgPT4gewogICAgICBub3RpZmljYXRpb24ub3Blbih7CiAgICAgICAga2V5LAogICAgICAgIG1lc3NhZ2U6ICdOb3RpZmljYXRpb24gVGl0bGUnLAogICAgICAgIGRlc2NyaXB0aW9uOiAnZGVzY3JpcHRpb24uJywKICAgICAgfSk7CiAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgIG5vdGlmaWNhdGlvbi5vcGVuKHsKICAgICAgICAgIGtleSwKICAgICAgICAgIG1lc3NhZ2U6ICdOZXcgVGl0bGUnLAogICAgICAgICAgZGVzY3JpcHRpb246ICdOZXcgZGVzY3JpcHRpb24uJywKICAgICAgICB9KTsKICAgICAgfSwgMTAwMCk7CiAgICB9OwogICAgY29uc3QgbWVzc2FnZSA9IHJlZignTm90aWZpY2F0aW9uIFRpdGxlJyk7CiAgICBjb25zdCBkZXNjcmlwdGlvbiA9IHJlZignZGVzY3JpcHRpb24nKTsKICAgIGNvbnN0IG9wZW5Ob3RpZmljYXRpb24yID0gKCkgPT4gewogICAgICAvLyBjb250ZW50IG11c3QgdXNlIGZ1bmN0aW9uCiAgICAgIG5vdGlmaWNhdGlvbi5vcGVuKHsKICAgICAgICBtZXNzYWdlOiAoKSA9PiBtZXNzYWdlLnZhbHVlLAogICAgICAgIGRlc2NyaXB0aW9uOiAoKSA9PiBkZXNjcmlwdGlvbi52YWx1ZSwKICAgICAgfSk7CiAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgIG1lc3NhZ2UudmFsdWUgPSAnTmV3IFRpdGxlJzsKICAgICAgICBkZXNjcmlwdGlvbi52YWx1ZSA9ICdOZXcgZGVzY3JpcHRpb24uJzsKICAgICAgfSwgMTAwMCk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgb3Blbk5vdGlmaWNhdGlvbiwKICAgICAgb3Blbk5vdGlmaWNhdGlvbjIsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[c(p,{type:"primary",onClick:o.openNotification},{default:s(()=>a[0]||(a[0]=[t(" Open the notification box (update by key) ")])),_:1,__:[0]},8,["onClick"]),a[2]||(a[2]=n("br",null,null,-1)),a[3]||(a[3]=n("br",null,null,-1)),c(p,{type:"primary",onClick:o.openNotification2},{default:s(()=>a[1]||(a[1]=[t(" Open the notification box (update by reactive) ")])),_:1,__:[1]},8,["onClick"])]),htmlCode:s(()=>a[4]||(a[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    Open the notification box (update by key)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    Open the notification box (update by reactive)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" key "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'updatable'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        key`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'description.'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"setTimeout"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
          key`),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'New Title'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'New description.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token number"},"1000"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" message "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" description "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'description'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification2"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token comment"},"// content must use function"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token function-variable function"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" message"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" description"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"setTimeout"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        message`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'New Title'"),n("span",{class:"token punctuation"},";"),t(`
        description`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'New description.'"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token number"},"1000"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
      openNotification2`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[5]||(a[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    Open the notification box (update by key)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openNotification2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    Open the notification box (update by reactive)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" notification "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" key "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'updatable'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        key`),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'description.'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"setTimeout"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
          key`),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'New Title'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'New description.'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token number"},"1000"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" message "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'Notification Title'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" description "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'description'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"openNotification2"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token comment"},"// content must use function"),t(`
      notification`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"open"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token function-variable function"},"message"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" message"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token function-variable function"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" description"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"setTimeout"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        message`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'New Title'"),n("span",{class:"token punctuation"},";"),t(`
        description`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token string"},"'New description.'"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token number"},"1000"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      openNotification`),n("span",{class:"token punctuation"},","),t(`
      openNotification2`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const cn=d(on,[["render",en]]),pn={pageData:{title:"Notification",description:"",frontmatter:{category:"Components",type:"\u53CD\u9988",title:"Notification",subtitle:"\u901A\u77E5\u63D0\u9192\u6846",cover:"https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u5728\u7CFB\u7EDF\u56DB\u4E2A\u89D2\u663E\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002\u7ECF\u5E38\u7528\u4E8E\u4EE5\u4E0B\u60C5\u51B5\uFF1A"},{level:2,title:"API",slug:"API",content:""}],relativePath:"components/notification/index.zh-CN.md",content:`
\u5168\u5C40\u5C55\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002

## \u4F55\u65F6\u4F7F\u7528

\u5728\u7CFB\u7EDF\u56DB\u4E2A\u89D2\u663E\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002\u7ECF\u5E38\u7528\u4E8E\u4EE5\u4E0B\u60C5\u51B5\uFF1A

- \u8F83\u4E3A\u590D\u6742\u7684\u901A\u77E5\u5185\u5BB9\u3002
- \u5E26\u6709\u4EA4\u4E92\u7684\u901A\u77E5\uFF0C\u7ED9\u51FA\u7528\u6237\u4E0B\u4E00\u6B65\u7684\u884C\u52A8\u70B9\u3002
- \u7CFB\u7EDF\u4E3B\u52A8\u63A8\u9001\u3002

## API

- \`notification.success(config)\`
- \`notification.error(config)\`
- \`notification.info(config)\`
- \`notification.warning(config)\`
- \`notification.warn(config)\`
- \`notification.open(config)\`
- \`notification.close(key: String)\`
- \`notification.destroy()\`

config \u53C2\u6570\u5982\u4E0B\uFF1A

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| bottom | \u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002 | string | \`24px\` |  |
| btn | \u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE | VNode \\| () =&gt; VNode | - |  |
| class | \u81EA\u5B9A\u4E49 CSS class | string | - |  |
| closeIcon | \u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807 | VNode \\| () =&gt; VNode | - |  |
| description | \u901A\u77E5\u63D0\u9192\u5185\u5BB9\uFF0C\u5FC5\u9009 | string \\| VNode \\| () =&gt; VNode | - |  |
| duration | \u9ED8\u8BA4 4.5 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\uFF0C\u914D\u7F6E\u4E3A null \u5219\u4E0D\u81EA\u52A8\u5173\u95ED | number | 4.5 |  |
| getContainer | \u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E | () =&gt; HTMLNode | () =&gt; document.body |  |
| icon | \u81EA\u5B9A\u4E49\u56FE\u6807 | VNode \\| () =&gt; VNode | - |  |
| key | \u5F53\u524D\u901A\u77E5\u552F\u4E00\u6807\u5FD7 | string | - |  |
| message | \u901A\u77E5\u63D0\u9192\u6807\u9898\uFF0C\u5FC5\u9009 | string \\| VNode \\| () =&gt; VNode | - |  |
| placement | \u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 \`topLeft\` \`topRight\` \`bottomLeft\` \`bottomRight\` | string | topRight |  |
| style | \u81EA\u5B9A\u4E49\u5185\u8054\u6837\u5F0F | Object \\| string | - |  |
| top | \u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002 | string | \`24px\` |  |
| onClick | \u70B9\u51FB\u901A\u77E5\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |  |
| onClose | \u70B9\u51FB\u9ED8\u8BA4\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | Function | - |  |

\u8FD8\u63D0\u4F9B\u4E86\u4E00\u4E2A\u5168\u5C40\u914D\u7F6E\u65B9\u6CD5\uFF0C\u5728\u8C03\u7528\u524D\u63D0\u524D\u914D\u7F6E\uFF0C\u5168\u5C40\u4E00\u6B21\u751F\u6548\u3002

- \`notification.config(options)\`

  &gt; \u5F53\u4F60\u4F7F\u7528 \`ConfigProvider\` \u8FDB\u884C\u5168\u5C40\u5316\u914D\u7F6E\u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u9ED8\u8BA4\u81EA\u52A8\u5F00\u542F RTL \u6A21\u5F0F\u3002(3.0+)
  &gt;
  &gt; \u5F53\u4F60\u60F3\u5355\u72EC\u4F7F\u7528\uFF0C\u53EF\u901A\u8FC7\u5982\u4E0B\u8BBE\u7F6E\u5F00\u542F RTL \u6A21\u5F0F\u3002

\`\`\`js
notification.config({
  placement: &#39;bottomRight&#39;,
  bottom: &#39;50px&#39;,
  duration: 3,
  rtl: true,
});
\`\`\`

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| bottom | \u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002 | string | \`24px\` |  |
| closeIcon | \u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807 | VNode \\| () =&gt; VNode | - |  |
| duration | \u9ED8\u8BA4\u81EA\u52A8\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\u79D2 | number | 4.5 |  |
| getContainer | \u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E | () =&gt; HTMLNode | () =&gt; document.body |  |
| maxCount | \u6700\u5927\u663E\u793A\u6570, \u8D85\u8FC7\u9650\u5236\u65F6\uFF0C\u6700\u65E9\u7684\u6D88\u606F\u4F1A\u88AB\u81EA\u52A8\u5173\u95ED | number | - | 3.0 |
| placement | \u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 \`topLeft\` \`topRight\` \`bottomLeft\` \`bottomRight\` | string | topRight |  |
| rtl | \u662F\u5426\u5F00\u542F RTL \u6A21\u5F0F | boolean | false | 3.0 |
| top | \u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002 | string | \`24px\` |  |
`,html:`<p>\u5168\u5C40\u5C55\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5728\u7CFB\u7EDF\u56DB\u4E2A\u89D2\u663E\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002\u7ECF\u5E38\u7528\u4E8E\u4EE5\u4E0B\u60C5\u51B5\uFF1A</p>
<ul>
<li>\u8F83\u4E3A\u590D\u6742\u7684\u901A\u77E5\u5185\u5BB9\u3002</li>
<li>\u5E26\u6709\u4EA4\u4E92\u7684\u901A\u77E5\uFF0C\u7ED9\u51FA\u7528\u6237\u4E0B\u4E00\u6B65\u7684\u884C\u52A8\u70B9\u3002</li>
<li>\u7CFB\u7EDF\u4E3B\u52A8\u63A8\u9001\u3002</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ul>
<li><code>notification.success(config)</code></li>
<li><code>notification.error(config)</code></li>
<li><code>notification.info(config)</code></li>
<li><code>notification.warning(config)</code></li>
<li><code>notification.warn(config)</code></li>
<li><code>notification.open(config)</code></li>
<li><code>notification.close(key: String)</code></li>
<li><code>notification.destroy()</code></li>
</ul>
<p>config \u53C2\u6570\u5982\u4E0B\uFF1A</p>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>bottom</td>
<td>\u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>btn</td>
<td>\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>class</td>
<td>\u81EA\u5B9A\u4E49 CSS class</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>description</td>
<td>\u901A\u77E5\u63D0\u9192\u5185\u5BB9\uFF0C\u5FC5\u9009</td>
<td>string | VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>duration</td>
<td>\u9ED8\u8BA4 4.5 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\uFF0C\u914D\u7F6E\u4E3A null \u5219\u4E0D\u81EA\u52A8\u5173\u95ED</td>
<td>number</td>
<td>4.5</td>
<td></td>
</tr>
<tr>
<td>getContainer</td>
<td>\u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E</td>
<td>() =&gt; HTMLNode</td>
<td>() =&gt; document.body</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u81EA\u5B9A\u4E49\u56FE\u6807</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>key</td>
<td>\u5F53\u524D\u901A\u77E5\u552F\u4E00\u6807\u5FD7</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>message</td>
<td>\u901A\u77E5\u63D0\u9192\u6807\u9898\uFF0C\u5FC5\u9009</td>
<td>string | VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>placement</td>
<td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td>
<td>string</td>
<td>topRight</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>\u81EA\u5B9A\u4E49\u5185\u8054\u6837\u5F0F</td>
<td>Object | string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>top</td>
<td>\u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>\u70B9\u51FB\u901A\u77E5\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td>
<td>Function</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>onClose</td>
<td>\u70B9\u51FB\u9ED8\u8BA4\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td>
<td>Function</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
<p>\u8FD8\u63D0\u4F9B\u4E86\u4E00\u4E2A\u5168\u5C40\u914D\u7F6E\u65B9\u6CD5\uFF0C\u5728\u8C03\u7528\u524D\u63D0\u524D\u914D\u7F6E\uFF0C\u5168\u5C40\u4E00\u6B21\u751F\u6548\u3002</p>
<ul>
<li>
<p><code>notification.config(options)</code></p>
<blockquote>
<p>\u5F53\u4F60\u4F7F\u7528 <code>ConfigProvider</code> \u8FDB\u884C\u5168\u5C40\u5316\u914D\u7F6E\u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u9ED8\u8BA4\u81EA\u52A8\u5F00\u542F RTL \u6A21\u5F0F\u3002(3.0+)</p>
<p>\u5F53\u4F60\u60F3\u5355\u72EC\u4F7F\u7528\uFF0C\u53EF\u901A\u8FC7\u5982\u4E0B\u8BBE\u7F6E\u5F00\u542F RTL \u6A21\u5F0F\u3002</p>
</blockquote>
</li>
</ul>
<pre class="language-js" v-pre><code>notification<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">placement</span><span class="token operator">:</span> <span class="token string">'bottomRight'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rtl</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>bottom</td>
<td>\u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>duration</td>
<td>\u9ED8\u8BA4\u81EA\u52A8\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\u79D2</td>
<td>number</td>
<td>4.5</td>
<td></td>
</tr>
<tr>
<td>getContainer</td>
<td>\u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E</td>
<td>() =&gt; HTMLNode</td>
<td>() =&gt; document.body</td>
<td></td>
</tr>
<tr>
<td>maxCount</td>
<td>\u6700\u5927\u663E\u793A\u6570, \u8D85\u8FC7\u9650\u5236\u65F6\uFF0C\u6700\u65E9\u7684\u6D88\u606F\u4F1A\u88AB\u81EA\u52A8\u5173\u95ED</td>
<td>number</td>
<td>-</td>
<td>3.0</td>
</tr>
<tr>
<td>placement</td>
<td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td>
<td>string</td>
<td>topRight</td>
<td></td>
</tr>
<tr>
<td>rtl</td>
<td>\u662F\u5426\u5F00\u542F RTL \u6A21\u5F0F</td>
<td>boolean</td>
<td>false</td>
<td>3.0</td>
</tr>
<tr>
<td>top</td>
<td>\u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060301011}},ln={class:"markdown"};function un(o,a,l,u,g,b){return r(),B("article",ln,a[0]||(a[0]=[R(`<p>\u5168\u5C40\u5C55\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u5728\u7CFB\u7EDF\u56DB\u4E2A\u89D2\u663E\u793A\u901A\u77E5\u63D0\u9192\u4FE1\u606F\u3002\u7ECF\u5E38\u7528\u4E8E\u4EE5\u4E0B\u60C5\u51B5\uFF1A</p><ul><li>\u8F83\u4E3A\u590D\u6742\u7684\u901A\u77E5\u5185\u5BB9\u3002</li><li>\u5E26\u6709\u4EA4\u4E92\u7684\u901A\u77E5\uFF0C\u7ED9\u51FA\u7528\u6237\u4E0B\u4E00\u6B65\u7684\u884C\u52A8\u70B9\u3002</li><li>\u7CFB\u7EDF\u4E3B\u52A8\u63A8\u9001\u3002</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li><code>notification.success(config)</code></li><li><code>notification.error(config)</code></li><li><code>notification.info(config)</code></li><li><code>notification.warning(config)</code></li><li><code>notification.warn(config)</code></li><li><code>notification.open(config)</code></li><li><code>notification.close(key: String)</code></li><li><code>notification.destroy()</code></li></ul><p>config \u53C2\u6570\u5982\u4E0B\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>bottom</td><td>\u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>btn</td><td>\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>class</td><td>\u81EA\u5B9A\u4E49 CSS class</td><td>string</td><td>-</td><td></td></tr><tr><td>closeIcon</td><td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>description</td><td>\u901A\u77E5\u63D0\u9192\u5185\u5BB9\uFF0C\u5FC5\u9009</td><td>string | VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>duration</td><td>\u9ED8\u8BA4 4.5 \u79D2\u540E\u81EA\u52A8\u5173\u95ED\uFF0C\u914D\u7F6E\u4E3A null \u5219\u4E0D\u81EA\u52A8\u5173\u95ED</td><td>number</td><td>4.5</td><td></td></tr><tr><td>getContainer</td><td>\u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E</td><td>() =&gt; HTMLNode</td><td>() =&gt; document.body</td><td></td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>key</td><td>\u5F53\u524D\u901A\u77E5\u552F\u4E00\u6807\u5FD7</td><td>string</td><td>-</td><td></td></tr><tr><td>message</td><td>\u901A\u77E5\u63D0\u9192\u6807\u9898\uFF0C\u5FC5\u9009</td><td>string | VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>placement</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td><td>string</td><td>topRight</td><td></td></tr><tr><td>style</td><td>\u81EA\u5B9A\u4E49\u5185\u8054\u6837\u5F0F</td><td>Object | string</td><td>-</td><td></td></tr><tr><td>top</td><td>\u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>onClick</td><td>\u70B9\u51FB\u901A\u77E5\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td><td>Function</td><td>-</td><td></td></tr><tr><td>onClose</td><td>\u70B9\u51FB\u9ED8\u8BA4\u5173\u95ED\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td><td>Function</td><td>-</td><td></td></tr></tbody></table><p>\u8FD8\u63D0\u4F9B\u4E86\u4E00\u4E2A\u5168\u5C40\u914D\u7F6E\u65B9\u6CD5\uFF0C\u5728\u8C03\u7528\u524D\u63D0\u524D\u914D\u7F6E\uFF0C\u5168\u5C40\u4E00\u6B21\u751F\u6548\u3002</p><ul><li><p><code>notification.config(options)</code></p><blockquote><p>\u5F53\u4F60\u4F7F\u7528 <code>ConfigProvider</code> \u8FDB\u884C\u5168\u5C40\u5316\u914D\u7F6E\u65F6\uFF0C\u7CFB\u7EDF\u4F1A\u9ED8\u8BA4\u81EA\u52A8\u5F00\u542F RTL \u6A21\u5F0F\u3002(3.0+)</p><p>\u5F53\u4F60\u60F3\u5355\u72EC\u4F7F\u7528\uFF0C\u53EF\u901A\u8FC7\u5982\u4E0B\u8BBE\u7F6E\u5F00\u542F RTL \u6A21\u5F0F\u3002</p></blockquote></li></ul><pre class="language-js"><code>notification<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">placement</span><span class="token operator">:</span> <span class="token string">&#39;bottomRight&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">&#39;50px&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rtl</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>bottom</td><td>\u6D88\u606F\u4ECE\u5E95\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u5E95\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>closeIcon</td><td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>duration</td><td>\u9ED8\u8BA4\u81EA\u52A8\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\u79D2</td><td>number</td><td>4.5</td><td></td></tr><tr><td>getContainer</td><td>\u914D\u7F6E\u6E32\u67D3\u8282\u70B9\u7684\u8F93\u51FA\u4F4D\u7F6E</td><td>() =&gt; HTMLNode</td><td>() =&gt; document.body</td><td></td></tr><tr><td>maxCount</td><td>\u6700\u5927\u663E\u793A\u6570, \u8D85\u8FC7\u9650\u5236\u65F6\uFF0C\u6700\u65E9\u7684\u6D88\u606F\u4F1A\u88AB\u81EA\u52A8\u5173\u95ED</td><td>number</td><td>-</td><td>3.0</td></tr><tr><td>placement</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009 <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td><td>string</td><td>topRight</td><td></td></tr><tr><td>rtl</td><td>\u662F\u5426\u5F00\u542F RTL \u6A21\u5F0F</td><td>boolean</td><td>false</td><td>3.0</td></tr><tr><td>top</td><td>\u6D88\u606F\u4ECE\u9876\u90E8\u5F39\u51FA\u65F6\uFF0C\u8DDD\u79BB\u9876\u90E8\u7684\u4F4D\u7F6E\uFF0C\u5355\u4F4D\u50CF\u7D20\u3002</td><td>string</td><td><code>24px</code></td><td></td></tr></tbody></table>`,12)]))}const kn=d(pn,[["render",un]]),dn={pageData:{title:"Notification",description:"",frontmatter:{category:"Components",type:"Feedback",title:"Notification",cover:"https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:"To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:"},{level:2,title:"API",slug:"API",content:""}],relativePath:"components/notification/index.en-US.md",content:"\nDisplay a notification message globally.\n\n## When To Use\n\nTo display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:\n\n- A notification with complex content.\n- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.\n- A notification that is pushed by the application.\n\n## API\n\n- `notification.success(config)`\n- `notification.error(config)`\n- `notification.info(config)`\n- `notification.warning(config)`\n- `notification.warn(config)`\n- `notification.open(config)`\n- `notification.close(key: String)`\n- `notification.destroy()`\n\nThe properties of config are as follows:\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | string | `24px` |  |\n| btn | Customized close button | VNode \\| () =&gt; VNode | - |  |\n| class | Customized CSS class | string | - |  |\n| closeIcon | custom close icon | VNode \\| () =&gt; VNode | - |  |\n| description | The content of notification box (required) | string\\| VNode \\| () =&gt; VNode | - |  |\n| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |\n| getContainer | Return the mount node for Notification | () =&gt; HTMLNode | () =&gt; document.body |  |\n| icon | Customized icon | VNode \\| () =&gt; VNode | - |  |\n| key | The unique identifier of the Notification | string | - |  |\n| message | The title of notification box (required) | string\\| VNode \\| () =&gt; VNode | - |  |\n| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |\n| style | Customized inline style | Object \\| string | - |  |\n| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | string | `24px` |  |\n| onClick | Specify a function that will be called when the notification is clicked | Function | - |  |\n| onClose | Specify a function that will be called when the close button is clicked | Function | - |  |\n\n`notification` also provides a global `config()` 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.\n\n- `notification.config(options)`\n\n  &gt; When you use `ConfigProvider` for global configuration, the system will automatically start RTL mode by default.(4.3.0+)\n  &gt;\n  &gt; When you want to use it alone, you can start the RTL mode through the following settings.\n\n```js\nnotification.config({\n  placement: &#39;bottomRight&#39;,\n  bottom: &#39;50px&#39;,\n  duration: 3,\n  rtl: true,\n});\n```\n\n| Property | Description | Type | Default | Version |\n| --- | --- | --- | --- | --- |\n| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | string | `24px` |  |\n| closeIcon | custom close icon | VNode \\| () =&gt; VNode | - |  |\n| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |\n| getContainer | Return the mount node for Notification | () =&gt; HTMLNode | () =&gt; document.body |  |\n| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 3.0 |\n| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |\n| rtl | Whether to enable RTL mode | boolean | false |  |\n| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | string | `24px` |  |\n",html:`<p>Display a notification message globally.</p>
<h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:</p>
<ul>
<li>A notification with complex content.</li>
<li>A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.</li>
<li>A notification that is pushed by the application.</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ul>
<li><code>notification.success(config)</code></li>
<li><code>notification.error(config)</code></li>
<li><code>notification.info(config)</code></li>
<li><code>notification.warning(config)</code></li>
<li><code>notification.warn(config)</code></li>
<li><code>notification.open(config)</code></li>
<li><code>notification.close(key: String)</code></li>
<li><code>notification.destroy()</code></li>
</ul>
<p>The properties of config are as follows:</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>bottom</td>
<td>Distance from the bottom of the viewport, when <code>placement</code> is <code>bottomRight</code> or <code>bottomLeft</code> (unit: pixels).</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>btn</td>
<td>Customized close button</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>class</td>
<td>Customized CSS class</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>custom close icon</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>description</td>
<td>The content of notification box (required)</td>
<td>string| VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>duration</td>
<td>Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically</td>
<td>number</td>
<td>4.5</td>
<td></td>
</tr>
<tr>
<td>getContainer</td>
<td>Return the mount node for Notification</td>
<td>() =&gt; HTMLNode</td>
<td>() =&gt; document.body</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>Customized icon</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>key</td>
<td>The unique identifier of the Notification</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>message</td>
<td>The title of notification box (required)</td>
<td>string| VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>placement</td>
<td>Position of Notification, can be one of <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td>
<td>string</td>
<td><code>topRight</code></td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>Customized inline style</td>
<td>Object | string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>top</td>
<td>Distance from the top of the viewport, when <code>placement</code> is <code>topRight</code> or <code>topLeft</code> (unit: pixels).</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>onClick</td>
<td>Specify a function that will be called when the notification is clicked</td>
<td>Function</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>onClose</td>
<td>Specify a function that will be called when the close button is clicked</td>
<td>Function</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
<p><code>notification</code> also provides a global <code>config()</code> 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.</p>
<ul>
<li>
<p><code>notification.config(options)</code></p>
<blockquote>
<p>When you use <code>ConfigProvider</code> for global configuration, the system will automatically start RTL mode by default.(4.3.0+)</p>
<p>When you want to use it alone, you can start the RTL mode through the following settings.</p>
</blockquote>
</li>
</ul>
<pre class="language-js" v-pre><code>notification<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">placement</span><span class="token operator">:</span> <span class="token string">'bottomRight'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rtl</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>bottom</td>
<td>Distance from the bottom of the viewport, when <code>placement</code> is <code>bottomRight</code> or <code>bottomLeft</code> (unit: pixels).</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>custom close icon</td>
<td>VNode | () =&gt; VNode</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>duration</td>
<td>Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically</td>
<td>number</td>
<td>4.5</td>
<td></td>
</tr>
<tr>
<td>getContainer</td>
<td>Return the mount node for Notification</td>
<td>() =&gt; HTMLNode</td>
<td>() =&gt; document.body</td>
<td></td>
</tr>
<tr>
<td>maxCount</td>
<td>Max Notification show, drop oldest if exceed limit</td>
<td>number</td>
<td>-</td>
<td>3.0</td>
</tr>
<tr>
<td>placement</td>
<td>Position of Notification, can be one of <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td>
<td>string</td>
<td><code>topRight</code></td>
<td></td>
</tr>
<tr>
<td>rtl</td>
<td>Whether to enable RTL mode</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>top</td>
<td>Distance from the top of the viewport, when <code>placement</code> is <code>topRight</code> or <code>topLeft</code> (unit: pixels).</td>
<td>string</td>
<td><code>24px</code></td>
<td></td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060301003}},rn={class:"markdown"};function gn(o,a,l,u,g,b){return r(),B("article",rn,a[0]||(a[0]=[R(`<p>Display a notification message globally.</p><h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use"><span aria-hidden="true" class="anchor">#</span></a></h2><p>To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:</p><ul><li>A notification with complex content.</li><li>A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.</li><li>A notification that is pushed by the application.</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li><code>notification.success(config)</code></li><li><code>notification.error(config)</code></li><li><code>notification.info(config)</code></li><li><code>notification.warning(config)</code></li><li><code>notification.warn(config)</code></li><li><code>notification.open(config)</code></li><li><code>notification.close(key: String)</code></li><li><code>notification.destroy()</code></li></ul><p>The properties of config are as follows:</p><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>bottom</td><td>Distance from the bottom of the viewport, when <code>placement</code> is <code>bottomRight</code> or <code>bottomLeft</code> (unit: pixels).</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>btn</td><td>Customized close button</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>class</td><td>Customized CSS class</td><td>string</td><td>-</td><td></td></tr><tr><td>closeIcon</td><td>custom close icon</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>description</td><td>The content of notification box (required)</td><td>string| VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>duration</td><td>Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically</td><td>number</td><td>4.5</td><td></td></tr><tr><td>getContainer</td><td>Return the mount node for Notification</td><td>() =&gt; HTMLNode</td><td>() =&gt; document.body</td><td></td></tr><tr><td>icon</td><td>Customized icon</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>key</td><td>The unique identifier of the Notification</td><td>string</td><td>-</td><td></td></tr><tr><td>message</td><td>The title of notification box (required)</td><td>string| VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>placement</td><td>Position of Notification, can be one of <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td><td>string</td><td><code>topRight</code></td><td></td></tr><tr><td>style</td><td>Customized inline style</td><td>Object | string</td><td>-</td><td></td></tr><tr><td>top</td><td>Distance from the top of the viewport, when <code>placement</code> is <code>topRight</code> or <code>topLeft</code> (unit: pixels).</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>onClick</td><td>Specify a function that will be called when the notification is clicked</td><td>Function</td><td>-</td><td></td></tr><tr><td>onClose</td><td>Specify a function that will be called when the close button is clicked</td><td>Function</td><td>-</td><td></td></tr></tbody></table><p><code>notification</code> also provides a global <code>config()</code> 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.</p><ul><li><p><code>notification.config(options)</code></p><blockquote><p>When you use <code>ConfigProvider</code> for global configuration, the system will automatically start RTL mode by default.(4.3.0+)</p><p>When you want to use it alone, you can start the RTL mode through the following settings.</p></blockquote></li></ul><pre class="language-js"><code>notification<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">placement</span><span class="token operator">:</span> <span class="token string">&#39;bottomRight&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token string">&#39;50px&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">rtl</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>bottom</td><td>Distance from the bottom of the viewport, when <code>placement</code> is <code>bottomRight</code> or <code>bottomLeft</code> (unit: pixels).</td><td>string</td><td><code>24px</code></td><td></td></tr><tr><td>closeIcon</td><td>custom close icon</td><td>VNode | () =&gt; VNode</td><td>-</td><td></td></tr><tr><td>duration</td><td>Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically</td><td>number</td><td>4.5</td><td></td></tr><tr><td>getContainer</td><td>Return the mount node for Notification</td><td>() =&gt; HTMLNode</td><td>() =&gt; document.body</td><td></td></tr><tr><td>maxCount</td><td>Max Notification show, drop oldest if exceed limit</td><td>number</td><td>-</td><td>3.0</td></tr><tr><td>placement</td><td>Position of Notification, can be one of <code>topLeft</code> <code>topRight</code> <code>bottomLeft</code> <code>bottomRight</code></td><td>string</td><td><code>topRight</code></td><td></td></tr><tr><td>rtl</td><td>Whether to enable RTL mode</td><td>boolean</td><td>false</td><td></td></tr><tr><td>top</td><td>Distance from the top of the viewport, when <code>placement</code> is <code>topRight</code> or <code>topLeft</code> (unit: pixels).</td><td>string</td><td><code>24px</code></td><td></td></tr></tbody></table>`,12)]))}const bn=d(dn,[["render",gn]]),mn=m({CN:kn,US:bn,components:{Basic:P,Duratioin:J,WithIcon:z,CustomIcon:O,WithBtn:q,CustomStyle:nn,Placement:sn,Update:cn},setup(){return{}}});function fn(o,a,l,u,g,b){const p=e("basic"),i=e("duratioin"),I=e("with-icon"),h=e("custom-icon"),A=e("with-btn"),y=e("custom-style"),G=e("placement"),C=e("update"),W=e("demo-sort");return r(),f(W,null,{default:s(()=>[c(p),c(i),c(I),c(h),c(A),c(y),c(G),c(C)]),_:1})}const An=d(mn,[["render",fn]]);export{An as default};