import{d as b,_ as m,l as I,w as t,j as c,k as i,b as n,f as o,e as a,X as N,r as G,P as F,J as w,K as B,b9 as T,a as W,h as P,F as f,t as Y,bo as R,as as S,av as X,aE as x,C as j,q as V}from"./index.3fe853a6.js";import{T as H,Y as K,F as z,L as E,S as L}from"./YoutubeOutlined.1f81eedb.js";import{M as D}from"./MinusCircleOutlined.981d5c27.js";const U=b({setup(){return{log:s=>{console.log(s)}}}});function J(e,s,u,r,C,g){const p=c("a-tag"),l=c("demo-box");return i(),I(l,{jsfiddle:{us:"Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `close` events.",cn:"\u57FA\u672C\u6807\u7B7E\u7684\u7528\u6CD5\uFF0C\u53EF\u4EE5\u901A\u8FC7\u6DFB\u52A0 `closable` \u53D8\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E\u3002\u53EF\u5173\u95ED\u6807\u7B7E\u5177\u6709 `close` \u4E24\u4E2A\u4E8B\u4EF6\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>\u57FA\u672C\u6807\u7B7E\u7684\u7528\u6CD5\uFF0C\u53EF\u4EE5\u901A\u8FC7\u6DFB\u52A0 <code>closable</code> \u53D8\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E\u3002\u53EF\u5173\u95ED\u6807\u7B7E\u5177\u6709 <code>close</code> \u4E24\u4E2A\u4E8B\u4EF6\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>Usage of basic Tag, and it could be closable by set <code>closable</code> property. Closable Tag supports <code>close</code> events.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic Usage"},relativePath:"components/tag/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS10YWc+VGFnIDE8L2EtdGFnPgogICAgPGEtdGFnPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS92dWVDb21wb25lbnQvYW50LWRlc2lnbiI+TGluazwvYT48L2EtdGFnPgogICAgPGEtdGFnIGNsb3NhYmxlIEBjbG9zZT0ibG9nIj5UYWcgMjwvYS10YWc+CiAgICA8YS10YWcgY2xvc2FibGUgQGNsb3NlLnByZXZlbnQ+UHJldmVudCBEZWZhdWx0PC9hLXRhZz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBsb2cgPSAoZTogTW91c2VFdmVudCkgPT4gewogICAgICBjb25zb2xlLmxvZyhlKTsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgbG9nLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS10YWc+VGFnIDE8L2EtdGFnPgogICAgPGEtdGFnPjxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS92dWVDb21wb25lbnQvYW50LWRlc2lnbiI+TGluazwvYT48L2EtdGFnPgogICAgPGEtdGFnIGNsb3NhYmxlIEBjbG9zZT0ibG9nIj5UYWcgMjwvYS10YWc+CiAgICA8YS10YWcgY2xvc2FibGUgQGNsb3NlLnByZXZlbnQ+UHJldmVudCBEZWZhdWx0PC9hLXRhZz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGxvZyA9IGUgPT4gewogICAgICBjb25zb2xlLmxvZyhlKTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsb2csCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:t(()=>[n("div",null,[o(p,null,{default:t(()=>s[1]||(s[1]=[a("Tag 1")])),_:1,__:[1]}),o(p,null,{default:t(()=>s[2]||(s[2]=[n("a",{href:"https://github.com/vueComponent/ant-design"},"Link",-1)])),_:1,__:[2]}),o(p,{closable:"",onClose:e.log},{default:t(()=>s[3]||(s[3]=[a("Tag 2")])),_:1,__:[3]},8,["onClose"]),o(p,{closable:"",onClose:s[0]||(s[0]=N(()=>{},["prevent"]))},{default:t(()=>s[4]||(s[4]=[a("Prevent Default")])),_:1,__:[4]})])]),htmlCode:t(()=>s[5]||(s[5]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a("Tag 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://github.com/vueComponent/ant-design"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Link"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"closable"),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("log"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"closable"),a(),n("span",{class:"token attr-name"},"@close.prevent"),n("span",{class:"token punctuation"},">")]),a("Prevent Default"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"log"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),a(" MouseEvent")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      log`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[6]||(s[6]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a("Tag 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://github.com/vueComponent/ant-design"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Link"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"closable"),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("log"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"closable"),a(),n("span",{class:"token attr-name"},"@close.prevent"),n("span",{class:"token punctuation"},">")]),a("Prevent Default"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"log"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"e"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      log`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const _=m(U,[["render",J]]),Q=b({setup(){return{handleChange:s=>{console.log(s)},checked1:G(!1),checked2:G(!1),checked3:G(!1)}}});function q(e,s,u,r,C,g){const p=c("a-checkable-tag"),l=c("demo-box");return i(),I(l,{jsfiddle:{us:"`CheckableTag` works like Checkbox, click it to toggle checked state.",cn:"\u53EF\u901A\u8FC7 `CheckableTag` \u5B9E\u73B0\u7C7B\u4F3C Checkbox \u7684\u6548\u679C\uFF0C\u70B9\u51FB\u5207\u6362\u9009\u4E2D\u6548\u679C\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\u901A\u8FC7 <code>CheckableTag</code> \u5B9E\u73B0\u7C7B\u4F3C Checkbox \u7684\u6548\u679C\uFF0C\u70B9\u51FB\u5207\u6362\u9009\u4E2D\u6548\u679C\u3002</p>
<blockquote>
<p>\u8BE5\u7EC4\u4EF6\u4E3A\u5B8C\u5168\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u4E0D\u652F\u6301\u975E\u53D7\u63A7\u7528\u6CD5\u3002</p>
</blockquote>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p><code>CheckableTag</code> works like Checkbox, click it to toggle checked state.</p>
<blockquote>
<p>it is an absolute controlled component and has no uncontrolled mode.</p>
</blockquote>
`,order:1,title:{"zh-CN":"\u53EF\u9009\u62E9","en-US":"Checkable"},relativePath:"components/tag/demo/checkable.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1jaGVja2FibGUtdGFnIHYtbW9kZWw6Y2hlY2tlZD0iY2hlY2tlZDEiIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSI+VGFnMTwvYS1jaGVja2FibGUtdGFnPgogICAgPGEtY2hlY2thYmxlLXRhZyB2LW1vZGVsOmNoZWNrZWQ9ImNoZWNrZWQyIiBAY2hhbmdlPSJoYW5kbGVDaGFuZ2UiPlRhZzI8L2EtY2hlY2thYmxlLXRhZz4KICAgIDxhLWNoZWNrYWJsZS10YWcgdi1tb2RlbDpjaGVja2VkPSJjaGVja2VkMyIgQGNoYW5nZT0iaGFuZGxlQ2hhbmdlIj5UYWczPC9hLWNoZWNrYWJsZS10YWc+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICAvLyBvciB1c2Ugd2F0Y2gKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChjaGVja2VkOiBib29sZWFuKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKGNoZWNrZWQpOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICBoYW5kbGVDaGFuZ2UsCiAgICAgIGNoZWNrZWQxOiByZWYoZmFsc2UpLAogICAgICBjaGVja2VkMjogcmVmKGZhbHNlKSwKICAgICAgY2hlY2tlZDM6IHJlZihmYWxzZSksCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1jaGVja2FibGUtdGFnIHYtbW9kZWw6Y2hlY2tlZD0iY2hlY2tlZDEiIEBjaGFuZ2U9ImhhbmRsZUNoYW5nZSI+VGFnMTwvYS1jaGVja2FibGUtdGFnPgogICAgPGEtY2hlY2thYmxlLXRhZyB2LW1vZGVsOmNoZWNrZWQ9ImNoZWNrZWQyIiBAY2hhbmdlPSJoYW5kbGVDaGFuZ2UiPlRhZzI8L2EtY2hlY2thYmxlLXRhZz4KICAgIDxhLWNoZWNrYWJsZS10YWcgdi1tb2RlbDpjaGVja2VkPSJjaGVja2VkMyIgQGNoYW5nZT0iaGFuZGxlQ2hhbmdlIj5UYWczPC9hLWNoZWNrYWJsZS10YWc+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIC8vIG9yIHVzZSB3YXRjaAogICAgY29uc3QgaGFuZGxlQ2hhbmdlID0gY2hlY2tlZCA9PiB7CiAgICAgIGNvbnNvbGUubG9nKGNoZWNrZWQpOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGhhbmRsZUNoYW5nZSwKICAgICAgY2hlY2tlZDE6IHJlZihmYWxzZSksCiAgICAgIGNoZWNrZWQyOiByZWYoZmFsc2UpLAogICAgICBjaGVja2VkMzogcmVmKGZhbHNlKSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:t(()=>[n("div",null,[o(p,{checked:e.checked1,"onUpdate:checked":s[0]||(s[0]=k=>e.checked1=k),onChange:e.handleChange},{default:t(()=>s[3]||(s[3]=[a("Tag1")])),_:1,__:[3]},8,["checked","onChange"]),o(p,{checked:e.checked2,"onUpdate:checked":s[1]||(s[1]=k=>e.checked2=k),onChange:e.handleChange},{default:t(()=>s[4]||(s[4]=[a("Tag2")])),_:1,__:[4]},8,["checked","onChange"]),o(p,{checked:e.checked3,"onUpdate:checked":s[2]||(s[2]=k=>e.checked3=k),onChange:e.handleChange},{default:t(()=>s[5]||(s[5]=[a("Tag3")])),_:1,__:[5]},8,["checked","onChange"])])]),htmlCode:t(()=>s[6]||(s[6]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token comment"},"// or use watch"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),a(" boolean")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("checked"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      handleChange`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checked1"),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(`
      `),n("span",{class:"token literal-property property"},"checked2"),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(`
      `),n("span",{class:"token literal-property property"},"checked3"),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(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[7]||(s[7]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),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("checked3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleChange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tag3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token comment"},"// or use watch"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"checked"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("checked"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      handleChange`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"checked1"),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(`
      `),n("span",{class:"token literal-property property"},"checked2"),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(`
      `),n("span",{class:"token literal-property property"},"checked3"),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(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const O=m(Q,[["render",q]]),M={};function $(e,s){const u=c("a-tag"),r=c("demo-box");return i(),I(r,{jsfiddle:{us:"We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.",cn:"\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u6807\u7B7E\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002\u5982\u679C\u9884\u8BBE\u503C\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u5177\u4F53\u7684\u8272\u503C\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>\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u6807\u7B7E\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002\u5982\u679C\u9884\u8BBE\u503C\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u5177\u4F53\u7684\u8272\u503C\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>We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.</p>
`,order:2,title:{"zh-CN":"\u591A\u5F69\u6807\u7B7E","en-US":"Colorful Tag"},relativePath:"components/tag/demo/colorful.vue",sourceCode:"PHRlbXBsYXRlPgogIDxoNCBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+UHJlc2V0czo8L2g0PgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InBpbmsiPnBpbms8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJyZWQiPnJlZDwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9Im9yYW5nZSI+b3JhbmdlPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZ3JlZW4iPmdyZWVuPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iY3lhbiI+Y3lhbjwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImJsdWUiPmJsdWU8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwdXJwbGUiPnB1cnBsZTwvYS10YWc+CiAgPC9kaXY+CiAgPGg0IHN0eWxlPSJtYXJnaW46ICcxNnB4IDAnIj5DdXN0b206PC9oND4KICA8ZGl2PgogICAgPGEtdGFnIGNvbG9yPSIjZjUwIj4jZjUwPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iIzJkYjdmNSI+IzJkYjdmNTwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9IiM4N2QwNjgiPiM4N2QwNjg8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSIjMTA4ZWU5Ij4jMTA4ZWU5PC9hLXRhZz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxoNCBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+UHJlc2V0czo8L2g0PgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InBpbmsiPnBpbms8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJyZWQiPnJlZDwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9Im9yYW5nZSI+b3JhbmdlPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZ3JlZW4iPmdyZWVuPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iY3lhbiI+Y3lhbjwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImJsdWUiPmJsdWU8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwdXJwbGUiPnB1cnBsZTwvYS10YWc+CiAgPC9kaXY+CiAgPGg0IHN0eWxlPSJtYXJnaW46ICcxNnB4IDAnIj5DdXN0b206PC9oND4KICA8ZGl2PgogICAgPGEtdGFnIGNvbG9yPSIjZjUwIj4jZjUwPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iIzJkYjdmNSI+IzJkYjdmNTwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9IiM4N2QwNjgiPiM4N2QwNjg8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSIjMTA4ZWU5Ij4jMTA4ZWU5PC9hLXRhZz4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4="}},{default:t(()=>[s[11]||(s[11]=n("h4",{style:{"margin-bottom":"16px"}},"Presets:",-1)),n("div",null,[o(u,{color:"pink"},{default:t(()=>s[0]||(s[0]=[a("pink")])),_:1,__:[0]}),o(u,{color:"red"},{default:t(()=>s[1]||(s[1]=[a("red")])),_:1,__:[1]}),o(u,{color:"orange"},{default:t(()=>s[2]||(s[2]=[a("orange")])),_:1,__:[2]}),o(u,{color:"green"},{default:t(()=>s[3]||(s[3]=[a("green")])),_:1,__:[3]}),o(u,{color:"cyan"},{default:t(()=>s[4]||(s[4]=[a("cyan")])),_:1,__:[4]}),o(u,{color:"blue"},{default:t(()=>s[5]||(s[5]=[a("blue")])),_:1,__:[5]}),o(u,{color:"purple"},{default:t(()=>s[6]||(s[6]=[a("purple")])),_:1,__:[6]})]),s[12]||(s[12]=n("h4",{style:{margin:"'16px 0'"}},"Custom:",-1)),n("div",null,[o(u,{color:"#f50"},{default:t(()=>s[7]||(s[7]=[a("#f50")])),_:1,__:[7]}),o(u,{color:"#2db7f5"},{default:t(()=>s[8]||(s[8]=[a("#2db7f5")])),_:1,__:[8]}),o(u,{color:"#87d068"},{default:t(()=>s[9]||(s[9]=[a("#87d068")])),_:1,__:[9]}),o(u,{color:"#108ee9"},{default:t(()=>s[10]||(s[10]=[a("#108ee9")])),_:1,__:[10]})])]),htmlCode:t(()=>s[13]||(s[13]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Presets:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pink"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("pink"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("red"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("red"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("orange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("orange"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("green"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("green"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("cyan"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("cyan"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("blue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("blue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("purple"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("purple"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token string"},"'16px 0'")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Custom:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#f50"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#2db7f5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#87d068"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#108ee9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[14]||(s[14]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Presets:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pink"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("pink"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("red"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("red"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("orange"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("orange"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("green"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("green"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("cyan"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("cyan"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("blue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("blue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("purple"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("purple"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("h4")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token string"},"'16px 0'")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Custom:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("h4")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#f50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#f50"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#2db7f5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#2db7f5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#87d068"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#87d068"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#108ee9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("#108ee9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const nn=m(M,[["render",$]]),an=b({components:{PlusOutlined:F},setup(){const e=G(),s=w({tags:["Unremovable","Tag 2","Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3"],inputVisible:!1,inputValue:""}),u=g=>{const p=s.tags.filter(l=>l!==g);console.log(p),s.tags=p},r=()=>{s.inputVisible=!0,T(()=>{e.value.focus()})},C=()=>{const g=s.inputValue;let p=s.tags;g&&p.indexOf(g)===-1&&(p=[...p,g]),console.log(p),Object.assign(s,{tags:p,inputVisible:!1,inputValue:""})};return{...B(s),handleClose:u,showInput:r,handleInputConfirm:C,inputRef:e}}});function sn(e,s,u,r,C,g){const p=c("a-tag"),l=c("a-tooltip"),k=c("a-input"),h=c("plus-outlined"),A=c("demo-box");return i(),I(A,{jsfiddle:{us:"Generating a set of Tags by array, you can add and remove dynamically.",cn:"\u7528\u6570\u7EC4\u751F\u6210\u4E00\u7EC4\u6807\u7B7E\uFF0C\u53EF\u4EE5\u52A8\u6001\u6DFB\u52A0\u548C\u5220\u9664\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>\u7528\u6570\u7EC4\u751F\u6210\u4E00\u7EC4\u6807\u7B7E\uFF0C\u53EF\u4EE5\u52A8\u6001\u6DFB\u52A0\u548C\u5220\u9664\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>Generating a set of Tags by array, you can add and remove dynamically.</p>
`,order:5,title:{"zh-CN":"\u52A8\u6001\u6DFB\u52A0\u548C\u5220\u9664","en-US":"Add & Remove Dynamically"},relativePath:"components/tag/demo/control.vue",sourceCode:"PHRlbXBsYXRlPgogIDx0ZW1wbGF0ZSB2LWZvcj0iKHRhZywgaW5kZXgpIGluIHRhZ3MiIDprZXk9InRhZyI+CiAgICA8YS10b29sdGlwIHYtaWY9InRhZy5sZW5ndGggPiAyMCIgOnRpdGxlPSJ0YWciPgogICAgICA8YS10YWcgOmNsb3NhYmxlPSJpbmRleCAhPT0gMCIgQGNsb3NlPSJoYW5kbGVDbG9zZSh0YWcpIj4KICAgICAgICB7eyBgJHt0YWcuc2xpY2UoMCwgMjApfS4uLmAgfX0KICAgICAgPC9hLXRhZz4KICAgIDwvYS10b29sdGlwPgogICAgPGEtdGFnIHYtZWxzZSA6Y2xvc2FibGU9ImluZGV4ICE9PSAwIiBAY2xvc2U9ImhhbmRsZUNsb3NlKHRhZykiPgogICAgICB7eyB0YWcgfX0KICAgIDwvYS10YWc+CiAgPC90ZW1wbGF0ZT4KICA8YS1pbnB1dAogICAgdi1pZj0iaW5wdXRWaXNpYmxlIgogICAgcmVmPSJpbnB1dFJlZiIKICAgIHYtbW9kZWw6dmFsdWU9ImlucHV0VmFsdWUiCiAgICB0eXBlPSJ0ZXh0IgogICAgc2l6ZT0ic21hbGwiCiAgICA6c3R5bGU9Insgd2lkdGg6ICc3OHB4JyB9IgogICAgQGJsdXI9ImhhbmRsZUlucHV0Q29uZmlybSIKICAgIEBrZXl1cC5lbnRlcj0iaGFuZGxlSW5wdXRDb25maXJtIgogIC8+CiAgPGEtdGFnIHYtZWxzZSBzdHlsZT0iYmFja2dyb3VuZDogI2ZmZjsgYm9yZGVyLXN0eWxlOiBkYXNoZWQiIEBjbGljaz0ic2hvd0lucHV0Ij4KICAgIDxwbHVzLW91dGxpbmVkIC8+CiAgICBOZXcgVGFnCiAgPC9hLXRhZz4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmLCByZWFjdGl2ZSwgdG9SZWZzLCBuZXh0VGljayB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IFBsdXNPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFBsdXNPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgaW5wdXRSZWYgPSByZWYoKTsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICB0YWdzOiBbJ1VucmVtb3ZhYmxlJywgJ1RhZyAyJywgJ1RhZyAzVGFnIDNUYWcgM1RhZyAzVGFnIDNUYWcgM1RhZyAzJ10sCiAgICAgIGlucHV0VmlzaWJsZTogZmFsc2UsCiAgICAgIGlucHV0VmFsdWU6ICcnLAogICAgfSk7CgogICAgY29uc3QgaGFuZGxlQ2xvc2UgPSAocmVtb3ZlZFRhZzogc3RyaW5nKSA9PiB7CiAgICAgIGNvbnN0IHRhZ3MgPSBzdGF0ZS50YWdzLmZpbHRlcih0YWcgPT4gdGFnICE9PSByZW1vdmVkVGFnKTsKICAgICAgY29uc29sZS5sb2codGFncyk7CiAgICAgIHN0YXRlLnRhZ3MgPSB0YWdzOwogICAgfTsKCiAgICBjb25zdCBzaG93SW5wdXQgPSAoKSA9PiB7CiAgICAgIHN0YXRlLmlucHV0VmlzaWJsZSA9IHRydWU7CiAgICAgIG5leHRUaWNrKCgpID0+IHsKICAgICAgICBpbnB1dFJlZi52YWx1ZS5mb2N1cygpOwogICAgICB9KTsKICAgIH07CgogICAgY29uc3QgaGFuZGxlSW5wdXRDb25maXJtID0gKCkgPT4gewogICAgICBjb25zdCBpbnB1dFZhbHVlID0gc3RhdGUuaW5wdXRWYWx1ZTsKICAgICAgbGV0IHRhZ3MgPSBzdGF0ZS50YWdzOwogICAgICBpZiAoaW5wdXRWYWx1ZSAmJiB0YWdzLmluZGV4T2YoaW5wdXRWYWx1ZSkgPT09IC0xKSB7CiAgICAgICAgdGFncyA9IFsuLi50YWdzLCBpbnB1dFZhbHVlXTsKICAgICAgfQogICAgICBjb25zb2xlLmxvZyh0YWdzKTsKICAgICAgT2JqZWN0LmFzc2lnbihzdGF0ZSwgewogICAgICAgIHRhZ3MsCiAgICAgICAgaW5wdXRWaXNpYmxlOiBmYWxzZSwKICAgICAgICBpbnB1dFZhbHVlOiAnJywKICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xvc2UsCiAgICAgIHNob3dJbnB1dCwKICAgICAgaGFuZGxlSW5wdXRDb25maXJtLAogICAgICBpbnB1dFJlZiwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDx0ZW1wbGF0ZSB2LWZvcj0iKHRhZywgaW5kZXgpIGluIHRhZ3MiIDprZXk9InRhZyI+CiAgICA8YS10b29sdGlwIHYtaWY9InRhZy5sZW5ndGggPiAyMCIgOnRpdGxlPSJ0YWciPgogICAgICA8YS10YWcgOmNsb3NhYmxlPSJpbmRleCAhPT0gMCIgQGNsb3NlPSJoYW5kbGVDbG9zZSh0YWcpIj4KICAgICAgICB7eyBgJHt0YWcuc2xpY2UoMCwgMjApfS4uLmAgfX0KICAgICAgPC9hLXRhZz4KICAgIDwvYS10b29sdGlwPgogICAgPGEtdGFnIHYtZWxzZSA6Y2xvc2FibGU9ImluZGV4ICE9PSAwIiBAY2xvc2U9ImhhbmRsZUNsb3NlKHRhZykiPgogICAgICB7eyB0YWcgfX0KICAgIDwvYS10YWc+CiAgPC90ZW1wbGF0ZT4KICA8YS1pbnB1dAogICAgdi1pZj0iaW5wdXRWaXNpYmxlIgogICAgcmVmPSJpbnB1dFJlZiIKICAgIHYtbW9kZWw6dmFsdWU9ImlucHV0VmFsdWUiCiAgICB0eXBlPSJ0ZXh0IgogICAgc2l6ZT0ic21hbGwiCiAgICA6c3R5bGU9Insgd2lkdGg6ICc3OHB4JyB9IgogICAgQGJsdXI9ImhhbmRsZUlucHV0Q29uZmlybSIKICAgIEBrZXl1cC5lbnRlcj0iaGFuZGxlSW5wdXRDb25maXJtIgogIC8+CiAgPGEtdGFnIHYtZWxzZSBzdHlsZT0iYmFja2dyb3VuZDogI2ZmZjsgYm9yZGVyLXN0eWxlOiBkYXNoZWQiIEBjbGljaz0ic2hvd0lucHV0Ij4KICAgIDxwbHVzLW91dGxpbmVkIC8+CiAgICBOZXcgVGFnCiAgPC9hLXRhZz4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYsIHJlYWN0aXZlLCB0b1JlZnMsIG5leHRUaWNrIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgUGx1c091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBQbHVzT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGlucHV0UmVmID0gcmVmKCk7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgdGFnczogWydVbnJlbW92YWJsZScsICdUYWcgMicsICdUYWcgM1RhZyAzVGFnIDNUYWcgM1RhZyAzVGFnIDNUYWcgMyddLAogICAgICBpbnB1dFZpc2libGU6IGZhbHNlLAogICAgICBpbnB1dFZhbHVlOiAnJywKICAgIH0pOwogICAgY29uc3QgaGFuZGxlQ2xvc2UgPSByZW1vdmVkVGFnID0+IHsKICAgICAgY29uc3QgdGFncyA9IHN0YXRlLnRhZ3MuZmlsdGVyKHRhZyA9PiB0YWcgIT09IHJlbW92ZWRUYWcpOwogICAgICBjb25zb2xlLmxvZyh0YWdzKTsKICAgICAgc3RhdGUudGFncyA9IHRhZ3M7CiAgICB9OwogICAgY29uc3Qgc2hvd0lucHV0ID0gKCkgPT4gewogICAgICBzdGF0ZS5pbnB1dFZpc2libGUgPSB0cnVlOwogICAgICBuZXh0VGljaygoKSA9PiB7CiAgICAgICAgaW5wdXRSZWYudmFsdWUuZm9jdXMoKTsKICAgICAgfSk7CiAgICB9OwogICAgY29uc3QgaGFuZGxlSW5wdXRDb25maXJtID0gKCkgPT4gewogICAgICBjb25zdCBpbnB1dFZhbHVlID0gc3RhdGUuaW5wdXRWYWx1ZTsKICAgICAgbGV0IHRhZ3MgPSBzdGF0ZS50YWdzOwogICAgICBpZiAoaW5wdXRWYWx1ZSAmJiB0YWdzLmluZGV4T2YoaW5wdXRWYWx1ZSkgPT09IC0xKSB7CiAgICAgICAgdGFncyA9IFsuLi50YWdzLCBpbnB1dFZhbHVlXTsKICAgICAgfQogICAgICBjb25zb2xlLmxvZyh0YWdzKTsKICAgICAgT2JqZWN0LmFzc2lnbihzdGF0ZSwgewogICAgICAgIHRhZ3MsCiAgICAgICAgaW5wdXRWaXNpYmxlOiBmYWxzZSwKICAgICAgICBpbnB1dFZhbHVlOiAnJywKICAgICAgfSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xvc2UsCiAgICAgIHNob3dJbnB1dCwKICAgICAgaGFuZGxlSW5wdXRDb25maXJtLAogICAgICBpbnB1dFJlZiwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:t(()=>[(i(!0),W(f,null,P(e.tags,(d,Z)=>(i(),W(f,{key:d},[d.length>20?(i(),I(l,{key:0,title:d},{default:t(()=>[o(p,{closable:Z!==0,onClose:v=>e.handleClose(d)},{default:t(()=>[a(Y(`${d.slice(0,20)}...`),1)]),_:2},1032,["closable","onClose"])]),_:2},1032,["title"])):(i(),I(p,{key:1,closable:Z!==0,onClose:v=>e.handleClose(d)},{default:t(()=>[a(Y(d),1)]),_:2},1032,["closable","onClose"]))],64))),128)),e.inputVisible?(i(),I(k,{key:0,ref:"inputRef",value:e.inputValue,"onUpdate:value":s[0]||(s[0]=d=>e.inputValue=d),type:"text",size:"small",style:{width:"78px"},onBlur:e.handleInputConfirm,onKeyup:R(e.handleInputConfirm,["enter"])},null,8,["value","onBlur","onKeyup"])):(i(),I(p,{key:1,style:{background:"#fff","border-style":"dashed"},onClick:e.showInput},{default:t(()=>[o(h),s[1]||(s[1]=a(" New Tag "))]),_:1,__:[1]},8,["onClick"]))]),htmlCode:t(()=>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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("(tag, index) in tags"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag.length > 20"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index !== 0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleClose(tag)"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("\n        {{ `${tag.slice(0, 20)}...` }}\n      "),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tooltip")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index !== 0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleClose(tag)"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      {{ tag }}
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
    `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputVisible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputValue"),n("span",{class:"token punctuation"},'"')]),a(`
    `),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"},'"'),a("text"),n("span",{class:"token punctuation"},'"')]),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 attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ width: '78px' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@blur"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleInputConfirm"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@keyup.enter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleInputConfirm"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},"/>")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #fff"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"border-style"),n("span",{class:"token punctuation"},":"),a(" dashed")]),n("span",{class:"token punctuation"},'"')])]),a(),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"},'"'),a("showInput"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("plus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    New Tag
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs"),n("span",{class:"token punctuation"},","),a(" nextTick "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" PlusOutlined "),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(`

`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" inputRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"tags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'Unremovable'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tag 2'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"inputVisible"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"inputValue"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"removedTag"),n("span",{class:"token operator"},":"),a(" string")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" tags "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("tags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"filter"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"tag"),a(),n("span",{class:"token operator"},"=>"),a(" tag "),n("span",{class:"token operator"},"!=="),a(" removedTag"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("tags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("tags "),n("span",{class:"token operator"},"="),a(" tags"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showInput"),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(`
      state`),n("span",{class:"token punctuation"},"."),a("inputVisible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token function"},"nextTick"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
        inputRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"focus"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleInputConfirm"),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(`
      `),n("span",{class:"token keyword"},"const"),a(" inputValue "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("inputValue"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" tags "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("tags"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("inputValue "),n("span",{class:"token operator"},"&&"),a(" tags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("inputValue"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        tags `),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),a("tags"),n("span",{class:"token punctuation"},","),a(" inputValue"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("tags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      Object`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"assign"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(`
        tags`),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"inputVisible"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"inputValue"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      handleClose`),n("span",{class:"token punctuation"},","),a(`
      showInput`),n("span",{class:"token punctuation"},","),a(`
      handleInputConfirm`),n("span",{class:"token punctuation"},","),a(`
      inputRef`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("(tag, index) in tags"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tooltip")]),a(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag.length > 20"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index !== 0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleClose(tag)"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("\n        {{ `${tag.slice(0, 20)}...` }}\n      "),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tooltip")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("index !== 0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleClose(tag)"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      {{ tag }}
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
    `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputVisible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputRef"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("inputValue"),n("span",{class:"token punctuation"},'"')]),a(`
    `),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"},'"'),a("text"),n("span",{class:"token punctuation"},'"')]),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 attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ width: '78px' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@blur"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleInputConfirm"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@keyup.enter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("handleInputConfirm"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},"/>")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"v-else"),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #fff"),n("span",{class:"token punctuation"},";"),a(),n("span",{class:"token property"},"border-style"),n("span",{class:"token punctuation"},":"),a(" dashed")]),n("span",{class:"token punctuation"},'"')])]),a(),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"},'"'),a("showInput"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("plus-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    New Tag
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs"),n("span",{class:"token punctuation"},","),a(" nextTick "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" PlusOutlined "),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(`
`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" inputRef "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"tags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'Unremovable'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tag 2'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"inputVisible"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"inputValue"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"removedTag"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" tags "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("tags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"filter"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"tag"),a(),n("span",{class:"token operator"},"=>"),a(" tag "),n("span",{class:"token operator"},"!=="),a(" removedTag"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("tags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("tags "),n("span",{class:"token operator"},"="),a(" tags"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showInput"),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(`
      state`),n("span",{class:"token punctuation"},"."),a("inputVisible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token function"},"nextTick"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
        inputRef`),n("span",{class:"token punctuation"},"."),a("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"focus"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleInputConfirm"),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(`
      `),n("span",{class:"token keyword"},"const"),a(" inputValue "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("inputValue"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" tags "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("tags"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"if"),a(),n("span",{class:"token punctuation"},"("),a("inputValue "),n("span",{class:"token operator"},"&&"),a(" tags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),a("inputValue"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"==="),a(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        tags `),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),a("tags"),n("span",{class:"token punctuation"},","),a(" inputValue"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),a("tags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      Object`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"assign"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token punctuation"},"{"),a(`
        tags`),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"inputVisible"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"inputValue"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      handleClose`),n("span",{class:"token punctuation"},","),a(`
      showInput`),n("span",{class:"token punctuation"},","),a(`
      handleInputConfirm`),n("span",{class:"token punctuation"},","),a(`
      inputRef`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const tn=m(an,[["render",sn]]),on=b({setup(){return{visible:G(!1)}}});function en(e,s,u,r,C,g){const p=c("a-tag"),l=c("a-button"),k=c("demo-box");return i(),I(k,{jsfiddle:{us:"By using the `visible` prop, you can control the close state of Tag.",cn:"\u901A\u8FC7 `visible` \u5C5E\u6027\u63A7\u5236\u5173\u95ED\u72B6\u6001\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\u8FC7 <code>visible</code> \u5C5E\u6027\u63A7\u5236\u5173\u95ED\u72B6\u6001\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>By using the <code>visible</code> prop, you can control the close state of Tag.</p>
`,order:4,title:{"zh-CN":"\u63A7\u5236\u5173\u95ED\u72B6\u6001","en-US":"Controlled"},relativePath:"components/tag/demo/controlled.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXRhZyB2LW1vZGVsOnZpc2libGU9InZpc2libGUiIGNsb3NhYmxlPk1vdmllczwvYS10YWc+CiAgPGJyIC8+CiAgPGEtYnV0dG9uIHNpemU9InNtYWxsIiBAY2xpY2s9InZpc2libGUgPSAhdmlzaWJsZSI+VG9nZ2xlPC9hLWJ1dHRvbj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIHJldHVybiB7CiAgICAgIHZpc2libGU6IHJlZihmYWxzZSksCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXRhZyB2LW1vZGVsOnZpc2libGU9InZpc2libGUiIGNsb3NhYmxlPk1vdmllczwvYS10YWc+CiAgPGJyIC8+CiAgPGEtYnV0dG9uIHNpemU9InNtYWxsIiBAY2xpY2s9InZpc2libGUgPSAhdmlzaWJsZSI+VG9nZ2xlPC9hLWJ1dHRvbj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgdmlzaWJsZTogcmVmKGZhbHNlKSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:t(()=>[o(p,{visible:e.visible,"onUpdate:visible":s[0]||(s[0]=h=>e.visible=h),closable:""},{default:t(()=>s[2]||(s[2]=[a("Movies")])),_:1,__:[2]},8,["visible"]),s[4]||(s[4]=n("br",null,null,-1)),o(l,{size:"small",onClick:s[1]||(s[1]=h=>e.visible=!e.visible)},{default:t(()=>s[3]||(s[3]=[a("Toggle")])),_:1,__:[3]})]),htmlCode:t(()=>s[5]||(s[5]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"closable"),n("span",{class:"token punctuation"},">")]),a("Movies"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),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 attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible = !visible"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Toggle"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"visible"),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(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[6]||(s[6]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"closable"),n("span",{class:"token punctuation"},">")]),a("Movies"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),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 attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible = !visible"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Toggle"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"visible"),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(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const cn=m(on,[["render",en]]),pn=b({setup(){const e=w({tags:["Movies","Books","Music","Sports"],selectedTags:[]}),s=(u,r)=>{const{selectedTags:C}=e,g=r?[...C,u]:C.filter(p=>p!==u);console.log("You are interested in: ",g),e.selectedTags=g};return{...B(e),handleChange:s}}});function ln(e,s,u,r,C,g){const p=c("a-checkable-tag"),l=c("demo-box");return i(),I(l,{jsfiddle:{us:"Select your favourite topics.",cn:"\u9009\u62E9\u4F60\u611F\u5174\u8DA3\u7684\u8BDD\u9898\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>\u9009\u62E9\u4F60\u611F\u5174\u8DA3\u7684\u8BDD\u9898\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>Select your favourite topics.</p>
`,order:5,title:{"zh-CN":"\u70ED\u95E8\u6807\u7B7E","en-US":"Hot Tags"},relativePath:"components/tag/demo/hot-tags.vue",sourceCode:"PHRlbXBsYXRlPgogIDxzcGFuIDpzdHlsZT0ieyBtYXJnaW5SaWdodDogJzhweCcgfSI+Q2F0ZWdvcmllczo8L3NwYW4+CiAgPHRlbXBsYXRlIHYtZm9yPSJ0YWcgaW4gdGFncyIgOmtleT0idGFnIj4KICAgIDxhLWNoZWNrYWJsZS10YWcKICAgICAgOmNoZWNrZWQ9InNlbGVjdGVkVGFncy5pbmRleE9mKHRhZykgPiAtMSIKICAgICAgQGNoYW5nZT0iY2hlY2tlZCA9PiBoYW5kbGVDaGFuZ2UodGFnLCBjaGVja2VkKSIKICAgID4KICAgICAge3sgdGFnIH19CiAgICA8L2EtY2hlY2thYmxlLXRhZz4KICA8L3RlbXBsYXRlPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICB0YWdzOiBbJ01vdmllcycsICdCb29rcycsICdNdXNpYycsICdTcG9ydHMnXSwKICAgICAgc2VsZWN0ZWRUYWdzOiBbXSBhcyBzdHJpbmdbXSwKICAgIH0pOwoKICAgIGNvbnN0IGhhbmRsZUNoYW5nZSA9ICh0YWc6IHN0cmluZywgY2hlY2tlZDogYm9vbGVhbikgPT4gewogICAgICBjb25zdCB7IHNlbGVjdGVkVGFncyB9ID0gc3RhdGU7CiAgICAgIGNvbnN0IG5leHRTZWxlY3RlZFRhZ3MgPSBjaGVja2VkCiAgICAgICAgPyBbLi4uc2VsZWN0ZWRUYWdzLCB0YWddCiAgICAgICAgOiBzZWxlY3RlZFRhZ3MuZmlsdGVyKHQgPT4gdCAhPT0gdGFnKTsKICAgICAgY29uc29sZS5sb2coJ1lvdSBhcmUgaW50ZXJlc3RlZCBpbjogJywgbmV4dFNlbGVjdGVkVGFncyk7CiAgICAgIHN0YXRlLnNlbGVjdGVkVGFncyA9IG5leHRTZWxlY3RlZFRhZ3M7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGhhbmRsZUNoYW5nZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxzcGFuIDpzdHlsZT0ieyBtYXJnaW5SaWdodDogJzhweCcgfSI+Q2F0ZWdvcmllczo8L3NwYW4+CiAgPHRlbXBsYXRlIHYtZm9yPSJ0YWcgaW4gdGFncyIgOmtleT0idGFnIj4KICAgIDxhLWNoZWNrYWJsZS10YWcKICAgICAgOmNoZWNrZWQ9InNlbGVjdGVkVGFncy5pbmRleE9mKHRhZykgPiAtMSIKICAgICAgQGNoYW5nZT0iY2hlY2tlZCA9PiBoYW5kbGVDaGFuZ2UodGFnLCBjaGVja2VkKSIKICAgID4KICAgICAge3sgdGFnIH19CiAgICA8L2EtY2hlY2thYmxlLXRhZz4KICA8L3RlbXBsYXRlPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHRhZ3M6IFsnTW92aWVzJywgJ0Jvb2tzJywgJ011c2ljJywgJ1Nwb3J0cyddLAogICAgICBzZWxlY3RlZFRhZ3M6IFtdLAogICAgfSk7CiAgICBjb25zdCBoYW5kbGVDaGFuZ2UgPSAodGFnLCBjaGVja2VkKSA9PiB7CiAgICAgIGNvbnN0IHsKICAgICAgICBzZWxlY3RlZFRhZ3MsCiAgICAgIH0gPSBzdGF0ZTsKICAgICAgY29uc3QgbmV4dFNlbGVjdGVkVGFncyA9IGNoZWNrZWQgPyBbLi4uc2VsZWN0ZWRUYWdzLCB0YWddIDogc2VsZWN0ZWRUYWdzLmZpbHRlcih0ID0+IHQgIT09IHRhZyk7CiAgICAgIGNvbnNvbGUubG9nKCdZb3UgYXJlIGludGVyZXN0ZWQgaW46ICcsIG5leHRTZWxlY3RlZFRhZ3MpOwogICAgICBzdGF0ZS5zZWxlY3RlZFRhZ3MgPSBuZXh0U2VsZWN0ZWRUYWdzOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGhhbmRsZUNoYW5nZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:t(()=>[s[0]||(s[0]=n("span",{style:{marginRight:"8px"}},"Categories:",-1)),(i(!0),W(f,null,P(e.tags,k=>(i(),I(p,{key:k,checked:e.selectedTags.indexOf(k)>-1,onChange:h=>e.handleChange(k,h)},{default:t(()=>[a(Y(k),1)]),_:2},1032,["checked","onChange"]))),128))]),htmlCode:t(()=>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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ marginRight: '8px' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Categories:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag in tags"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),a(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("selectedTags.indexOf(tag) > -1"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("checked => handleChange(tag, checked)"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      {{ tag }}
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs "),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"tags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'Movies'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Books'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Music'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Sports'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"selectedTags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token keyword"},"as"),a(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"tag"),n("span",{class:"token operator"},":"),a(" string"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),a(" boolean")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(" selectedTags "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" nextSelectedTags "),n("span",{class:"token operator"},"="),a(` checked
        `),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),a("selectedTags"),n("span",{class:"token punctuation"},","),a(" tag"),n("span",{class:"token punctuation"},"]"),a(`
        `),n("span",{class:"token operator"},":"),a(" selectedTags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"filter"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"t"),a(),n("span",{class:"token operator"},"=>"),a(" t "),n("span",{class:"token operator"},"!=="),a(" tag"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'You are interested in: '"),n("span",{class:"token punctuation"},","),a(" nextSelectedTags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("selectedTags "),n("span",{class:"token operator"},"="),a(" nextSelectedTags"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      handleChange`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ marginRight: '8px' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Categories:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag in tags"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tag"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-checkable-tag")]),a(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("selectedTags.indexOf(tag) > -1"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("checked => handleChange(tag, checked)"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      {{ tag }}
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-checkable-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs "),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(`
`),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(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"tags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'Movies'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Books'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Music'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token string"},"'Sports'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"selectedTags"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"handleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("tag"),n("span",{class:"token punctuation"},","),a(" checked")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token punctuation"},"{"),a(`
        selectedTags`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" nextSelectedTags "),n("span",{class:"token operator"},"="),a(" checked "),n("span",{class:"token operator"},"?"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),a("selectedTags"),n("span",{class:"token punctuation"},","),a(" tag"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},":"),a(" selectedTags"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"filter"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"t"),a(),n("span",{class:"token operator"},"=>"),a(" t "),n("span",{class:"token operator"},"!=="),a(" tag"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'You are interested in: '"),n("span",{class:"token punctuation"},","),a(" nextSelectedTags"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("selectedTags "),n("span",{class:"token operator"},"="),a(" nextSelectedTags"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
      handleChange`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const un=m(pn,[["render",ln]]),kn=b({components:{TwitterOutlined:H,YoutubeOutlined:K,FacebookOutlined:z,LinkedinOutlined:E}});function gn(e,s,u,r,C,g){const p=c("twitter-outlined"),l=c("a-tag"),k=c("youtube-outlined"),h=c("facebook-outlined"),A=c("linkedin-outlined"),d=c("demo-box");return i(),I(d,{jsfiddle:{us:"`Tag` components can contain an `Icon`. This is done by setting the `icon` property or placing an `Icon` component within the `Tag`.\nIf you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Tag` rather than using the `icon` property.",cn:"\u5F53\u9700\u8981\u5728 `Tag` \u5185\u5D4C\u5165 `Icon` \u65F6\uFF0C\u53EF\u4EE5\u8BBE\u7F6E `icon` \u5C5E\u6027\uFF0C\u6216\u8005\u76F4\u63A5\u5728 `Tag` \u5185\u4F7F\u7528 `Icon` \u7EC4\u4EF6\u3002\n\u5982\u679C\u60F3\u63A7\u5236 `Icon` \u5177\u4F53\u7684\u4F4D\u7F6E\uFF0C\u53EA\u80FD\u76F4\u63A5\u4F7F\u7528 `Icon` \u7EC4\u4EF6\uFF0C\u800C\u975E `icon` \u5C5E\u6027\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>\u5F53\u9700\u8981\u5728 <code>Tag</code> \u5185\u5D4C\u5165 <code>Icon</code> \u65F6\uFF0C\u53EF\u4EE5\u8BBE\u7F6E <code>icon</code> \u5C5E\u6027\uFF0C\u6216\u8005\u76F4\u63A5\u5728 <code>Tag</code> \u5185\u4F7F\u7528 <code>Icon</code> \u7EC4\u4EF6\u3002
\u5982\u679C\u60F3\u63A7\u5236 <code>Icon</code> \u5177\u4F53\u7684\u4F4D\u7F6E\uFF0C\u53EA\u80FD\u76F4\u63A5\u4F7F\u7528 <code>Icon</code> \u7EC4\u4EF6\uFF0C\u800C\u975E <code>icon</code> \u5C5E\u6027\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>Tag</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Tag</code>.
If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Tag</code> rather than using the <code>icon</code> property.</p>
`,order:6,title:{"zh-CN":"\u56FE\u6807\u6309\u94AE","en-US":"Icon"},relativePath:"components/tag/demo/icon.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXRhZyBjb2xvcj0iIzU1YWNlZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgIDx0d2l0dGVyLW91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogICAgVHdpdHRlcgogIDwvYS10YWc+CiAgPGEtdGFnIGNvbG9yPSIjY2QyMDFmIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPHlvdXR1YmUtb3V0bGluZWQgLz4KICAgIDwvdGVtcGxhdGU+CiAgICBZb3V0dWJlCiAgPC9hLXRhZz4KICA8YS10YWcgY29sb3I9IiMzYjU5OTkiPgogICAgPHRlbXBsYXRlICNpY29uPgogICAgICA8ZmFjZWJvb2stb3V0bGluZWQgLz4KICAgIDwvdGVtcGxhdGU+CiAgICBGYWNlYm9vawogIDwvYS10YWc+CiAgPGEtdGFnIGNvbG9yPSIjNTVhY2VlIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPGxpbmtlZGluLW91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogICAgTGlua2VkSW4KICA8L2EtdGFnPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBUd2l0dGVyT3V0bGluZWQsCiAgWW91dHViZU91dGxpbmVkLAogIEZhY2Vib29rT3V0bGluZWQsCiAgTGlua2VkaW5PdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBUd2l0dGVyT3V0bGluZWQsCiAgICBZb3V0dWJlT3V0bGluZWQsCiAgICBGYWNlYm9va091dGxpbmVkLAogICAgTGlua2VkaW5PdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXRhZyBjb2xvcj0iIzU1YWNlZSI+CiAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgIDx0d2l0dGVyLW91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogICAgVHdpdHRlcgogIDwvYS10YWc+CiAgPGEtdGFnIGNvbG9yPSIjY2QyMDFmIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPHlvdXR1YmUtb3V0bGluZWQgLz4KICAgIDwvdGVtcGxhdGU+CiAgICBZb3V0dWJlCiAgPC9hLXRhZz4KICA8YS10YWcgY29sb3I9IiMzYjU5OTkiPgogICAgPHRlbXBsYXRlICNpY29uPgogICAgICA8ZmFjZWJvb2stb3V0bGluZWQgLz4KICAgIDwvdGVtcGxhdGU+CiAgICBGYWNlYm9vawogIDwvYS10YWc+CiAgPGEtdGFnIGNvbG9yPSIjNTVhY2VlIj4KICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgPGxpbmtlZGluLW91dGxpbmVkIC8+CiAgICA8L3RlbXBsYXRlPgogICAgTGlua2VkSW4KICA8L2EtdGFnPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBUd2l0dGVyT3V0bGluZWQsIFlvdXR1YmVPdXRsaW5lZCwgRmFjZWJvb2tPdXRsaW5lZCwgTGlua2VkaW5PdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgVHdpdHRlck91dGxpbmVkLAogICAgWW91dHViZU91dGxpbmVkLAogICAgRmFjZWJvb2tPdXRsaW5lZCwKICAgIExpbmtlZGluT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:t(()=>[o(l,{color:"#55acee"},{icon:t(()=>[o(p)]),default:t(()=>[s[0]||(s[0]=a(" Twitter "))]),_:1,__:[0]}),o(l,{color:"#cd201f"},{icon:t(()=>[o(k)]),default:t(()=>[s[1]||(s[1]=a(" Youtube "))]),_:1,__:[1]}),o(l,{color:"#3b5999"},{icon:t(()=>[o(h)]),default:t(()=>[s[2]||(s[2]=a(" Facebook "))]),_:1,__:[2]}),o(l,{color:"#55acee"},{icon:t(()=>[o(A)]),default:t(()=>[s[3]||(s[3]=a(" LinkedIn "))]),_:1,__:[3]})]),htmlCode:t(()=>s[4]||(s[4]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#55acee"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("twitter-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Twitter
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#cd201f"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("youtube-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Youtube
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#3b5999"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("facebook-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Facebook
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#55acee"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("linkedin-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    LinkedIn
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(`
  TwitterOutlined`),n("span",{class:"token punctuation"},","),a(`
  YoutubeOutlined`),n("span",{class:"token punctuation"},","),a(`
  FacebookOutlined`),n("span",{class:"token punctuation"},","),a(`
  LinkedinOutlined`),n("span",{class:"token punctuation"},","),a(`
`),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(`

`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    TwitterOutlined`),n("span",{class:"token punctuation"},","),a(`
    YoutubeOutlined`),n("span",{class:"token punctuation"},","),a(`
    FacebookOutlined`),n("span",{class:"token punctuation"},","),a(`
    LinkedinOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[5]||(s[5]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#55acee"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("twitter-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Twitter
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#cd201f"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("youtube-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Youtube
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#3b5999"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("facebook-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    Facebook
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("#55acee"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("linkedin-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    LinkedIn
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" TwitterOutlined"),n("span",{class:"token punctuation"},","),a(" YoutubeOutlined"),n("span",{class:"token punctuation"},","),a(" FacebookOutlined"),n("span",{class:"token punctuation"},","),a(" LinkedinOutlined "),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(`
`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    TwitterOutlined`),n("span",{class:"token punctuation"},","),a(`
    YoutubeOutlined`),n("span",{class:"token punctuation"},","),a(`
    FacebookOutlined`),n("span",{class:"token punctuation"},","),a(`
    LinkedinOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const rn=m(kn,[["render",gn]]),dn=b({components:{CheckCircleOutlined:S,SyncOutlined:L,CloseCircleOutlined:X,ExclamationCircleOutlined:x,ClockCircleOutlined:j,MinusCircleOutlined:D}});function Cn(e,s,u,r,C,g){const p=c("a-divider"),l=c("a-tag"),k=c("check-circle-outlined"),h=c("sync-outlined"),A=c("close-circle-outlined"),d=c("exclamation-circle-outlined"),Z=c("clock-circle-outlined"),v=c("minus-circle-outlined"),y=c("demo-box");return i(),I(y,{jsfiddle:{us:"We preset five different colors, you can set color property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.",cn:"\u9884\u8BBE\u4E94\u79CD\u72B6\u6001\u989C\u8272\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E `color` \u4E3A `success`\u3001 `processing`\u3001`error`\u3001`default`\u3001`warning` \u6765\u4EE3\u8868\u4E0D\u540C\u7684\u72B6\u6001\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>\u9884\u8BBE\u4E94\u79CD\u72B6\u6001\u989C\u8272\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>color</code> \u4E3A <code>success</code>\u3001 <code>processing</code>\u3001<code>error</code>\u3001<code>default</code>\u3001<code>warning</code> \u6765\u4EE3\u8868\u4E0D\u540C\u7684\u72B6\u6001\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>We preset five different colors, you can set color property such as <code>success</code>,<code>processing</code>,<code>error</code>,<code>default</code> and <code>warning</code> to indicate specific status.</p>
`,order:7,title:{"zh-CN":"\u9884\u8BBE\u72B6\u6001\u7684\u6807\u7B7E","en-US":"Status Tag"},relativePath:"components/tag/demo/status.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPldpdGhvdXQgaWNvbjwvYS1kaXZpZGVyPgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InN1Y2Nlc3MiPnN1Y2Nlc3M8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwcm9jZXNzaW5nIj5wcm9jZXNzaW5nPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZXJyb3IiPmVycm9yPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0id2FybmluZyI+d2FybmluZzwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImRlZmF1bHQiPmRlZmF1bHQ8L2EtdGFnPgogIDwvZGl2PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPldpdGggaWNvbjwvYS1kaXZpZGVyPgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InN1Y2Nlc3MiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPGNoZWNrLWNpcmNsZS1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBzdWNjZXNzCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwcm9jZXNzaW5nIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzeW5jLW91dGxpbmVkIDpzcGluPSJ0cnVlIiAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBwcm9jZXNzaW5nCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJlcnJvciI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Y2xvc2UtY2lyY2xlLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIGVycm9yCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJ3YXJuaW5nIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxleGNsYW1hdGlvbi1jaXJjbGUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgd2FybmluZwogICAgPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZGVmYXVsdCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Y2xvY2stY2lyY2xlLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIHdhaXRpbmcKICAgIDwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImRlZmF1bHQiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPG1pbnVzLWNpcmNsZS1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBzdG9wCiAgICA8L2EtdGFnPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBDaGVja0NpcmNsZU91dGxpbmVkLAogIFN5bmNPdXRsaW5lZCwKICBDbG9zZUNpcmNsZU91dGxpbmVkLAogIEV4Y2xhbWF0aW9uQ2lyY2xlT3V0bGluZWQsCiAgQ2xvY2tDaXJjbGVPdXRsaW5lZCwKICBNaW51c0NpcmNsZU91dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIENoZWNrQ2lyY2xlT3V0bGluZWQsCiAgICBTeW5jT3V0bGluZWQsCiAgICBDbG9zZUNpcmNsZU91dGxpbmVkLAogICAgRXhjbGFtYXRpb25DaXJjbGVPdXRsaW5lZCwKICAgIENsb2NrQ2lyY2xlT3V0bGluZWQsCiAgICBNaW51c0NpcmNsZU91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPldpdGhvdXQgaWNvbjwvYS1kaXZpZGVyPgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InN1Y2Nlc3MiPnN1Y2Nlc3M8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwcm9jZXNzaW5nIj5wcm9jZXNzaW5nPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZXJyb3IiPmVycm9yPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0id2FybmluZyI+d2FybmluZzwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImRlZmF1bHQiPmRlZmF1bHQ8L2EtdGFnPgogIDwvZGl2PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPldpdGggaWNvbjwvYS1kaXZpZGVyPgogIDxkaXY+CiAgICA8YS10YWcgY29sb3I9InN1Y2Nlc3MiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPGNoZWNrLWNpcmNsZS1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBzdWNjZXNzCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJwcm9jZXNzaW5nIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzeW5jLW91dGxpbmVkIDpzcGluPSJ0cnVlIiAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBwcm9jZXNzaW5nCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJlcnJvciI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Y2xvc2UtY2lyY2xlLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIGVycm9yCiAgICA8L2EtdGFnPgogICAgPGEtdGFnIGNvbG9yPSJ3YXJuaW5nIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxleGNsYW1hdGlvbi1jaXJjbGUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgd2FybmluZwogICAgPC9hLXRhZz4KICAgIDxhLXRhZyBjb2xvcj0iZGVmYXVsdCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Y2xvY2stY2lyY2xlLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIHdhaXRpbmcKICAgIDwvYS10YWc+CiAgICA8YS10YWcgY29sb3I9ImRlZmF1bHQiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPG1pbnVzLWNpcmNsZS1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBzdG9wCiAgICA8L2EtdGFnPgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBDaGVja0NpcmNsZU91dGxpbmVkLCBTeW5jT3V0bGluZWQsIENsb3NlQ2lyY2xlT3V0bGluZWQsIEV4Y2xhbWF0aW9uQ2lyY2xlT3V0bGluZWQsIENsb2NrQ2lyY2xlT3V0bGluZWQsIE1pbnVzQ2lyY2xlT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIENoZWNrQ2lyY2xlT3V0bGluZWQsCiAgICBTeW5jT3V0bGluZWQsCiAgICBDbG9zZUNpcmNsZU91dGxpbmVkLAogICAgRXhjbGFtYXRpb25DaXJjbGVPdXRsaW5lZCwKICAgIENsb2NrQ2lyY2xlT3V0bGluZWQsCiAgICBNaW51c0NpcmNsZU91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:t(()=>[o(p,{orientation:"left"},{default:t(()=>s[0]||(s[0]=[a("Without icon")])),_:1,__:[0]}),n("div",null,[o(l,{color:"success"},{default:t(()=>s[1]||(s[1]=[a("success")])),_:1,__:[1]}),o(l,{color:"processing"},{default:t(()=>s[2]||(s[2]=[a("processing")])),_:1,__:[2]}),o(l,{color:"error"},{default:t(()=>s[3]||(s[3]=[a("error")])),_:1,__:[3]}),o(l,{color:"warning"},{default:t(()=>s[4]||(s[4]=[a("warning")])),_:1,__:[4]}),o(l,{color:"default"},{default:t(()=>s[5]||(s[5]=[a("default")])),_:1,__:[5]})]),o(p,{orientation:"left"},{default:t(()=>s[6]||(s[6]=[a("With icon")])),_:1,__:[6]}),n("div",null,[o(l,{color:"success"},{icon:t(()=>[o(k)]),default:t(()=>[s[7]||(s[7]=a(" success "))]),_:1,__:[7]}),o(l,{color:"processing"},{icon:t(()=>[o(h,{spin:!0})]),default:t(()=>[s[8]||(s[8]=a(" processing "))]),_:1,__:[8]}),o(l,{color:"error"},{icon:t(()=>[o(A)]),default:t(()=>[s[9]||(s[9]=a(" error "))]),_:1,__:[9]}),o(l,{color:"warning"},{icon:t(()=>[o(d)]),default:t(()=>[s[10]||(s[10]=a(" warning "))]),_:1,__:[10]}),o(l,{color:"default"},{icon:t(()=>[o(Z)]),default:t(()=>[s[11]||(s[11]=a(" waiting "))]),_:1,__:[11]}),o(l,{color:"default"},{icon:t(()=>[o(v)]),default:t(()=>[s[12]||(s[12]=a(" stop "))]),_:1,__:[12]})])]),htmlCode:t(()=>s[13]||(s[13]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Without icon"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("success"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("processing"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("error"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("warning"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("default"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("With icon"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("check-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      success
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("sync-outlined")]),a(),n("span",{class:"token attr-name"},":spin"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      processing
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("close-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      error
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("exclamation-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      warning
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("clock-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      waiting
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("minus-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      stop
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(`
  CheckCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  SyncOutlined`),n("span",{class:"token punctuation"},","),a(`
  CloseCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  ExclamationCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  ClockCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  MinusCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
`),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(`

`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    CheckCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    SyncOutlined`),n("span",{class:"token punctuation"},","),a(`
    CloseCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    ExclamationCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    ClockCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    MinusCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[14]||(s[14]=[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(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Without icon"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("success"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("processing"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("error"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("warning"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("default"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("With icon"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("success"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("check-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      success
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("processing"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("sync-outlined")]),a(),n("span",{class:"token attr-name"},":spin"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      processing
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("error"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("close-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      error
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("warning"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("exclamation-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      warning
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("clock-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      waiting
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-tag")]),a(),n("span",{class:"token attr-name"},"color"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("default"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("minus-circle-outlined")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
      stop
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-tag")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent "),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(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" CheckCircleOutlined"),n("span",{class:"token punctuation"},","),a(" SyncOutlined"),n("span",{class:"token punctuation"},","),a(" CloseCircleOutlined"),n("span",{class:"token punctuation"},","),a(" ExclamationCircleOutlined"),n("span",{class:"token punctuation"},","),a(" ClockCircleOutlined"),n("span",{class:"token punctuation"},","),a(" MinusCircleOutlined "),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(`
`),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(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    CheckCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    SyncOutlined`),n("span",{class:"token punctuation"},","),a(`
    CloseCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    ExclamationCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    ClockCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
    MinusCircleOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const In=m(dn,[["render",Cn]]),hn={pageData:{title:"Tag",description:"",frontmatter:{category:"Components",subtitle:"\u6807\u7B7E",type:"\u6570\u636E\u5C55\u793A",title:"Tag",cover:"https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:""},{level:2,title:"API",slug:"API",content:"Tag"},{level:3,title:"Tag",slug:"Tag",content:""},{level:3,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6",content:""},{level:3,title:"Tag.CheckableTag",slug:"Tag-CheckableTag",content:""},{level:3,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6-1",content:""}],relativePath:"components/tag/index.zh-CN.md",content:`
\u8FDB\u884C\u6807\u8BB0\u548C\u5206\u7C7B\u7684\u5C0F\u6807\u7B7E\u3002

## \u4F55\u65F6\u4F7F\u7528

- \u7528\u4E8E\u6807\u8BB0\u4E8B\u7269\u7684\u5C5E\u6027\u548C\u7EF4\u5EA6\u3002
- \u8FDB\u884C\u5206\u7C7B\u3002

## API

### Tag

| \u53C2\u6570             | \u8BF4\u660E             | \u7C7B\u578B          | \u9ED8\u8BA4\u503C | \u7248\u672C  |
| ---------------- | ---------------- | ------------- | ------ | ----- |
| closable         | \u6807\u7B7E\u662F\u5426\u53EF\u4EE5\u5173\u95ED | boolean       | false  |       |
| closeIcon        | \u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE   | VNode \\| slot | -      | 2.0.0 |
| color            | \u6807\u7B7E\u8272           | string        | -      |       |
| icon             | \u8BBE\u7F6E\u56FE\u6807         | VNode \\| slot | -      | 2.0.0 |
| visible(v-model) | \u662F\u5426\u663E\u793A\u6807\u7B7E     | boolean       | \`true\` |       |

### \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E         | \u56DE\u8C03\u53C2\u6570    |
| -------- | ------------ | ----------- |
| close    | \u5173\u95ED\u65F6\u7684\u56DE\u8C03 | (e) =&gt; void |

### Tag.CheckableTag

| \u53C2\u6570             | \u8BF4\u660E               | \u7C7B\u578B    | \u9ED8\u8BA4\u503C |
| ---------------- | ------------------ | ------- | ------ |
| checked(v-model) | \u8BBE\u7F6E\u6807\u7B7E\u7684\u9009\u4E2D\u72B6\u6001 | boolean | false  |

### \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E                 | \u56DE\u8C03\u53C2\u6570          |
| -------- | -------------------- | ----------------- |
| change   | \u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1\u7684\u56DE\u8C03 | (checked) =&gt; void |
`,html:`<p>\u8FDB\u884C\u6807\u8BB0\u548C\u5206\u7C7B\u7684\u5C0F\u6807\u7B7E\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>
<ul>
<li>\u7528\u4E8E\u6807\u8BB0\u4E8B\u7269\u7684\u5C5E\u6027\u548C\u7EF4\u5EA6\u3002</li>
<li>\u8FDB\u884C\u5206\u7C7B\u3002</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="Tag">Tag <a class="header-anchor" href="#Tag">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<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>closable</td>
<td>\u6807\u7B7E\u662F\u5426\u53EF\u4EE5\u5173\u95ED</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE</td>
<td>VNode | slot</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>color</td>
<td>\u6807\u7B7E\u8272</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u8BBE\u7F6E\u56FE\u6807</td>
<td>VNode | slot</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>visible(v-model)</td>
<td>\u662F\u5426\u663E\u793A\u6807\u7B7E</td>
<td>boolean</td>
<td><code>true</code></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03</td>
<td>(e) =&gt; void</td>
</tr>
</tbody>
</table>
<h3 id="Tag-CheckableTag">Tag.CheckableTag <a class="header-anchor" href="#Tag-CheckableTag">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>checked(v-model)</td>
<td>\u8BBE\u7F6E\u6807\u7B7E\u7684\u9009\u4E2D\u72B6\u6001</td>
<td>boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<h3 id="\u4E8B\u4EF6-1">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6-1">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1\u7684\u56DE\u8C03</td>
<td>(checked) =&gt; void</td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060301389}},mn={class:"markdown"};function bn(e,s,u,r,C,g){return i(),W("article",mn,s[0]||(s[0]=[V('<p>\u8FDB\u884C\u6807\u8BB0\u548C\u5206\u7C7B\u7684\u5C0F\u6807\u7B7E\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><ul><li>\u7528\u4E8E\u6807\u8BB0\u4E8B\u7269\u7684\u5C5E\u6027\u548C\u7EF4\u5EA6\u3002</li><li>\u8FDB\u884C\u5206\u7C7B\u3002</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Tag">Tag <a class="header-anchor" href="#Tag"><span aria-hidden="true" class="anchor">#</span></a></h3><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>closable</td><td>\u6807\u7B7E\u662F\u5426\u53EF\u4EE5\u5173\u95ED</td><td>boolean</td><td>false</td><td></td></tr><tr><td>closeIcon</td><td>\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE</td><td>VNode | slot</td><td>-</td><td>2.0.0</td></tr><tr><td>color</td><td>\u6807\u7B7E\u8272</td><td>string</td><td>-</td><td></td></tr><tr><td>icon</td><td>\u8BBE\u7F6E\u56FE\u6807</td><td>VNode | slot</td><td>-</td><td>2.0.0</td></tr><tr><td>visible(v-model)</td><td>\u662F\u5426\u663E\u793A\u6807\u7B7E</td><td>boolean</td><td><code>true</code></td><td></td></tr></tbody></table><h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>close</td><td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03</td><td>(e) =&gt; void</td></tr></tbody></table><h3 id="Tag-CheckableTag">Tag.CheckableTag <a class="header-anchor" href="#Tag-CheckableTag"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>checked(v-model)</td><td>\u8BBE\u7F6E\u6807\u7B7E\u7684\u9009\u4E2D\u72B6\u6001</td><td>boolean</td><td>false</td></tr></tbody></table><h3 id="\u4E8B\u4EF6-1">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6-1"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1\u7684\u56DE\u8C03</td><td>(checked) =&gt; void</td></tr></tbody></table>',12)]))}const An=m(hn,[["render",bn]]),Zn={pageData:{title:"Tag",description:"",frontmatter:{category:"Components",type:"Data Display",title:"Tag",cover:"https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:""},{level:2,title:"API",slug:"API",content:"Tag"},{level:3,title:"Tag",slug:"Tag",content:""},{level:3,title:"Tag Events",slug:"Tag-Events",content:""},{level:3,title:"Tag.CheckableTag",slug:"Tag-CheckableTag",content:""},{level:3,title:"Tag.CheckableTag Events",slug:"Tag-CheckableTag-Events",content:""}],relativePath:"components/tag/index.en-US.md",content:`
Tag for categorizing or markup.

## When To Use

- It can be used to tag by dimension or property.
- When categorizing.

## API

### Tag

| Property         | Description                      | Type          | Default | Version |
| ---------------- | -------------------------------- | ------------- | ------- | ------- |
| closable         | Whether the Tag can be closed    | boolean       | \`false\` |         |
| closeIcon        | Custom close icon                | VNode \\| slot | -       | 2.0.0   |
| color            | Color of the Tag                 | string        | -       |         |
| icon             | Set the icon of tag              | VNode \\| slot | -       | 2.0.0   |
| visible(v-model) | Whether the Tag is closed or not | boolean       | \`true\`  |         |

### Tag Events

| Events Name | Description                          | Arguments   |
| ----------- | ------------------------------------ | ----------- |
| close       | Callback executed when tag is closed | (e) =&gt; void |

### Tag.CheckableTag

| Property         | Description           | Type    | Default |
| ---------------- | --------------------- | ------- | ------- |
| checked(v-model) | Checked status of Tag | boolean | \`false\` |

### Tag.CheckableTag Events

| Events Name | Description                                     | Arguments         |
| ----------- | ----------------------------------------------- | ----------------- |
| change      | Callback executed when Tag is checked/unchecked | (checked) =&gt; void |
`,html:`<p>Tag for categorizing or markup.</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>
<ul>
<li>It can be used to tag by dimension or property.</li>
<li>When categorizing.</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="Tag">Tag <a class="header-anchor" href="#Tag">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>closable</td>
<td>Whether the Tag can be closed</td>
<td>boolean</td>
<td><code>false</code></td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>Custom close icon</td>
<td>VNode | slot</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>color</td>
<td>Color of the Tag</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>Set the icon of tag</td>
<td>VNode | slot</td>
<td>-</td>
<td>2.0.0</td>
</tr>
<tr>
<td>visible(v-model)</td>
<td>Whether the Tag is closed or not</td>
<td>boolean</td>
<td><code>true</code></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="Tag-Events">Tag Events <a class="header-anchor" href="#Tag-Events">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>close</td>
<td>Callback executed when tag is closed</td>
<td>(e) =&gt; void</td>
</tr>
</tbody>
</table>
<h3 id="Tag-CheckableTag">Tag.CheckableTag <a class="header-anchor" href="#Tag-CheckableTag">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>checked(v-model)</td>
<td>Checked status of Tag</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<h3 id="Tag-CheckableTag-Events">Tag.CheckableTag Events <a class="header-anchor" href="#Tag-CheckableTag-Events">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>Callback executed when Tag is checked/unchecked</td>
<td>(checked) =&gt; void</td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060301388}},vn={class:"markdown"};function Gn(e,s,u,r,C,g){return i(),W("article",vn,s[0]||(s[0]=[V('<p>Tag for categorizing or markup.</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><ul><li>It can be used to tag by dimension or property.</li><li>When categorizing.</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Tag">Tag <a class="header-anchor" href="#Tag"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>closable</td><td>Whether the Tag can be closed</td><td>boolean</td><td><code>false</code></td><td></td></tr><tr><td>closeIcon</td><td>Custom close icon</td><td>VNode | slot</td><td>-</td><td>2.0.0</td></tr><tr><td>color</td><td>Color of the Tag</td><td>string</td><td>-</td><td></td></tr><tr><td>icon</td><td>Set the icon of tag</td><td>VNode | slot</td><td>-</td><td>2.0.0</td></tr><tr><td>visible(v-model)</td><td>Whether the Tag is closed or not</td><td>boolean</td><td><code>true</code></td><td></td></tr></tbody></table><h3 id="Tag-Events">Tag Events <a class="header-anchor" href="#Tag-Events"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>close</td><td>Callback executed when tag is closed</td><td>(e) =&gt; void</td></tr></tbody></table><h3 id="Tag-CheckableTag">Tag.CheckableTag <a class="header-anchor" href="#Tag-CheckableTag"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>checked(v-model)</td><td>Checked status of Tag</td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h3 id="Tag-CheckableTag-Events">Tag.CheckableTag Events <a class="header-anchor" href="#Tag-CheckableTag-Events"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>change</td><td>Callback executed when Tag is checked/unchecked</td><td>(checked) =&gt; void</td></tr></tbody></table>',12)]))}const Wn=m(Zn,[["render",Gn]]),yn=b({CN:An,US:Wn,components:{Basic:_,Checkable:O,Colorful:nn,Control:tn,Controlled:cn,HotTags:un,Icon:rn,Status:In}});function fn(e,s,u,r,C,g){const p=c("Basic"),l=c("Checkable"),k=c("Colorful"),h=c("Control"),A=c("Controlled"),d=c("HotTags"),Z=c("Icon"),v=c("Status"),y=c("demo-sort");return i(),I(y,null,{default:t(()=>[o(p),o(l),o(k),o(h),o(A),o(d),o(Z),o(v)]),_:1})}const Pn=m(yn,[["render",fn]]);export{Pn as default};