• 标签 Tag
    • 何时使用
    • 代码演示
      • 基本用法
      • 可选择
      • 多彩标签
      • 动态添加和删除
      • 热门标签
      • 控制关闭状态
  • API
    • Tag
    • 事件
    • Tag.CheckableTag
    • 事件

    标签 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