标签

基础用法

• 示例：

点击查看代码

<template>
  <ZTag>Tag 1</ZTag>
  <ZTag><a href="https://www.baidu.com">百度</a></ZTag>
  <ZTag closable @close="close">可关闭</ZTag>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TagDemo1',
  setup() {
    const close = (e) => {
      console.log(e)
    }
    return { close }
  },
})
</script>

icon标签

• 示例：

点击查看代码

<template>
  <div>
    <ZTag><user-outlined /> icon </ZTag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

彩色标签

• 示例：

点击查看代码

<template>
  <div>
    <ZTag closable color="red"> red </ZTag>
    <ZTag color="#f50"> #f50 </ZTag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

预设4种标签

• 示例：

点击查看代码

<template>
  <div>
    <ZTag color="success"> success </ZTag>
    <ZTag color="processing"> processing </ZTag>
    <ZTag color="error"> error </ZTag>
    <ZTag color="warning"> warning </ZTag>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

标签的添加和删除

• 示例：

点击查看代码

<template>
  <div>
    <div v-for="(tag, index) in tags" :key="index" style="display: inline-block;">
      <ZTag closable @close="handleClose(tag)"> {{ tag }} </ZTag>
    </div>
    <ZTag v-if="!inputVisible" class="add-tag" @click="showInput">
      <plus-outlined />
      New Tag
    </ZTag>
    <ZInput
      v-else
      inputRef="inputRef"
      v-model:value="inputValue"
      type="text"
      size="small"
      :style="{ width: '78px', height: '24px' }"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    />
  </div>
</template>
<script>
  import { defineComponent, reactive, ref, nextTick, toRefs } from 'vue'
  export default defineComponent({
    setup() {
      const inputRef = ref()
      const state = reactive({
        tags: ['Tag 1', 'Tag 2', 'Tag 3'],
        inputVisible: false,
        inputValue: ''
      })
      const handleClose = removedTag => {
        const tags = state.tags.filter(tag => tag !== removedTag)
        state.tags = tags
      }

      const showInput = () => {
        state.inputVisible = true
        nextTick(() => {
          inputRef.value.focus()
        })
      }
      const handleInputConfirm = () => {
        const inputValue = state.inputValue
        let tags = state.tags

        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue]
        }

        Object.assign(state, {
          tags,
          inputVisible: false,
          inputValue: ''
        })
      }
      return {
        ...toRefs(state),
        handleClose,
        showInput,
        handleInputConfirm,
        inputRef
      }
    }
  })
</script>
    

参数

参数	说明	类型	默认值
closable	标签是否可关闭	boolean	false
color	标签色	string	-
closeIcon	自定义关闭按钮	slot	-
icon	设置图标	slot	-
visible(v-model)	是否显示标签	boolean	true
checked(v-model)	设置标签的选中状态	boolean	false

事件

事件	说明	回调参数
close	关闭时的回调	(e) => void
change	点击标签时触发的回调	(checked) => void