Tag 标签

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

何时使用

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

示例

基本使用

<template>
  <f-space>
    有边框
    <f-tag>Default</f-tag>
    <f-tag>
      <template #icon><f-icon type="icon-tianjia2"></f-icon></template>Twitter
    </f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    无边框
    <f-tag :border="false">Default</f-tag>
    <f-tag :border="false">
      <template #icon><f-icon type="icon-tianjia2"></f-icon></template>Twitter
    </f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    可关闭
    <f-tag closable>Default</f-tag>
    <f-tag closable>
      <template #icon><f-icon type="icon-tianjia2"></f-icon></template>Twitter
    </f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    预设颜色
    <f-tag color="default">default</f-tag>
    <f-tag color="success">success</f-tag>
    <f-tag color="processing">processing</f-tag>
    <f-tag color="error">error</f-tag>
    <f-tag color="warning">warning</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    预设颜色反转
    <f-tag inverse color="default">default</f-tag>
    <f-tag inverse color="success">success</f-tag>
    <f-tag inverse color="processing">processing</f-tag>
    <f-tag inverse color="error">error</f-tag>
    <f-tag inverse color="warning">warning</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    预设颜色
    <f-tag color="default">1</f-tag>
    <f-tag color="success">2</f-tag>
    <f-tag color="processing">3</f-tag>
    <f-tag color="error">4</f-tag>
    <f-tag color="warning">5</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    自定义大小
    <f-tag :size="18" color="default">1</f-tag>
    <f-tag :size="18" color="success">2</f-tag>
    <f-tag :size="18" color="processing">3</f-tag>
    <f-tag :size="18" color="error">4</f-tag>
    <f-tag :size="18" color="warning">5</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    自定义颜色
    <f-tag color="#D9E000">Default</f-tag>
    <f-tag color="#EF43EF">Default</f-tag>
    <f-tag color="#6762FC">Default</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    自定义形状
    <f-tag color="#D9E000" style="border-radius: 0">Default</f-tag>
    <f-tag color="#EF43EF" style="border-radius: 12px">Default</f-tag>
    <f-tag color="#6762FC" style="border-radius: 0 12px 12px 0">Default</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    尺寸
    <f-tag size="large" color="#D9E000">large</f-tag>
    <f-tag color="#EF43EF">default</f-tag>
    <f-tag size="small" color="#6762FC">small</f-tag>
  </f-space>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>

可关闭标签

<template>
  <f-space>
    <f-tag v-for="tag in tags" :key="tag" class="demo-tag-close" :border="false" closable @close="handleClose(tag)">
      {{ tag }}
    </f-tag>
    <f-input
      v-if="inputVisible"
      ref="inputRef"
      v-model:value="inputValue"
      type="text"
      size="small"
      :style="{ width: '78px' }"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    />
    <f-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
      <plus-outlined style="margin-right: 4px" />New Tag
    </f-tag>
  </f-space>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, nextTick } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    PlusOutlined,
  },
  setup() {
    const inputRef = ref()
    const state = reactive({
      tags: ['Tag 1', 'Tag 2', 'Tag MVP'],
      inputVisible: false,
      inputValue: '',
    })

    const handleClose = (removedTag: string) => {
      const tags = state.tags.filter(tag => tag !== removedTag)
      console.log(tags)
      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]
      }
      console.log(tags)
      Object.assign(state, {
        tags,
        inputVisible: false,
        inputValue: '',
      })
    }
    return {
      ...toRefs(state),
      handleClose,
      showInput,
      handleInputConfirm,
      inputRef,
    }
  },
})
</script>
<style lang="scss" scoped>
.demo-tag-close {
  transition: all 0.4s;
  &:hover {
    background: #ffffff;
    box-shadow: 0px 4px 12px 1px rgba(88, 98, 110, 0.14);
    color: #666666;
  }
}
</style>

可勾选(新)

<template>
  <f-space>
    可勾选
    <f-tag v-model:checked="checked" checkable @update:checked="handleUpdate">v-model</f-tag>
    <f-tag checked checkable>Default</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    无边框可勾选
    <f-tag v-model:checked="checked" :border="false" color="default" checkable>default</f-tag>
    <f-tag v-model:checked="checked" :border="false" color="success" checkable>success</f-tag>
    <f-tag v-model:checked="checked" :border="false" color="processing" checkable>processing</f-tag>
    <f-tag v-model:checked="checked" :border="false" color="error" checkable>error</f-tag>
    <f-tag v-model:checked="checked" :border="false" color="warning" checkable>warning</f-tag>
  </f-space>
  <br />
  <br />
  <f-space>
    有边框可勾选
    <f-tag v-model:checked="checked" color="default" checkable>default</f-tag>
    <f-tag v-model:checked="checked" color="success" checkable>success</f-tag>
    <f-tag v-model:checked="checked" color="processing" checkable>processing</f-tag>
    <f-tag v-model:checked="checked" color="error" checkable>error</f-tag>
    <f-tag v-model:checked="checked" color="warning" checkable>warning</f-tag>
  </f-space>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'

const checked = ref(false)

const instance = getCurrentInstance()
const handleUpdate = (checked: boolean) => {
  instance?.appContext.config.globalProperties.$message.info('回调=>' + checked ? '已勾选' : '取消勾选')
}
</script>

<style lang="scss" scoped></style>

API

Tag

参数	说明	类型	默认值	版本
closable	标签是否可以关闭	boolean	false
closeIcon	自定义关闭按钮	VNode | slot	-	2.0.0
color	标签色	string	-
icon	设置图标	VNode | slot	-	2.0.0
visible(v-model)	是否显示标签	boolean	true
border(新)	是否有边框	boolean	true
size(新)	尺寸	default|small|large|number	default
inverse(新)	颜色翻转	boolean	false
checkable(新)	是否可选择	boolean	false
checked(v-model)(新)	是否已选择	boolean	false

注意

• 以上根据 UI 扩展border,size,inverse,checkable,checked相关属性
• size 支持string或number

事件

事件名称	说明	回调参数
close	关闭时的回调	(e) => void
@update:checked(新)	切换可选的回调	() => boolean

Tag.CheckableTag

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

事件

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