github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
ant-design-vue/48b840bd.async.js

1 line
56 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{1218:function(s,a,t){},1314:function(s,a,t){"use strict";var n=t(1218);t.n(n).a},1448:function(s,a,t){"use strict";t.r(a);var n=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-tag>Tag 1</a-tag>\n <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>\n <a-tag closable="" @close="log">Tag 2</a-tag>\n <a-tag closable="" @close="preventDefault">Prevent Default</a-tag>\n </div>\n',script:"\n export default {\n methods: {\n log(e) {\n console.log(e);\n },\n preventDefault(e) {\n e.preventDefault();\n console.log('Clicked! But prevent default.');\n },\n },\n };\n",style:null,us:"\n#### basic Usage\nUsage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.\n",cn:"\n#### 基本用法\n基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。\n",sourceCode:'<template>\n <div>\n <a-tag>Tag 1</a-tag>\n <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>\n <a-tag closable @close="log">Tag 2</a-tag>\n <a-tag closable @close="preventDefault">Prevent Default</a-tag>\n </div>\n</template>\n<script>\n export default {\n methods: {\n log(e) {\n console.log(e);\n },\n preventDefault(e) {\n e.preventDefault();\n console.log(\'Clicked! But prevent default.\');\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-tag",[s._v("Tag 1")]),s._v(" "),t("a-tag",[t("a",{attrs:{href:"https://github.com/vueComponent/ant-design"}},[s._v("Link")])]),s._v(" "),t("a-tag",{attrs:{closable:""},on:{close:s.log}},[s._v("Tag 2")]),s._v(" "),t("a-tag",{attrs:{closable:""},on:{close:s.preventDefault}},[s._v("Prevent Default")])],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基本用法"}},[s._v("基本用法 "),t("a",{staticClass:"anchor",attrs:{href:"#基本用法"}},[s._v("#")])]),s._v(" "),t("p",[s._v("基本标签的用法，可以通过添加 "),t("code",[s._v("closable")]),s._v(" 变为可关闭标签。可关闭标签具有 "),t("code",[s._v("onClose")]),s._v(" "),t("code",[s._v("afterClose")]),s._v(" 两个事件。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"basic-Usage"}},[s._v("basic Usage "),t("a",{staticClass:"anchor",attrs:{href:"#basic-Usage"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Usage of basic Tag, and it could be closable by set "),t("code",[s._v("closable")]),s._v(" property. Closable Tag supports "),t("code",[s._v("onClose")]),s._v(" "),t("code",[s._v("afterClose")]),s._v(" events.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("Tag 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vueComponent/ant-design"')]),s._v(">")]),s._v("Link"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"log"')]),s._v(">")]),s._v("Tag 2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"preventDefault"')]),s._v(">")]),s._v("Prevent Default"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n log(e) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(e);\n },\n preventDefault(e) {\n e.preventDefault();\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'Clicked! But prevent default.'")]),s._v(");\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={methods:{log:function(s){console.log(s)},preventDefault:function(s){s.preventDefault(),console.log("Clicked! But prevent default.")}}},l=t(31),v=Object(l.a)(e,n,[],!1,null,null,null);v.options.__file="components/tag/demo/basic.md";var i=v.exports,_=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-checkable-tag v-model="checked1" @change="handleChange">Tag1</a-checkable-tag>\n <a-checkable-tag v-model="checked2" @change="handleChange">Tag2</a-checkable-tag>\n <a-checkable-tag v-model="checked3" @change="handleChange">Tag3</a-checkable-tag>\n </div>\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: false,\n checked3: false,\n };\n },\n methods: {\n handleChange(checked) {\n console.log(checked);\n },\n },\n };\n",style:null,us:"\n#### Checkable\n`CheckableTag` works like Checkbox, click it to toggle checked state.\n> it is an absolute controlled component and has no uncontrolled mode.\n",cn:"\n#### 可选择\n可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。\n> 该组件为完全受控组件，不支持非受控用法。\n",sourceCode:'<template>\n <div>\n <a-checkable-tag v-model="checked1" @change="handleChange">Tag1</a-checkable-tag>\n <a-checkable-tag v-model="checked2" @change="handleChange">Tag2</a-checkable-tag>\n <a-checkable-tag v-model="checked3" @change="handleChange">Tag3</a-checkable-tag>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n checked1: false,\n checked2: false,\n checked3: false,\n };\n },\n methods: {\n handleChange(checked) {\n console.log(checked);\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-checkable-tag",{on:{change:s.handleChange},model:{value:s.checked1,callback:function(a){s.checked1=a},expression:"checked1"}},[s._v("Tag1")]),s._v(" "),t("a-checkable-tag",{on:{change:s.handleChange},model:{value:s.checked2,callback:function(a){s.checked2=a},expression:"checked2"}},[s._v("Tag2")]),s._v(" "),t("a-checkable-tag",{on:{change:s.handleChange},model:{value:s.checked3,callback:function(a){s.checked3=a},expression:"checked3"}},[s._v("Tag3")])],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"可选择"}},[s._v("可选择 "),t("a",{staticClass:"anchor",attrs:{href:"#可选择"}},[s._v("#")])]),s._v(" "),t("p",[s._v("可通过 "),t("code",[s._v("CheckableTag")]),s._v(" 实现类似 Checkbox 的效果，点击切换选中效果。")]),s._v(" "),t("blockquote",[t("p",[s._v("该组件为完全受控组件，不支持非受控用法。")])])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Checkable"}},[s._v("Checkable "),t("a",{staticClass:"anchor",attrs:{href:"#Checkable"}},[s._v("#")])]),s._v(" "),t("p",[t("code",[s._v("CheckableTag")]),s._v(" works like Checkbox, click it to toggle checked state.")]),s._v(" "),t("blockquote",[t("p",[s._v("it is an absolute controlled component and has no uncontrolled mode.")])])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("Tag1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("Tag2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"checked3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("Tag3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked3")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(checked) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(checked);\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};_._withStripped=!0;var c={data:function(){return{checked1:!1,checked2:!1,checked3:!1}},methods:{handleChange:function(s){console.log(s)}}},o=Object(l.a)(c,_,[],!1,null,null,null);o.options.__file="components/tag/demo/checkable.md";var h=o.exports,r=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <h4 style="margin-bottom: 16px">Presets:</h4>\n <div>\n <a-tag color="pink">pink</a-tag>\n <a-tag color="red">red</a-tag>\n <a-tag color="orange">orange</a-tag>\n <a-tag color="green">green</a-tag>\n <a-tag color="cyan">cyan</a-tag>\n <a-tag color="blue">blue</a-tag>\n <a-tag color="purple">purple</a-tag>\n </div>\n <h4 style="margin: \'16px 0\'">Custom:</h4>\n <div>\n <a-tag color="#f50">#f50</a-tag>\n <a-tag color="#2db7f5">#2db7f5</a-tag>\n <a-tag color="#87d068">#87d068</a-tag>\n <a-tag color="#108ee9">#108ee9</a-tag>\n </div>\n </div>\n',script:null,style:null,us:"\n#### Colorful Tag\nWe preset a series of colorful tag style for different situation usage.\nAnd you can always set it to a hex color string for custom color.\n",cn:"\n#### 多彩标签\n我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。\n",sourceCode:'<template>\n <div>\n <h4 style="margin-bottom: 16px">Presets:</h4>\n <div>\n <a-tag color="pink">pink</a-tag>\n <a-tag color="red">red</a-tag>\n <a-tag color="orange">orange</a-tag>\n <a-tag color="green">green</a-tag>\n <a-tag color="cyan">cyan</a-tag>\n <a-tag color="blue">blue</a-tag>\n <a-tag color="purple">purple</a-tag>\n </div>\n <h4 style="margin: \'16px 0\'">Custom:</h4>\n <div>\n <a-tag color="#f50">#f50</a-tag>\n <a-tag color="#2db7f5">#2db7f5</a-tag>\n <a-tag color="#87d068">#87d068</a-tag>\n <a-tag color="#108ee9">#108ee9</a-tag>\n </div>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("h4",{staticStyle:{"margin-bottom":"16px"}},[s._v("Presets:")]),s._v(" "),t("div",[t("a-tag",{attrs:{color:"pink"}},[s._v("pink")]),s._v(" "),t("a-tag",{attrs:{color:"red"}},[s._v("red")]),s._v(" "),t("a-tag",{attrs:{color:"orange"}},[s._v("orange")]),s._v(" "),t("a-tag",{attrs:{color:"green"}},[s._v("green")]),s._v(" "),t("a-tag",{attrs:{color:"cyan"}},[s._v("cyan")]),s._v(" "),t("a-tag",{attrs:{color:"blue"}},[s._v("blue")]),s._v(" "),t("a-tag",{attrs:{color:"purple"}},[s._v("purple")])],1),s._v(" "),t("h4",{staticStyle:{margin:"'16px 0'"}},[s._v("Custom:")]),s._v(" "),t("div",[t("a-tag",{attrs:{color:"#f50"}},[s._v("#f50")]),s._v(" "),t("a-tag",{attrs:{color:"#2db7f5"}},[s._v("#2db7f5")]),s._v(" "),t("a-tag",{attrs:{color:"#87d068"}},[s._v("#87d068")]),s._v(" "),t("a-tag",{attrs:{color:"#108ee9"}},[s._v("#108ee9")])],1)])]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"多彩标签"}},[s._v("多彩标签 "),t("a",{staticClass:"anchor",attrs:{href:"#多彩标签"}},[s._v("#")])]),s._v(" "),t("p",[s._v("我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Colorful-Tag"}},[s._v("Colorful Tag "),t("a",{staticClass:"anchor",attrs:{href:"#Colorful-Tag"}},[s._v("#")])]),s._v(" "),t("p",[s._v("We preset a series of colorful tag style for different situation usage."),t("br"),s._v("\nAnd you can always set it to a hex color string for custom color."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 16px"')]),s._v(">")]),s._v("Presets:"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pink"')]),s._v(">")]),s._v("pink"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"red"')]),s._v(">")]),s._v("red"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"orange"')]),s._v(">")]),s._v("orange"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"green"')]),s._v(">")]),s._v("green"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"cyan"')]),s._v(">")]),s._v("cyan"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"blue"')]),s._v(">")]),s._v("blue"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"purple"')]),s._v(">")]),s._v("purple"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"margin: '16px 0'\"")]),s._v(">")]),s._v("Custom:"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("h4")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#f50"')]),s._v(">")]),s._v("#f50"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#2db7f5"')]),s._v(">")]),s._v("#2db7f5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#87d068"')]),s._v(">")]),s._v("#87d068"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"#108ee9"')]),s._v(">")]),s._v("#108ee9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};r._withStripped=!0;var p=Object(l.a)({},r,[],!1,null,null,null);p.options.__file="components/tag/demo/colorful.md";var g=p.exports,d=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <template v-for="(tag, index) in tags">\n <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">\n <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">\n {{`${tag.slice(0, 20)}...`}}\n </a-tag>\n </a-tooltip>\n <a-tag v-else="" :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">\n {{tag}}\n </a-tag>\n </template>\n <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: \'78px\' }" :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm" @keyup.enter="handleInputConfirm"/>\n <a-tag v-else="" @click="showInput" style="background: #fff; borderStyle: dashed;">\n <a-icon type="plus"/> New Tag\n </a-tag>\n </div>\n',script:"\n export default {\n data() {\n return {\n tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],\n inputVisible: false,\n inputValue: '',\n };\n },\n methods: {\n handleClose(removedTag) {\n const tags = this.tags.filter(tag => tag !== removedTag);\n console.log(tags);\n this.tags = tags;\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(function() {\n this.$refs.input.focus();\n });\n },\n\n handleInputChange(e) {\n this.inputValue = e.target.value;\n },\n\n handleInputConfirm() {\n const inputValue = this.inputValue;\n let tags = this.tags;\n if (inputValue && tags.indexOf(inputValue) === -1) {\n tags = [...tags, inputValue];\n }\n console.log(tags);\n Object.assign(this, {\n tags,\n inputVisible: false,\n inputValue: '',\n });\n },\n },\n };\n",style:null,us:"\n#### Add & Remove Dynamically\nGenerating a set of Tags by array, you can add and remove dynamically.\nIt's based on `afterClose` event, which will be triggered while the close animation end.\n",cn:"\n#### 动态添加和删除\n用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。\n",sourceCode:'<template>\n <div>\n <template v-for="(tag, index) in tags">\n <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">\n <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">\n {{`${tag.slice(0, 20)}...`}}\n </a-tag>\n </a-tooltip>\n <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">\n {{tag}}\n </a-tag>\n </template>\n <a-input\n v-if="inputVisible"\n ref="input"\n type="text"\n size="small"\n :style="{ width: \'78px\' }"\n :value="inputValue"\n @change="handleInputChange"\n @blur="handleInputConfirm"\n @keyup.enter="handleInputConfirm"\n />\n <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">\n <a-icon type="plus" /> New Tag\n </a-tag>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n tags: [\'Unremovable\', \'Tag 2\', \'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3\'],\n inputVisible: false,\n inputValue: \'\',\n };\n },\n methods: {\n handleClose(removedTag) {\n const tags = this.tags.filter(tag => tag !== removedTag);\n console.log(tags);\n this.tags = tags;\n },\n\n showInput() {\n this.inputVisible = true;\n this.$nextTick(function() {\n this.$refs.input.focus();\n });\n },\n\n handleInputChange(e) {\n this.inputValue = e.target.value;\n },\n\n handleInputConfirm() {\n const inputValue = this.inputValue;\n let tags = this.tags;\n if (inputValue && tags.indexOf(inputValue) === -1) {\n tags = [...tags, inputValue];\n }\n console.log(tags);\n Object.assign(this, {\n tags,\n inputVisible: false,\n inputValue: \'\',\n });\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[s._l(s.tags,(function(a,n){return[a.length>20?t("a-tooltip",{key:a,attrs:{title:a}},[t("a-tag",{key:a,attrs:{closable:0!==n,afterClose:function(){return s.handleClose(a)}}},[s._v("\n "+s._s(a.slice(0,20)+"...")+"\n ")])],1):t("a-tag",{key:a,attrs:{closable:0!==n,afterClose:function(){return s.handleClose(a)}}},[s._v("\n "+s._s(a)+"\n ")])]})),s._v(" "),s.inputVisible?t("a-input",{ref:"input",style:{width:"78px"},attrs:{type:"text",size:"small",value:s.inputValue},on:{change:s.handleInputChange,blur:s.handleInputConfirm,keyup:function(a){return!a.type.indexOf("key")&&s._k(a.keyCode,"enter",13,a.key,"Enter")?null:s.handleInputConfirm(a)}}}):t("a-tag",{staticStyle:{background:"#fff",borderStyle:"dashed"},on:{click:s.showInput}},[t("a-icon",{attrs:{type:"plus"}}),s._v(" New Tag\n ")],1)],2)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"动态添加和删除"}},[s._v("动态添加和删除 "),t("a",{staticClass:"anchor",attrs:{href:"#动态添加和删除"}},[s._v("#")])]),s._v(" "),t("p",[s._v("用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 "),t("code",[s._v("afterClose")]),s._v(" 实现。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Add-&-Remove-Dynamically"}},[s._v("Add & Remove Dynamically "),t("a",{staticClass:"anchor",attrs:{href:"#Add-&-Remove-Dynamically"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Generating a set of Tags by array, you can add and remove dynamically."),t("br"),s._v("\nIt's based on "),t("code",[s._v("afterClose")]),s._v(" event, which will be triggered while the close animation end."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"(tag, index) in tags"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tooltip")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag.length > 20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"index !== 0"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":afterClose")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"() => handleClose(tag)"')]),s._v(">")]),s._v("\n "),t("span",[s._v("{{")]),s._v("`${tag.slice(0, 20)}...`"),t("span",[s._v("}}")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tooltip")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"index !== 0"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":afterClose")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"() => handleClose(tag)"')]),s._v(">")]),s._v("\n "),t("span",[s._v("{{")]),s._v("tag"),t("span",[s._v("}}")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ width: '78px' }\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleInputChange"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"background: #fff; borderStyle: dashed;"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"plus"')]),s._v(" />")]),s._v(" New Tag\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'Unremovable'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'")]),s._v("],\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleClose(removedTag) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" tags = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tags.filter("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("tag")]),s._v(" =>")]),s._v(" tag !== removedTag);\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tags);\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tags = tags;\n },\n\n showInput() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v("("),t("span",{staticClass:"hljs-params"}),s._v(") ")]),s._v("{\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.input.focus();\n });\n },\n\n handleInputChange(e) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = e.target.value;\n },\n\n handleInputConfirm() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" inputValue = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tags = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tags;\n "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue && tags.indexOf(inputValue) === "),t("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n tags = [...tags, inputValue];\n }\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tags);\n "),t("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(".assign("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(", {\n tags,\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n });\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};d._withStripped=!0;var C=t(2),u=t.n(C),j=t(15),m=t.n(j),f={data:function(){return{tags:["Unremovable","Tag 2","Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){var a=this.tags.filter((function(a){return a!==s}));console.log(a),this.tags=a},showInput:function(){this.inputVisible=!0,this.$nextTick((function(){this.$refs.input.focus()}))},handleInputChange:function(s){this.inputValue=s.target.value},handleInputConfirm:function(){var s=this.inputValue,a=this.tags;s&&-1===a.indexOf(s)&&(a=[].concat(m()(a),[s])),console.log(a),u()(this,{tags:a,inputVisible:!1,inputValue:""})}}},b=Object(l.a)(f,d,[],!1,null,null,null);b.options.__file="components/tag/demo/control.md";var k=b.exports,T=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <strong :style="{ marginRight: 8 }">Categories:</strong>\n <template v-for=" tag in tags">\n <a-checkable-tag :key="tag" :checked="selectedTags.indexOf(tag) > -1" @change="(checked) => handleChange(tag, checked)">\n {{tag}}\n </a-checkable-tag>\n </template>\n </div>\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: false,\n checked3: false,\n tags: ['Movies', 'Books', 'Music', 'Sports'],\n selectedTags: [],\n };\n },\n methods: {\n handleChange(tag, checked) {\n const { selectedTags } = this;\n const nextSelectedTags = checked\n ? [...selectedTags, tag]\n : selectedTags.filter(t => t !== tag);\n console.log('You are interested in: ', nextSelectedTags);\n this.selectedTags = nextSelectedTags;\n },\n },\n };\n",style:null,us:"\n#### Hot Tags\nSelect your favourite topics.\n",cn:"\n#### 热门标签\n选择你感兴趣的话题。\n",sourceCode:"<template>\n <div>\n <strong :style=\"{ marginRight: 8 }\">Categories:</strong>\n <template v-for=\" tag in tags\">\n <a-checkable-tag\n :key=\"tag\"\n :checked=\"selectedTags.indexOf(tag) > -1\"\n @change=\"(checked) => handleChange(tag, checked)\"\n >\n {{tag}}\n </a-checkable-tag>\n </template>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n checked1: false,\n checked2: false,\n checked3: false,\n tags: ['Movies', 'Books', 'Music', 'Sports'],\n selectedTags: [],\n };\n },\n methods: {\n handleChange(tag, checked) {\n const { selectedTags } = this;\n const nextSelectedTags = checked\n ? [...selectedTags, tag]\n : selectedTags.filter(t => t !== tag);\n console.log('You are interested in: ', nextSelectedTags);\n this.selectedTags = nextSelectedTags;\n },\n },\n };\n<\/script>\n"}}},[t("template",{slot:"component"},[t("div",[t("strong",{style:{marginRight:8}},[s._v("Categories:")]),s._v(" "),s._l(s.tags,(function(a){return[t("a-checkable-tag",{key:a,attrs:{checked:s.selectedTags.indexOf(a)>-1},on:{change:function(t){return s.handleChange(a,t)}}},[s._v("\n "+s._s(a)+"\n ")])]}))],2)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"热门标签"}},[s._v("热门标签 "),t("a",{staticClass:"anchor",attrs:{href:"#热门标签"}},[s._v("#")])]),s._v(" "),t("p",[s._v("选择你感兴趣的话题。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Hot-Tags"}},[s._v("Hot Tags "),t("a",{staticClass:"anchor",attrs:{href:"#Hot-Tags"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Select your favourite topics.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ marginRight: 8 }"')]),s._v(">")]),s._v("Categories:"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("strong")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('" tag in tags"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":checked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"selectedTags.indexOf(tag) > -1"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"(checked) => handleChange(tag, checked)"')]),s._v("\n >")]),s._v("\n "),t("span",[s._v("{{")]),s._v("tag"),t("span",[s._v("}}")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-checkable-tag")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("checked3")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'Movies'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Books'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Music'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'Sports'")]),s._v("],\n "),t("span",{staticClass:"hljs-attr"},[s._v("selectedTags")]),s._v(": [],\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n handleChange(tag, checked) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { selectedTags } = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" nextSelectedTags = checked\n ? [...selectedTags, tag]\n : selectedTags.filter("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("t")]),s._v(" =>")]),s._v(" t !== tag);\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'You are interested in: '")]),s._v(", nextSelectedTags);\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".selectedTags = nextSelectedTags;\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};T._withStripped=!0;var y={data:function(){return{checked1:!1,checked2:!1,checked3:!1,tags:["Movies","Books","Music","Sports"],selectedTags:[]}},methods:{handleChange:function(s,a){var t=this.selectedTags,n=a?[].concat(m()(t),[s]):t.filter((function(a){return a!==s}));console.log("You are interested in: ",n),this.selectedTags=n}}},x=Object(l.a)(y,T,[],!1,null,null,null);x.options.__file="components/tag/demo/hot-tags.md";var w=x.exports,V=function(){var s=this,a=this,t=a.$createElement,n=a._self._c||t;return n("div",[[n("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-tag closable="" v-model="visible">\n Movies\n </a-tag>\n <br/>\n <a-button size="small" @click="()=>{this.visible = !this.visible}">\n Toggle\n </a-button>\n </div>\n',script:"\n export default {\n data() {\n return {\n visible: true,\n };\n },\n };\n",style:null,us:"\n#### Controlled\nBy using the `visible` prop, you can control the close state of Tag.\n",cn:"\n#### 控制关闭状态\n通过 `visible` 属性控制关闭状态。\n",sourceCode:'<template>\n <div>\n <a-tag closable v-model="visible">\n Movies\n </a-tag>\n <br />\n <a-button size="small" @click="()=>{this.visible = !this.visible}">\n Toggle\n </a-button>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n visible: true,\n };\n },\n };\n<\/script>\n'}}},[n("template",{slot:"component"},[n("div",[n("a-tag",{attrs:{closable:""},model:{value:a.visible,callback:function(s){a.visible=s},expression:"visible"}},[a._v("\n Movies\n ")]),a._v(" "),n("br"),a._v(" "),n("a-button",{attrs:{size:"small"},on:{click:function(){s.visible=!s.visible}}},[a._v("\n Toggle\n ")])],1)]),a._v(" "),n("template",{slot:"description"},[n("h4",{attrs:{id:"控制关闭状态"}},[a._v("控制关闭状态 "),n("a",{staticClass:"anchor",attrs:{href:"#控制关闭状态"}},[a._v("#")])]),a._v(" "),n("p",[a._v("通过 "),n("code",[a._v("visible")]),a._v(" 属性控制关闭状态。")])]),a._v(" "),n("template",{slot:"us-description"},[n("h4",{attrs:{id:"Controlled"}},[a._v("Controlled "),n("a",{staticClass:"anchor",attrs:{href:"#Controlled"}},[a._v("#")])]),a._v(" "),n("p",[a._v("By using the "),n("code",[a._v("visible")]),a._v(" prop, you can control the close state of Tag.")])]),a._v(" "),n("template",{slot:"code"},[n("pre",[n("code",{staticClass:"language-html"},[n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n "),n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n "),n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("a-tag")]),a._v(" "),n("span",{staticClass:"hljs-attr"},[a._v("closable")]),a._v(" "),n("span",{staticClass:"hljs-attr"},[a._v("v-model")]),a._v("="),n("span",{staticClass:"hljs-string"},[a._v('"visible"')]),a._v(">")]),a._v("\n Movies\n "),n("span",{staticClass:"hljs-tag"},[a._v("</"),n("span",{staticClass:"hljs-name"},[a._v("a-tag")]),a._v(">")]),a._v("\n "),n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("br")]),a._v(" />")]),a._v("\n "),n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(" "),n("span",{staticClass:"hljs-attr"},[a._v("size")]),a._v("="),n("span",{staticClass:"hljs-string"},[a._v('"small"')]),a._v(" "),n("span",{staticClass:"hljs-attr"},[a._v("@click")]),a._v("="),n("span",{staticClass:"hljs-string"},[a._v('"()=>{this.visible = !this.visible}"')]),a._v(">")]),a._v("\n Toggle\n "),n("span",{staticClass:"hljs-tag"},[a._v("</"),n("span",{staticClass:"hljs-name"},[a._v("a-button")]),a._v(">")]),a._v("\n "),n("span",{staticClass:"hljs-tag"},[a._v("</"),n("span",{staticClass:"hljs-name"},[a._v("div")]),a._v(">")]),a._v("\n"),n("span",{staticClass:"hljs-tag"},[a._v("</"),n("span",{staticClass:"hljs-name"},[a._v("template")]),a._v(">")]),a._v("\n"),n("span",{staticClass:"hljs-tag"},[a._v("<"),n("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),n("span",{staticClass:"javascript"},[a._v("\n "),n("span",{staticClass:"hljs-keyword"},[a._v("export")]),a._v(" "),n("span",{staticClass:"hljs-keyword"},[a._v("default")]),a._v(" {\n data() {\n "),n("span",{staticClass:"hljs-keyword"},[a._v("return")]),a._v(" {\n "),n("span",{staticClass:"hljs-attr"},[a._v("visible")]),a._v(": "),n("span",{staticClass:"hljs-literal"},[a._v("true")]),a._v(",\n };\n },\n };\n")]),n("span",{staticClass:"hljs-tag"},[a._v("</"),n("span",{staticClass:"hljs-name"},[a._v("script")]),a._v(">")]),a._v("\n")])])])],2)]],2)};V._withStripped=!0;var I={data:function(){return{visible:!0}}},S=Object(l.a)(I,V,[],!1,null,null,null);S.options.__file="components/tag/demo/controlled.md";var D=S.exports,O=function(){var s=this.$createElement;this._self._c;return this._m(0)};O._withStripped=!0;var $=Object(l.a)({},O,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"Tag"}},[s._v("Tag "),t("a",{staticClass:"anchor",attrs:{href:"#Tag"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("afterClose")]),s._v(" "),t("td",[s._v("关闭动画完成后的回调")]),s._v(" "),t("td",[s._v("() => void")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("closable")]),s._v(" "),t("td",[s._v("标签是否可以关闭")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("color")]),s._v(" "),t("td",[s._v("标签色")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("visible(v-model)")]),s._v(" "),t("td",[s._v("是否显示标签")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("true")])])])])]),s._v(" "),t("h3",{attrs:{id:"事件"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("close")]),s._v(" "),t("td",[s._v("关闭时的回调")]),s._v(" "),t("td",[s._v("(e) => void")])])])]),s._v(" "),t("h3",{attrs:{id:"Tag.CheckableTag"}},[s._v("Tag.CheckableTag "),t("a",{staticClass:"anchor",attrs:{href:"#Tag.CheckableTag"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("checked(v-model)")]),s._v(" "),t("td",[s._v("设置标签的选中状态")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])])])]),s._v(" "),t("h3",{attrs:{id:"事件-2"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件-2"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("点击标签时触发的回调")]),s._v(" "),t("td",[s._v("(checked) => void")])])])])])}],!1,null,null,null);$.options.__file="components/tag/index.zh-CN.md";var E=$.exports,P=function(){var s=this.$createElement;this._self._c;return this._m(0)};P._withStripped=!0;var A=Object(l.a)({},P,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"Tag"}},[s._v("Tag "),t("a",{staticClass:"anchor",attrs:{href:"#Tag"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("afterClose")]),s._v(" "),t("td",[s._v("Callback executed when close animation is completed")]),s._v(" "),t("td",[s._v("() => void")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("closable")]),s._v(" "),t("td",[s._v("Whether the Tag can be closed")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("false")])])]),s._v(" "),t("tr",[t("td",[s._v("color")]),s._v(" "),t("td",[s._v("Color of the Tag")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("visible(v-model)")]),s._v(" "),t("td",[s._v("Whether the Tag is closed or not")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("true")])])])])]),s._v(" "),t("h3",{attrs:{id:"Tag-Events"}},[s._v("Tag Events "),t("a",{staticClass:"anchor",attrs:{href:"#Tag-Events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("close")]),s._v(" "),t("td",[s._v("Callback executed when tag is closed")]),s._v(" "),t("td",[s._v("(e) => void")])])])]),s._v(" "),t("h3",{attrs:{id:"Tag.CheckableTag"}},[s._v("Tag.CheckableTag "),t("a",{staticClass:"anchor",attrs:{href:"#Tag.CheckableTag"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("checked(v-model)")]),s._v(" "),t("td",[s._v("Checked status of Tag")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("false")])])])])]),s._v(" "),t("h3",{attrs:{id:"Tag.CheckableTag-Events"}},[s._v("Tag.CheckableTag Events "),t("a",{staticClass:"anchor",attrs:{href:"#Tag.CheckableTag-Events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("Callback executed when Tag is checked/unchecked")]),s._v(" "),t("td",[s._v("(checked) => void")])])])])])}],!1,null,null,null);A.options.__file="components/tag/index.en-US.md";var M=A.exports,U="# 标签 Tag\n\n 进行标记和分类的小标签。\n\n## 何时使用\n\n- 用于标记事物的属性和维度。\n- 进行分类。\n\n ## 代码演示",z="# Tag\n\n Tag for categorizing or markup.\n\n## When To Use\n\n- It can be used to tag by dimension or property.\n\n- When categorizing.\n ## Examples ",B={category:"Components",subtitle:"标签",type:"Data Display",title:"Tag",render:function(){var s=arguments[0];return s("div",{attrs:{id:"components-tag-demo"}},[s("md",{attrs:{cn:U,us:z}}),s(i),s(h),s(g),s(k),s(w),s(D),s("api",[s("template",{slot:"cn"},[s(E)]),s(M)])])}},R=(t(1314),Object(l.a)(B,void 0,void 0,!1,null,null,null));R.options.__file="components/tag/demo/index.vue";a.default=R.exports}}]);
Reference in New Issue View Git Blame Copy Permalink