标签 Tag

进行标记和分类的小标签。

何时使用

  • 用于标记事物的属性和维度。
  • 进行分类。

代码演示

Tag 标签 - 图1

基本用法

基本标签的用法,可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose afterClose 两个事件。

  1. <template>
  2. <div>
  3. <a-tag>Tag 1</a-tag>
  4. <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
  5. <a-tag closable @close="log">Tag 2</a-tag>
  6. <a-tag closable @close="preventDefault">Prevent Default</a-tag>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. methods: {
  12. log(e) {
  13. console.log(e);
  14. },
  15. preventDefault(e) {
  16. e.preventDefault();
  17. console.log('Clicked! But prevent default.');
  18. },
  19. },
  20. };
  21. </script>

Tag 标签 - 图2

可选择

可通过 CheckableTag 实现类似 Checkbox 的效果,点击切换选中效果。

该组件为完全受控组件,不支持非受控用法。

  1. <template>
  2. <div>
  3. <a-checkable-tag v-model="checked1" @change="handleChange">Tag1</a-checkable-tag>
  4. <a-checkable-tag v-model="checked2" @change="handleChange">Tag2</a-checkable-tag>
  5. <a-checkable-tag v-model="checked3" @change="handleChange">Tag3</a-checkable-tag>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. checked1: false,
  13. checked2: false,
  14. checked3: false,
  15. };
  16. },
  17. methods: {
  18. handleChange(checked) {
  19. console.log(checked);
  20. },
  21. },
  22. };
  23. </script>

Tag 标签 - 图3

多彩标签

我们添加了多种预设色彩的标签样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。

  1. <template>
  2. <div>
  3. <h4 style="margin-bottom: 16px">Presets:</h4>
  4. <div>
  5. <a-tag color="pink">pink</a-tag>
  6. <a-tag color="red">red</a-tag>
  7. <a-tag color="orange">orange</a-tag>
  8. <a-tag color="green">green</a-tag>
  9. <a-tag color="cyan">cyan</a-tag>
  10. <a-tag color="blue">blue</a-tag>
  11. <a-tag color="purple">purple</a-tag>
  12. </div>
  13. <h4 style="margin: '16px 0'">Custom:</h4>
  14. <div>
  15. <a-tag color="#f50">#f50</a-tag>
  16. <a-tag color="#2db7f5">#2db7f5</a-tag>
  17. <a-tag color="#87d068">#87d068</a-tag>
  18. <a-tag color="#108ee9">#108ee9</a-tag>
  19. </div>
  20. </div>
  21. </template>

Tag 标签 - 图4

动态添加和删除

用数组生成一组标签,可以动态添加和删除,通过监听删除动画结束的事件 afterClose 实现。

  1. <template>
  2. <div>
  3. <template v-for="(tag, index) in tags">
  4. <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
  5. <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  6. {{`${tag.slice(0, 20)}...`}}
  7. </a-tag>
  8. </a-tooltip>
  9. <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
  10. {{tag}}
  11. </a-tag>
  12. </template>
  13. <a-input
  14. v-if="inputVisible"
  15. ref="input"
  16. type="text"
  17. size="small"
  18. :style="{ width: '78px' }"
  19. :value="inputValue"
  20. @change="handleInputChange"
  21. @blur="handleInputConfirm"
  22. @keyup.enter="handleInputConfirm"
  23. />
  24. <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
  25. <a-icon type="plus" /> New Tag
  26. </a-tag>
  27. </div>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
  34. inputVisible: false,
  35. inputValue: '',
  36. };
  37. },
  38. methods: {
  39. handleClose(removedTag) {
  40. const tags = this.tags.filter(tag => tag !== removedTag);
  41. console.log(tags);
  42. this.tags = tags;
  43. },
  44. showInput() {
  45. this.inputVisible = true;
  46. this.$nextTick(function() {
  47. this.$refs.input.focus();
  48. });
  49. },
  50. handleInputChange(e) {
  51. this.inputValue = e.target.value;
  52. },
  53. handleInputConfirm() {
  54. const inputValue = this.inputValue;
  55. let tags = this.tags;
  56. if (inputValue && tags.indexOf(inputValue) === -1) {
  57. tags = [...tags, inputValue];
  58. }
  59. console.log(tags);
  60. Object.assign(this, {
  61. tags,
  62. inputVisible: false,
  63. inputValue: '',
  64. });
  65. },
  66. },
  67. };
  68. </script>

Tag 标签 - 图5

热门标签

选择你感兴趣的话题。

  1. <template>
  2. <div>
  3. <strong :style="{ marginRight: 8 }">Categories:</strong>
  4. <template v-for=" tag in tags">
  5. <a-checkable-tag
  6. :key="tag"
  7. :checked="selectedTags.indexOf(tag) > -1"
  8. @change="(checked) => handleChange(tag, checked)"
  9. >
  10. {{tag}}
  11. </a-checkable-tag>
  12. </template>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. checked1: false,
  20. checked2: false,
  21. checked3: false,
  22. tags: ['Movies', 'Books', 'Music', 'Sports'],
  23. selectedTags: [],
  24. };
  25. },
  26. methods: {
  27. handleChange(tag, checked) {
  28. const { selectedTags } = this;
  29. const nextSelectedTags = checked
  30. ? [...selectedTags, tag]
  31. : selectedTags.filter(t => t !== tag);
  32. console.log('You are interested in: ', nextSelectedTags);
  33. this.selectedTags = nextSelectedTags;
  34. },
  35. },
  36. };
  37. </script>

Tag 标签 - 图6

控制关闭状态

通过 visible 属性控制关闭状态。

  1. <template>
  2. <div>
  3. <a-tag closable v-model="visible">
  4. Movies
  5. </a-tag>
  6. <br />
  7. <a-button size="small" @click="()=>{this.visible = !this.visible}">
  8. Toggle
  9. </a-button>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. visible: true,
  17. };
  18. },
  19. };
  20. </script>

API

Tag

参数说明类型默认值
afterClose关闭动画完成后的回调() => void-
closable标签是否可以关闭booleanfalse
color标签色string-
visible(v-model)是否显示标签booleantrue

事件

事件名称说明回调参数
close关闭时的回调(e) => void

Tag.CheckableTag

参数说明类型默认值
checked(v-model)设置标签的选中状态booleanfalse

事件

事件名称说明回调参数
change点击标签时触发的回调(checked) => void