index.5bf364aa.js 80 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. import{_ as u,l as r,w as e,j as t,k as i,f as p,b as n,e as a,d as b,r as f,T as B,aO as G,a as A,q as y}from"./index.3fe853a6.js";const Z={};function N(o,s){const c=t("a-spin"),l=t("demo-box");return i(),r(l,{jsfiddle:{us:"A simple loading status.",cn:"\u4E00\u4E2A\u7B80\u5355\u7684 loading \u72B6\u6001\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  2. <span aria-hidden="true" class="anchor">#</span>
  3. </a></h2>
  4. <p>\u4E00\u4E2A\u7B80\u5355\u7684 loading \u72B6\u6001\u3002</p>
  5. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  6. <span aria-hidden="true" class="anchor">#</span>
  7. </a></h2>
  8. <p>A simple loading status.</p>
  9. `,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic usage"},relativePath:"components/spin/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gLz4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gLz4KPC90ZW1wbGF0ZT4="}},{default:e(()=>[p(c)]),htmlCode:e(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  10. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  11. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  12. `)])],-1)])),jsVersionHtml:e(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  13. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  14. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  15. `)])],-1)])),_:1})}const S=u(Z,[["render",N]]),X={};function P(o,s){const c=t("a-spin"),l=t("a-space"),k=t("demo-box");return i(),r(k,{jsfiddle:{us:"A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.",cn:"\u5C0F\u7684\u7528\u4E8E\u6587\u672C\u52A0\u8F7D\uFF0C\u9ED8\u8BA4\u7528\u4E8E\u5361\u7247\u5BB9\u5668\u7EA7\u52A0\u8F7D\uFF0C\u5927\u7684\u7528\u4E8E**\u9875\u9762\u7EA7**\u52A0\u8F7D\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  16. <span aria-hidden="true" class="anchor">#</span>
  17. </a></h2>
  18. <p>\u5C0F\u7684\u7528\u4E8E\u6587\u672C\u52A0\u8F7D\uFF0C\u9ED8\u8BA4\u7528\u4E8E\u5361\u7247\u5BB9\u5668\u7EA7\u52A0\u8F7D\uFF0C\u5927\u7684\u7528\u4E8E<strong>\u9875\u9762\u7EA7</strong>\u52A0\u8F7D\u3002</p>
  19. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  20. <span aria-hidden="true" class="anchor">#</span>
  21. </a></h2>
  22. <p>A small <code>Spin</code> use in loading text, default <code>Spin</code> use in loading card-level block, and large <code>Spin</code> use in loading <strong>page</strong>.</p>
  23. `,order:1,title:{"zh-CN":"\u5404\u79CD\u5927\u5C0F","en-US":"Size"},relativePath:"components/spin/demo/size.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGEtc3BpbiBzaXplPSJzbWFsbCIgLz4KICAgIDxhLXNwaW4gLz4KICAgIDxhLXNwaW4gc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLXNwYWNlPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwYWNlPgogICAgPGEtc3BpbiBzaXplPSJzbWFsbCIgLz4KICAgIDxhLXNwaW4gLz4KICAgIDxhLXNwaW4gc2l6ZT0ibGFyZ2UiIC8+CiAgPC9hLXNwYWNlPgo8L3RlbXBsYXRlPg=="}},{default:e(()=>[p(l,null,{default:e(()=>[p(c,{size:"small"}),p(c),p(c,{size:"large"})]),_:1})]),htmlCode:e(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  24. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
  25. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  26. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  27. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  28. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
  29. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  30. `)])],-1)])),jsVersionHtml:e(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  31. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
  32. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("small"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  33. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  34. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("large"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  35. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
  36. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  37. `)])],-1)])),_:1})}const _=u(X,[["render",P]]);const x={},z={class:"example"};function Y(o,s){const c=t("a-spin"),l=t("demo-box");return i(),r(l,{jsfiddle:{us:"Spin in a container.",cn:"\u653E\u5165\u4E00\u4E2A\u5BB9\u5668\u4E2D\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  38. <span aria-hidden="true" class="anchor">#</span>
  39. </a></h2>
  40. <p>\u653E\u5165\u4E00\u4E2A\u5BB9\u5668\u4E2D\u3002</p>
  41. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  42. <span aria-hidden="true" class="anchor">#</span>
  43. </a></h2>
  44. <p>Spin in a container.</p>
  45. `,order:2,title:{"zh-CN":"\u5BB9\u5668","en-US":"Inside a container"},relativePath:"components/spin/demo/inside.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImV4YW1wbGUiPgogICAgPGEtc3BpbiAvPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgoKPHN0eWxlIHNjb3BlZD4KLmV4YW1wbGUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMDUpOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIHBhZGRpbmc6IDMwcHggNTBweDsKICBtYXJnaW46IDIwcHggMDsKfQo8L3N0eWxlPgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9ImV4YW1wbGUiPgogICAgPGEtc3BpbiAvPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgoKPHN0eWxlIHNjb3BlZD4KLmV4YW1wbGUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMDUpOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIHBhZGRpbmc6IDMwcHggNTBweDsKICBtYXJnaW46IDIwcHggMDsKfQo8L3N0eWxlPg=="}},{default:e(()=>[n("div",z,[p(c)])]),htmlCode:e(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  46. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("example"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  47. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  48. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  49. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  50. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  51. `),n("span",{class:"token selector"},".example"),a(),n("span",{class:"token punctuation"},"{"),a(`
  52. `),n("span",{class:"token property"},"text-align"),n("span",{class:"token punctuation"},":"),a(" center"),n("span",{class:"token punctuation"},";"),a(`
  53. `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.05"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  54. `),n("span",{class:"token property"},"border-radius"),n("span",{class:"token punctuation"},":"),a(" 4px"),n("span",{class:"token punctuation"},";"),a(`
  55. `),n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
  56. `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 30px 50px"),n("span",{class:"token punctuation"},";"),a(`
  57. `),n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),a(" 20px 0"),n("span",{class:"token punctuation"},";"),a(`
  58. `),n("span",{class:"token punctuation"},"}"),a(`
  59. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  60. `)])],-1)])),jsVersionHtml:e(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  61. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("example"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  62. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  63. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  64. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  65. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  66. `),n("span",{class:"token selector"},".example"),a(),n("span",{class:"token punctuation"},"{"),a(`
  67. `),n("span",{class:"token property"},"text-align"),n("span",{class:"token punctuation"},":"),a(" center"),n("span",{class:"token punctuation"},";"),a(`
  68. `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0"),n("span",{class:"token punctuation"},","),a(" 0.05"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  69. `),n("span",{class:"token property"},"border-radius"),n("span",{class:"token punctuation"},":"),a(" 4px"),n("span",{class:"token punctuation"},";"),a(`
  70. `),n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 20px"),n("span",{class:"token punctuation"},";"),a(`
  71. `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 30px 50px"),n("span",{class:"token punctuation"},";"),a(`
  72. `),n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),a(" 20px 0"),n("span",{class:"token punctuation"},";"),a(`
  73. `),n("span",{class:"token punctuation"},"}"),a(`
  74. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  75. `)])],-1)])),_:1})}const R=u(x,[["render",Y],["__scopeId","data-v-6bf1d01a"]]),H=b({setup(){const o=f(!1);return{spinning:o,changeSpinning:()=>{o.value=!o.value}}}});const D={class:"spin-state"};function F(o,s,c,l,k,h){const d=t("a-alert"),g=t("a-spin"),m=t("a-switch"),I=t("demo-box");return i(),r(I,{jsfiddle:{us:"Embedding content into `Spin` will alter it into loading state.",cn:"\u53EF\u4EE5\u76F4\u63A5\u628A\u5185\u5BB9\u5185\u5D4C\u5230 `Spin` \u4E2D\uFF0C\u5C06\u73B0\u6709\u5BB9\u5668\u53D8\u4E3A\u52A0\u8F7D\u72B6\u6001\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  76. <span aria-hidden="true" class="anchor">#</span>
  77. </a></h2>
  78. <p>\u53EF\u4EE5\u76F4\u63A5\u628A\u5185\u5BB9\u5185\u5D4C\u5230 <code>Spin</code> \u4E2D\uFF0C\u5C06\u73B0\u6709\u5BB9\u5668\u53D8\u4E3A\u52A0\u8F7D\u72B6\u6001\u3002</p>
  79. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  80. <span aria-hidden="true" class="anchor">#</span>
  81. </a></h2>
  82. <p>Embedding content into <code>Spin</code> will alter it into loading state.</p>
  83. `,order:3,title:{"zh-CN":"\u5361\u7247\u52A0\u8F7D\u4E2D","en-US":"Embedded mode"},relativePath:"components/spin/demo/nested.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOnNwaW5uaW5nPSJzcGlubmluZyI+CiAgICA8YS1hbGVydAogICAgICBtZXNzYWdlPSJBbGVydCBtZXNzYWdlIHRpdGxlIgogICAgICBkZXNjcmlwdGlvbj0iRnVydGhlciBkZXRhaWxzIGFib3V0IHRoZSBjb250ZXh0IG9mIHRoaXMgYWxlcnQuIgogICAgPjwvYS1hbGVydD4KICA8L2Etc3Bpbj4KICA8ZGl2IGNsYXNzPSJzcGluLXN0YXRlIj4KICAgIExvYWRpbmcgc3RhdGXvvJoKICAgIDxhLXN3aXRjaCB2LW1vZGVsOmNoZWNrZWQ9InNwaW5uaW5nIiAvPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3Bpbm5pbmcgPSByZWY8Ym9vbGVhbj4oZmFsc2UpOwoKICAgIGNvbnN0IGNoYW5nZVNwaW5uaW5nID0gKCkgPT4gewogICAgICBzcGlubmluZy52YWx1ZSA9ICFzcGlubmluZy52YWx1ZTsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgc3Bpbm5pbmcsCiAgICAgIGNoYW5nZVNwaW5uaW5nLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5zcGluLXN0YXRlIHsKICBtYXJnaW4tdG9wOiAxNnB4Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOnNwaW5uaW5nPSJzcGlubmluZyI+CiAgICA8YS1hbGVydAogICAgICBtZXNzYWdlPSJBbGVydCBtZXNzYWdlIHRpdGxlIgogICAgICBkZXNjcmlwdGlvbj0iRnVydGhlciBkZXRhaWxzIGFib3V0IHRoZSBjb250ZXh0IG9mIHRoaXMgYWxlcnQuIgogICAgPjwvYS1hbGVydD4KICA8L2Etc3Bpbj4KICA8ZGl2IGNsYXNzPSJzcGluLXN0YXRlIj4KICAgIExvYWRpbmcgc3RhdGXvvJoKICAgIDxhLXN3aXRjaCB2LW1vZGVsOmNoZWNrZWQ9InNwaW5uaW5nIiAvPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzcGlubmluZyA9IHJlZihmYWxzZSk7CiAgICBjb25zdCBjaGFuZ2VTcGlubmluZyA9ICgpID0+IHsKICAgICAgc3Bpbm5pbmcudmFsdWUgPSAhc3Bpbm5pbmcudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgc3Bpbm5pbmcsCiAgICAgIGNoYW5nZVNwaW5uaW5nLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5zcGluLXN0YXRlIHsKICBtYXJnaW4tdG9wOiAxNnB4Owp9Cjwvc3R5bGU+"}},{default:e(()=>[p(g,{spinning:o.spinning},{default:e(()=>[p(d,{message:"Alert message title",description:"Further details about the context of this alert."})]),_:1},8,["spinning"]),n("div",D,[s[1]||(s[1]=a(" Loading state\uFF1A ")),p(m,{checked:o.spinning,"onUpdate:checked":s[0]||(s[0]=C=>o.spinning=C)},null,8,["checked"])])]),htmlCode:e(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  84. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":spinning"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  85. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  86. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  87. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  88. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  89. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  90. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spin-state"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  91. Loading state\uFF1A
  92. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  93. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  94. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  95. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),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"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  96. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  97. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  98. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  99. `),n("span",{class:"token keyword"},"const"),a(" spinning "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  100. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeSpinning"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  101. spinning`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token operator"},"!"),a("spinning"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},";"),a(`
  102. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  103. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  104. spinning`),n("span",{class:"token punctuation"},","),a(`
  105. changeSpinning`),n("span",{class:"token punctuation"},","),a(`
  106. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  107. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  108. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  109. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  110. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  111. `),n("span",{class:"token selector"},".spin-state"),a(),n("span",{class:"token punctuation"},"{"),a(`
  112. `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px"),n("span",{class:"token punctuation"},";"),a(`
  113. `),n("span",{class:"token punctuation"},"}"),a(`
  114. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  115. `)])],-1)])),jsVersionHtml:e(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  116. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":spinning"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  117. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  118. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  119. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  120. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  121. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  122. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spin-state"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  123. Loading state\uFF1A
  124. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  125. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  126. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  127. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  128. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  129. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  130. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  131. `),n("span",{class:"token keyword"},"const"),a(" spinning "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  132. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeSpinning"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  133. spinning`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token operator"},"!"),a("spinning"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},";"),a(`
  134. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  135. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  136. spinning`),n("span",{class:"token punctuation"},","),a(`
  137. changeSpinning`),n("span",{class:"token punctuation"},","),a(`
  138. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  139. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  140. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  141. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  142. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  143. `),n("span",{class:"token selector"},".spin-state"),a(),n("span",{class:"token punctuation"},"{"),a(`
  144. `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px"),n("span",{class:"token punctuation"},";"),a(`
  145. `),n("span",{class:"token punctuation"},"}"),a(`
  146. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  147. `)])],-1)])),_:1})}const V=u(H,[["render",F],["__scopeId","data-v-704dd629"]]),L={};function K(o,s){const c=t("a-alert"),l=t("a-spin"),k=t("demo-box");return i(),r(k,{jsfiddle:{us:"Customized description content.",cn:"\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  148. <span aria-hidden="true" class="anchor">#</span>
  149. </a></h2>
  150. <p>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848\u3002</p>
  151. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  152. <span aria-hidden="true" class="anchor">#</span>
  153. </a></h2>
  154. <p>Customized description content.</p>
  155. `,order:4,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848","en-US":"Customized description"},relativePath:"components/spin/demo/tip.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gdGlwPSJMb2FkaW5nLi4uIj4KICAgIDxhLWFsZXJ0CiAgICAgIG1lc3NhZ2U9IkFsZXJ0IG1lc3NhZ2UgdGl0bGUiCiAgICAgIGRlc2NyaXB0aW9uPSJGdXJ0aGVyIGRldGFpbHMgYWJvdXQgdGhlIGNvbnRleHQgb2YgdGhpcyBhbGVydC4iCiAgICA+PC9hLWFsZXJ0PgogIDwvYS1zcGluPgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gdGlwPSJMb2FkaW5nLi4uIj4KICAgIDxhLWFsZXJ0CiAgICAgIG1lc3NhZ2U9IkFsZXJ0IG1lc3NhZ2UgdGl0bGUiCiAgICAgIGRlc2NyaXB0aW9uPSJGdXJ0aGVyIGRldGFpbHMgYWJvdXQgdGhlIGNvbnRleHQgb2YgdGhpcyBhbGVydC4iCiAgICA+PC9hLWFsZXJ0PgogIDwvYS1zcGluPgo8L3RlbXBsYXRlPg=="}},{default:e(()=>[p(l,{tip:"Loading..."},{default:e(()=>[p(c,{message:"Alert message title",description:"Further details about the context of this alert."})]),_:1})]),htmlCode:e(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  156. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"tip"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Loading..."),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  157. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  158. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  159. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  160. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  161. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  162. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  163. `)])],-1)])),jsVersionHtml:e(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  164. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},"tip"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Loading..."),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  165. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  166. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  167. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  168. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  169. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  170. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  171. `)])],-1)])),_:1})}const j=u(L,[["render",K]]),U=b({setup(){const o=f(!1);return{spinning:o,delayTime:500,changeSpinning:()=>{o.value=!o.value}}}});const J={class:"spin-state"};function T(o,s,c,l,k,h){const d=t("a-alert"),g=t("a-spin"),m=t("a-switch"),I=t("demo-box");return i(),r(I,{jsfiddle:{us:"Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.",cn:"\u5EF6\u8FDF\u663E\u793A loading \u6548\u679C\u3002\u5F53 spinning \u72B6\u6001\u5728 `delay` \u65F6\u95F4\u5185\u7ED3\u675F\uFF0C\u5219\u4E0D\u663E\u793A loading \u72B6\u6001\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  172. <span aria-hidden="true" class="anchor">#</span>
  173. </a></h2>
  174. <p>\u5EF6\u8FDF\u663E\u793A loading \u6548\u679C\u3002\u5F53 spinning \u72B6\u6001\u5728 <code>delay</code> \u65F6\u95F4\u5185\u7ED3\u675F\uFF0C\u5219\u4E0D\u663E\u793A loading \u72B6\u6001\u3002</p>
  175. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  176. <span aria-hidden="true" class="anchor">#</span>
  177. </a></h2>
  178. <p>Specifies a delay for loading state. If <code>spinning</code> ends during delay, loading status won't appear.</p>
  179. `,order:5,title:{"zh-CN":"\u5EF6\u8FDF","en-US":"delay"},relativePath:"components/spin/demo/delay.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOnNwaW5uaW5nPSJzcGlubmluZyIgOmRlbGF5PSJkZWxheVRpbWUiPgogICAgPGEtYWxlcnQKICAgICAgbWVzc2FnZT0iQWxlcnQgbWVzc2FnZSB0aXRsZSIKICAgICAgZGVzY3JpcHRpb249IkZ1cnRoZXIgZGV0YWlscyBhYm91dCB0aGUgY29udGV4dCBvZiB0aGlzIGFsZXJ0LiIKICAgID48L2EtYWxlcnQ+CiAgPC9hLXNwaW4+CiAgPGRpdiBjbGFzcz0ic3Bpbi1zdGF0ZSI+CiAgICBMb2FkaW5nIHN0YXRl77yaCiAgICA8YS1zd2l0Y2ggdi1tb2RlbDpjaGVja2VkPSJzcGlubmluZyIgLz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHNwaW5uaW5nID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKICAgIGNvbnN0IGRlbGF5VGltZSA9IDUwMDsKCiAgICBjb25zdCBjaGFuZ2VTcGlubmluZyA9ICgpID0+IHsKICAgICAgc3Bpbm5pbmcudmFsdWUgPSAhc3Bpbm5pbmcudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgc3Bpbm5pbmcsCiAgICAgIGRlbGF5VGltZSwKICAgICAgY2hhbmdlU3Bpbm5pbmcsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KLnNwaW4tc3RhdGUgewogIG1hcmdpbi10b3A6IDE2cHg7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOnNwaW5uaW5nPSJzcGlubmluZyIgOmRlbGF5PSJkZWxheVRpbWUiPgogICAgPGEtYWxlcnQKICAgICAgbWVzc2FnZT0iQWxlcnQgbWVzc2FnZSB0aXRsZSIKICAgICAgZGVzY3JpcHRpb249IkZ1cnRoZXIgZGV0YWlscyBhYm91dCB0aGUgY29udGV4dCBvZiB0aGlzIGFsZXJ0LiIKICAgID48L2EtYWxlcnQ+CiAgPC9hLXNwaW4+CiAgPGRpdiBjbGFzcz0ic3Bpbi1zdGF0ZSI+CiAgICBMb2FkaW5nIHN0YXRl77yaCiAgICA8YS1zd2l0Y2ggdi1tb2RlbDpjaGVja2VkPSJzcGlubmluZyIgLz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3Bpbm5pbmcgPSByZWYoZmFsc2UpOwogICAgY29uc3QgZGVsYXlUaW1lID0gNTAwOwogICAgY29uc3QgY2hhbmdlU3Bpbm5pbmcgPSAoKSA9PiB7CiAgICAgIHNwaW5uaW5nLnZhbHVlID0gIXNwaW5uaW5nLnZhbHVlOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIHNwaW5uaW5nLAogICAgICBkZWxheVRpbWUsCiAgICAgIGNoYW5nZVNwaW5uaW5nLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5zcGluLXN0YXRlIHsKICBtYXJnaW4tdG9wOiAxNnB4Owp9Cjwvc3R5bGU+"}},{default:e(()=>[p(g,{spinning:o.spinning,delay:o.delayTime},{default:e(()=>[p(d,{message:"Alert message title",description:"Further details about the context of this alert."})]),_:1},8,["spinning","delay"]),n("div",J,[s[1]||(s[1]=a(" Loading state\uFF1A ")),p(m,{checked:o.spinning,"onUpdate:checked":s[0]||(s[0]=C=>o.spinning=C)},null,8,["checked"])])]),htmlCode:e(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  180. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":spinning"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":delay"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("delayTime"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  181. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  182. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  183. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  184. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  185. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  186. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spin-state"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  187. Loading state\uFF1A
  188. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  189. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  190. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  191. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),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"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  192. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  193. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  194. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  195. `),n("span",{class:"token keyword"},"const"),a(" spinning "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  196. `),n("span",{class:"token keyword"},"const"),a(" delayTime "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"500"),n("span",{class:"token punctuation"},";"),a(`
  197. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeSpinning"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  198. spinning`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token operator"},"!"),a("spinning"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},";"),a(`
  199. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  200. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  201. spinning`),n("span",{class:"token punctuation"},","),a(`
  202. delayTime`),n("span",{class:"token punctuation"},","),a(`
  203. changeSpinning`),n("span",{class:"token punctuation"},","),a(`
  204. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  205. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  206. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  207. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  208. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  209. `),n("span",{class:"token selector"},".spin-state"),a(),n("span",{class:"token punctuation"},"{"),a(`
  210. `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px"),n("span",{class:"token punctuation"},";"),a(`
  211. `),n("span",{class:"token punctuation"},"}"),a(`
  212. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  213. `)])],-1)])),jsVersionHtml:e(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  214. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":spinning"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":delay"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("delayTime"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  215. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-alert")]),a(`
  216. `),n("span",{class:"token attr-name"},"message"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Alert message title"),n("span",{class:"token punctuation"},'"')]),a(`
  217. `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Further details about the context of this alert."),n("span",{class:"token punctuation"},'"')]),a(`
  218. `),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-alert")]),n("span",{class:"token punctuation"},">")]),a(`
  219. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-spin")]),n("span",{class:"token punctuation"},">")]),a(`
  220. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spin-state"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
  221. Loading state\uFF1A
  222. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-switch")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("checked")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("spinning"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  223. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  224. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  225. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  226. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  227. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  228. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  229. `),n("span",{class:"token keyword"},"const"),a(" spinning "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  230. `),n("span",{class:"token keyword"},"const"),a(" delayTime "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"500"),n("span",{class:"token punctuation"},";"),a(`
  231. `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"changeSpinning"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
  232. spinning`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token operator"},"!"),a("spinning"),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},";"),a(`
  233. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  234. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  235. spinning`),n("span",{class:"token punctuation"},","),a(`
  236. delayTime`),n("span",{class:"token punctuation"},","),a(`
  237. changeSpinning`),n("span",{class:"token punctuation"},","),a(`
  238. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  239. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  240. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  241. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  242. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
  243. `),n("span",{class:"token selector"},".spin-state"),a(),n("span",{class:"token punctuation"},"{"),a(`
  244. `),n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px"),n("span",{class:"token punctuation"},";"),a(`
  245. `),n("span",{class:"token punctuation"},"}"),a(`
  246. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
  247. `)])],-1)])),_:1})}const Q=u(U,[["render",T],["__scopeId","data-v-ce2ddbf5"]]),O=b({setup(){return{indicator:B(G,{style:{fontSize:"24px"},spin:!0})}}});function $(o,s,c,l,k,h){const d=t("a-spin"),g=t("demo-box");return i(),r(g,{jsfiddle:{us:"Use custom loading indicator.",cn:"\u4F7F\u7528\u81EA\u5B9A\u4E49\u6307\u793A\u7B26\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
  248. <span aria-hidden="true" class="anchor">#</span>
  249. </a></h2>
  250. <p>\u4F7F\u7528\u81EA\u5B9A\u4E49\u6307\u793A\u7B26\u3002</p>
  251. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  252. <span aria-hidden="true" class="anchor">#</span>
  253. </a></h2>
  254. <p>Use custom loading indicator.</p>
  255. `,order:6,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u6307\u793A\u7B26","en-US":"Custom spinning indicator"},relativePath:"components/spin/demo/custom-indicator.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOmluZGljYXRvcj0iaW5kaWNhdG9yIiAvPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgTG9hZGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBoIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGluZGljYXRvciA9IGgoTG9hZGluZ091dGxpbmVkLCB7CiAgICAgIHN0eWxlOiB7CiAgICAgICAgZm9udFNpemU6ICcyNHB4JywKICAgICAgfSwKICAgICAgc3BpbjogdHJ1ZSwKICAgIH0pOwogICAgcmV0dXJuIHsKICAgICAgaW5kaWNhdG9yLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXNwaW4gOmluZGljYXRvcj0iaW5kaWNhdG9yIiAvPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBMb2FkaW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIGggfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgaW5kaWNhdG9yID0gaChMb2FkaW5nT3V0bGluZWQsIHsKICAgICAgc3R5bGU6IHsKICAgICAgICBmb250U2l6ZTogJzI0cHgnLAogICAgICB9LAogICAgICBzcGluOiB0cnVlLAogICAgfSk7CiAgICByZXR1cm4gewogICAgICBpbmRpY2F0b3IsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:e(()=>[p(d,{indicator:o.indicator},null,8,["indicator"])]),htmlCode:e(()=>s[0]||(s[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  256. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":indicator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("indicator"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  257. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  258. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),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"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  259. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" LoadingOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  260. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" h "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  261. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  262. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  263. `),n("span",{class:"token keyword"},"const"),a(" indicator "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),a("LoadingOutlined"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(`
  264. `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  265. `),n("span",{class:"token literal-property property"},"fontSize"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
  266. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  267. `),n("span",{class:"token literal-property property"},"spin"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
  268. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  269. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  270. indicator`),n("span",{class:"token punctuation"},","),a(`
  271. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  272. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  273. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  274. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  275. `)])],-1)])),jsVersionHtml:e(()=>s[1]||(s[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  276. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-spin")]),a(),n("span",{class:"token attr-name"},":indicator"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("indicator"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  277. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  278. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
  279. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" LoadingOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
  280. `),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" h "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
  281. `),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  282. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
  283. `),n("span",{class:"token keyword"},"const"),a(" indicator "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"h"),n("span",{class:"token punctuation"},"("),a("LoadingOutlined"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(`
  284. `),n("span",{class:"token literal-property property"},"style"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
  285. `),n("span",{class:"token literal-property property"},"fontSize"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
  286. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  287. `),n("span",{class:"token literal-property property"},"spin"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
  288. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  289. `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
  290. indicator`),n("span",{class:"token punctuation"},","),a(`
  291. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  292. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  293. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
  294. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
  295. `)])],-1)])),_:1})}const q=u(O,[["render",$]]),E={pageData:{title:"Spin",description:"",frontmatter:{category:"Components",type:"\u53CD\u9988",title:"Spin",subtitle:"\u52A0\u8F7D\u4E2D",cover:"https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u9875\u9762\u5C40\u90E8\u5904\u4E8E\u7B49\u5F85\u5F02\u6B65\u6570\u636E\u6216\u6B63\u5728\u6E32\u67D3\u8FC7\u7A0B\u65F6\uFF0C\u5408\u9002\u7684\u52A0\u8F7D\u52A8\u6548\u4F1A\u6709\u6548\u7F13\u89E3\u7528\u6237\u7684\u7126\u8651\u3002"},{level:2,title:"API",slug:"API",content:""},{level:3,title:"\u9759\u6001\u65B9\u6CD5",slug:"\u9759\u6001\u65B9\u6CD5",content:""}],relativePath:"components/spin/index.zh-CN.md",content:`
  296. \u7528\u4E8E\u9875\u9762\u548C\u533A\u5757\u7684\u52A0\u8F7D\u4E2D\u72B6\u6001\u3002
  297. ## \u4F55\u65F6\u4F7F\u7528
  298. \u9875\u9762\u5C40\u90E8\u5904\u4E8E\u7B49\u5F85\u5F02\u6B65\u6570\u636E\u6216\u6B63\u5728\u6E32\u67D3\u8FC7\u7A0B\u65F6\uFF0C\u5408\u9002\u7684\u52A0\u8F7D\u52A8\u6548\u4F1A\u6709\u6548\u7F13\u89E3\u7528\u6237\u7684\u7126\u8651\u3002
  299. ## API
  300. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
  301. | --- | --- | --- | --- | --- |
  302. | delay | \u5EF6\u8FDF\u663E\u793A\u52A0\u8F7D\u6548\u679C\u7684\u65F6\u95F4\uFF08\u9632\u6B62\u95EA\u70C1\uFF09 | number (\u6BEB\u79D2) | - | |
  303. | indicator | \u52A0\u8F7D\u6307\u793A\u7B26 | vNode \\| slot | - | |
  304. | size | \u7EC4\u4EF6\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A \`small\` \`default\` \`large\` | string | \`default\` | |
  305. | spinning | \u662F\u5426\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001 | boolean | true | |
  306. | tip | \u5F53\u4F5C\u4E3A\u5305\u88F9\u5143\u7D20\u65F6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848 | string \\| slot | - | slot 3.0 |
  307. | wrapperClassName | \u5305\u88C5\u5668\u7684\u7C7B\u5C5E\u6027 | string | - | |
  308. ### \u9759\u6001\u65B9\u6CD5
  309. - \`Spin.setDefaultIndicator({indicator})\` \u540C\u4E0A \`indicator\`\uFF0C\u4F60\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5168\u5C40\u9ED8\u8BA4\u5143\u7D20
  310. \`\`\`jsx
  311. import { h } from &#39;vue&#39;;
  312. Spin.setDefaultIndicator({
  313. indicator: h(&#39;i&#39;, { class: &#39;anticon anticon-loading anticon-spin ant-spin-dot&#39; }),
  314. });
  315. \`\`\`
  316. `,html:`<p>\u7528\u4E8E\u9875\u9762\u548C\u533A\u5757\u7684\u52A0\u8F7D\u4E2D\u72B6\u6001\u3002</p>
  317. <h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
  318. <span aria-hidden="true" class="anchor">#</span>
  319. </a></h2>
  320. <p>\u9875\u9762\u5C40\u90E8\u5904\u4E8E\u7B49\u5F85\u5F02\u6B65\u6570\u636E\u6216\u6B63\u5728\u6E32\u67D3\u8FC7\u7A0B\u65F6\uFF0C\u5408\u9002\u7684\u52A0\u8F7D\u52A8\u6548\u4F1A\u6709\u6548\u7F13\u89E3\u7528\u6237\u7684\u7126\u8651\u3002</p>
  321. <h2 id="API">API <a class="header-anchor" href="#API">
  322. <span aria-hidden="true" class="anchor">#</span>
  323. </a></h2>
  324. <table>
  325. <thead>
  326. <tr>
  327. <th>\u53C2\u6570</th>
  328. <th>\u8BF4\u660E</th>
  329. <th>\u7C7B\u578B</th>
  330. <th>\u9ED8\u8BA4\u503C</th>
  331. <th>\u7248\u672C</th>
  332. </tr>
  333. </thead>
  334. <tbody>
  335. <tr>
  336. <td>delay</td>
  337. <td>\u5EF6\u8FDF\u663E\u793A\u52A0\u8F7D\u6548\u679C\u7684\u65F6\u95F4\uFF08\u9632\u6B62\u95EA\u70C1\uFF09</td>
  338. <td>number (\u6BEB\u79D2)</td>
  339. <td>-</td>
  340. <td></td>
  341. </tr>
  342. <tr>
  343. <td>indicator</td>
  344. <td>\u52A0\u8F7D\u6307\u793A\u7B26</td>
  345. <td>vNode | slot</td>
  346. <td>-</td>
  347. <td></td>
  348. </tr>
  349. <tr>
  350. <td>size</td>
  351. <td>\u7EC4\u4EF6\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>small</code> <code>default</code> <code>large</code></td>
  352. <td>string</td>
  353. <td><code>default</code></td>
  354. <td></td>
  355. </tr>
  356. <tr>
  357. <td>spinning</td>
  358. <td>\u662F\u5426\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001</td>
  359. <td>boolean</td>
  360. <td>true</td>
  361. <td></td>
  362. </tr>
  363. <tr>
  364. <td>tip</td>
  365. <td>\u5F53\u4F5C\u4E3A\u5305\u88F9\u5143\u7D20\u65F6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848</td>
  366. <td>string | slot</td>
  367. <td>-</td>
  368. <td>slot 3.0</td>
  369. </tr>
  370. <tr>
  371. <td>wrapperClassName</td>
  372. <td>\u5305\u88C5\u5668\u7684\u7C7B\u5C5E\u6027</td>
  373. <td>string</td>
  374. <td>-</td>
  375. <td></td>
  376. </tr>
  377. </tbody>
  378. </table>
  379. <h3 id="\u9759\u6001\u65B9\u6CD5">\u9759\u6001\u65B9\u6CD5 <a class="header-anchor" href="#\u9759\u6001\u65B9\u6CD5">
  380. <span aria-hidden="true" class="anchor">#</span>
  381. </a></h3>
  382. <ul>
  383. <li>
  384. <p><code>Spin.setDefaultIndicator({indicator})</code> \u540C\u4E0A <code>indicator</code>\uFF0C\u4F60\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5168\u5C40\u9ED8\u8BA4\u5143\u7D20</p>
  385. <pre class="language-jsx" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
  386. Spin<span class="token punctuation">.</span><span class="token function">setDefaultIndicator</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  387. <span class="token literal-property property">indicator</span><span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'i'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'anticon anticon-loading anticon-spin ant-spin-dot'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  388. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  389. </code></pre>
  390. </li>
  391. </ul>
  392. `,lastUpdated:1748060301220}},M={class:"markdown"};function nn(o,s,c,l,k,h){return i(),A("article",M,s[0]||(s[0]=[y(`<p>\u7528\u4E8E\u9875\u9762\u548C\u533A\u5757\u7684\u52A0\u8F7D\u4E2D\u72B6\u6001\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>\u9875\u9762\u5C40\u90E8\u5904\u4E8E\u7B49\u5F85\u5F02\u6B65\u6570\u636E\u6216\u6B63\u5728\u6E32\u67D3\u8FC7\u7A0B\u65F6\uFF0C\u5408\u9002\u7684\u52A0\u8F7D\u52A8\u6548\u4F1A\u6709\u6548\u7F13\u89E3\u7528\u6237\u7684\u7126\u8651\u3002</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><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>delay</td><td>\u5EF6\u8FDF\u663E\u793A\u52A0\u8F7D\u6548\u679C\u7684\u65F6\u95F4\uFF08\u9632\u6B62\u95EA\u70C1\uFF09</td><td>number (\u6BEB\u79D2)</td><td>-</td><td></td></tr><tr><td>indicator</td><td>\u52A0\u8F7D\u6307\u793A\u7B26</td><td>vNode | slot</td><td>-</td><td></td></tr><tr><td>size</td><td>\u7EC4\u4EF6\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>small</code> <code>default</code> <code>large</code></td><td>string</td><td><code>default</code></td><td></td></tr><tr><td>spinning</td><td>\u662F\u5426\u4E3A\u52A0\u8F7D\u4E2D\u72B6\u6001</td><td>boolean</td><td>true</td><td></td></tr><tr><td>tip</td><td>\u5F53\u4F5C\u4E3A\u5305\u88F9\u5143\u7D20\u65F6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u6848</td><td>string | slot</td><td>-</td><td>slot 3.0</td></tr><tr><td>wrapperClassName</td><td>\u5305\u88C5\u5668\u7684\u7C7B\u5C5E\u6027</td><td>string</td><td>-</td><td></td></tr></tbody></table><h3 id="\u9759\u6001\u65B9\u6CD5">\u9759\u6001\u65B9\u6CD5 <a class="header-anchor" href="#\u9759\u6001\u65B9\u6CD5"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li><p><code>Spin.setDefaultIndicator({indicator})</code> \u540C\u4E0A <code>indicator</code>\uFF0C\u4F60\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5168\u5C40\u9ED8\u8BA4\u5143\u7D20</p><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  393. Spin<span class="token punctuation">.</span><span class="token function">setDefaultIndicator</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  394. <span class="token literal-property property">indicator</span><span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">&#39;i&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;anticon anticon-loading anticon-spin ant-spin-dot&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  395. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  396. </code></pre></li></ul>`,7)]))}const an=u(E,[["render",nn]]),sn={pageData:{title:"Spin",description:"",frontmatter:{category:"Components",type:"Feedback",title:"Spin",cover:"https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:"When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude."},{level:2,title:"API",slug:"API",content:""},{level:3,title:"Static Method",slug:"Static-Method",content:""}],relativePath:"components/spin/index.en-US.md",content:`
  397. A spinner for displaying loading state of a page or a section.
  398. ## When To Use
  399. When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users&#39; inquietude.
  400. ## API
  401. | Property | Description | Type | Default Value | Version |
  402. | --- | --- | --- | --- | --- |
  403. | delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | |
  404. | indicator | vue node of the spinning indicator | vNode \\|slot | - | |
  405. | size | size of Spin, options: \`small\`, \`default\` and \`large\` | string | \`default\` | |
  406. | spinning | whether Spin is spinning | boolean | true | |
  407. | tip | customize description content when Spin has children | string \\| slot | - | slot 3.0 |
  408. | wrapperClassName | className of wrapper when Spin has children | string | - | |
  409. ### Static Method
  410. - \`Spin.setDefaultIndicator({indicator})\` As \`indicator\`, you can define the global default spin element
  411. \`\`\`jsx
  412. import { h } from &#39;vue&#39;;
  413. Spin.setDefaultIndicator({
  414. indicator: h(&#39;i&#39;, { class: &#39;anticon anticon-loading anticon-spin ant-spin-dot&#39; }),
  415. });
  416. \`\`\`
  417. `,html:`<p>A spinner for displaying loading state of a page or a section.</p>
  418. <h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
  419. <span aria-hidden="true" class="anchor">#</span>
  420. </a></h2>
  421. <p>When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.</p>
  422. <h2 id="API">API <a class="header-anchor" href="#API">
  423. <span aria-hidden="true" class="anchor">#</span>
  424. </a></h2>
  425. <table>
  426. <thead>
  427. <tr>
  428. <th>Property</th>
  429. <th>Description</th>
  430. <th>Type</th>
  431. <th>Default Value</th>
  432. <th>Version</th>
  433. </tr>
  434. </thead>
  435. <tbody>
  436. <tr>
  437. <td>delay</td>
  438. <td>specifies a delay in milliseconds for loading state (prevent flush)</td>
  439. <td>number (milliseconds)</td>
  440. <td>-</td>
  441. <td></td>
  442. </tr>
  443. <tr>
  444. <td>indicator</td>
  445. <td>vue node of the spinning indicator</td>
  446. <td>vNode |slot</td>
  447. <td>-</td>
  448. <td></td>
  449. </tr>
  450. <tr>
  451. <td>size</td>
  452. <td>size of Spin, options: <code>small</code>, <code>default</code> and <code>large</code></td>
  453. <td>string</td>
  454. <td><code>default</code></td>
  455. <td></td>
  456. </tr>
  457. <tr>
  458. <td>spinning</td>
  459. <td>whether Spin is spinning</td>
  460. <td>boolean</td>
  461. <td>true</td>
  462. <td></td>
  463. </tr>
  464. <tr>
  465. <td>tip</td>
  466. <td>customize description content when Spin has children</td>
  467. <td>string | slot</td>
  468. <td>-</td>
  469. <td>slot 3.0</td>
  470. </tr>
  471. <tr>
  472. <td>wrapperClassName</td>
  473. <td>className of wrapper when Spin has children</td>
  474. <td>string</td>
  475. <td>-</td>
  476. <td></td>
  477. </tr>
  478. </tbody>
  479. </table>
  480. <h3 id="Static-Method">Static Method <a class="header-anchor" href="#Static-Method">
  481. <span aria-hidden="true" class="anchor">#</span>
  482. </a></h3>
  483. <ul>
  484. <li><code>Spin.setDefaultIndicator({indicator})</code> As <code>indicator</code>, you can define the global default spin element</li>
  485. </ul>
  486. <pre class="language-jsx" v-pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
  487. Spin<span class="token punctuation">.</span><span class="token function">setDefaultIndicator</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  488. <span class="token literal-property property">indicator</span><span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'i'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'anticon anticon-loading anticon-spin ant-spin-dot'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  489. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  490. </code></pre>
  491. `,lastUpdated:1748060301220}},tn={class:"markdown"};function on(o,s,c,l,k,h){return i(),A("article",tn,s[0]||(s[0]=[y(`<p>A spinner for displaying loading state of a page or a section.</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>When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users&#39; inquietude.</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default Value</th><th>Version</th></tr></thead><tbody><tr><td>delay</td><td>specifies a delay in milliseconds for loading state (prevent flush)</td><td>number (milliseconds)</td><td>-</td><td></td></tr><tr><td>indicator</td><td>vue node of the spinning indicator</td><td>vNode |slot</td><td>-</td><td></td></tr><tr><td>size</td><td>size of Spin, options: <code>small</code>, <code>default</code> and <code>large</code></td><td>string</td><td><code>default</code></td><td></td></tr><tr><td>spinning</td><td>whether Spin is spinning</td><td>boolean</td><td>true</td><td></td></tr><tr><td>tip</td><td>customize description content when Spin has children</td><td>string | slot</td><td>-</td><td>slot 3.0</td></tr><tr><td>wrapperClassName</td><td>className of wrapper when Spin has children</td><td>string</td><td>-</td><td></td></tr></tbody></table><h3 id="Static-Method">Static Method <a class="header-anchor" href="#Static-Method"><span aria-hidden="true" class="anchor">#</span></a></h3><ul><li><code>Spin.setDefaultIndicator({indicator})</code> As <code>indicator</code>, you can define the global default spin element</li></ul><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
  492. Spin<span class="token punctuation">.</span><span class="token function">setDefaultIndicator</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  493. <span class="token literal-property property">indicator</span><span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">&#39;i&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&#39;anticon anticon-loading anticon-spin ant-spin-dot&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  494. <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  495. </code></pre>`,8)]))}const en=u(sn,[["render",on]]),pn=b({CN:an,US:en,components:{Basic:S,Size:_,Inside:R,Nested:V,Tip:j,Delay:Q,CustomIndicator:q},setup(){return{}}});function cn(o,s,c,l,k,h){const d=t("basic"),g=t("size"),m=t("inside"),I=t("nested"),C=t("tip"),v=t("delay"),w=t("custom-indicator"),W=t("demo-sort");return i(),r(W,null,{default:e(()=>[p(d),p(g),p(m),p(I),p(C),p(v),p(w)]),_:1})}const un=u(pn,[["render",cn]]);export{un as default};