ERP 组件库

Appearance

标签 Tag ​

用于信息的选择、筛选、分类。用户通过标签进行信息反馈和交互操作。 ​

基本用法 ​

标签的基本用法

代码事例
vue
<template>
  <fk-space>
    <fk-tag>Default</fk-tag>
    <fk-tag>Tag 1</fk-tag>
    <fk-tag>Tag 2</fk-tag>
    <fk-tag>
      <template #icon>
        <icon-check-circle-fill />
      </template>
      Complete
    </fk-tag>
  </fk-space>
</template>

可关闭标签 ​

通过 closable 属性控制标签是否可关闭。可关闭标签可通过 close 事件执行一些关闭后操作，也可通过 visible 属性控制标签的显示或隐藏。

代码事例
vue
<template>
  <fk-space>
    <fk-tag closable>Tag</fk-tag>
    <fk-tag closable>
      <template #icon>
        <icon-star/>
      </template>
      Tag
    </fk-tag>
  </fk-space>
</template>

动态编辑标签 ​

可动态添加和删除标签。

代码事例
vue
<template>
  <fk-space wrap>
    <fk-tag
      v-for="(tag, index) of tags"
      :key="tag"
      :closable="index !== 0"
      @close="handleRemove(tag)"
    >
      {{ tag }}
    </fk-tag>

    <fk-input
      v-if="showInput"
      ref="inputRef"
      v-model.trim="inputVal"
      :style="{ width: '90px'}"
      size="mini"
      @keyup.enter="handleAdd"
      @blur="handleAdd"
    />
    <fk-tag
      v-else
      :style="{
        width: '90px',
        backgroundColor: 'var(--color-fill-2)',
        border: '1px dashed var(--color-fill-3)',
        cursor: 'pointer',
      }"
      @click="handleEdit"
    >
      <template #icon>
        <icon-plus />
      </template>
      Add Tag
    </fk-tag>
  </fk-space>
</template>

<script>
import { nextTick, ref } from 'vue';

export default {
  setup() {
    const tags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
    const inputRef = ref(null);
    const showInput = ref(false);
    const inputVal = ref('');

    const handleEdit = () => {
      showInput.value = true;

      nextTick(() => {
        if (inputRef.value) {
          inputRef.value.focus();
        }
      });
    };

    const handleAdd = () => {
      if (inputVal.value) {
        tags.value.push(inputVal.value);
        inputVal.value = '';
      }
      showInput.value = false;
    };

    const handleRemove = (key) => {
      tags.value = tags.value.filter((tag) => tag !== key);
    };

    return {
      tags,
      inputRef,
      showInput,
      inputVal,
      handleEdit,
      handleAdd,
      handleRemove,
    };
  },
};
</script>

可点击 ​

通过设置 clickable ，可以实现点击选中的效果。

代码事例
vue
<template>
  <fk-space>
    <fk-tag clickable color="fkblue" @click="handleClick" bordered>Awesome</fk-tag>
    <fk-tag clickable color="fkblue" @click="handleClick" :disabled="isDisabled" bordered>Disabled {{ isDisabled }}</fk-tag>
  </fk-space>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
const isDisabled = ref(false);

const handleClick = () => {
  isDisabled.value = !isDisabled.value;
}
</script>

可选中 ​

通过设置 checkable ，可以实现点击选中的效果。

代码事例
vue
<template>
  <fk-space>
    <fk-tag class="fk-tag-checked" :checked="true">Awesome</fk-tag>
    <fk-tag checkable color="red" :default-checked="true">Aaaa</fk-tag>
    <fk-tag checkable color="fkblue" :default-checked="true">Aaaa</fk-tag>
  </fk-space>
</template>

标签的颜色 ​

我们提供多种预设色彩的标签样式，通过 color 设置不同颜色。如果预设值不能满足你的需求，color 字段也可以设置自定义色值。

代码事例
vue
<template>
  <fk-space wrap>
    <fk-tag v-for="(color, index) of colors" :key="index" :color="color" closable>{{ color }}</fk-tag>
  </fk-space>
  <h3>Custom Color:</h3>
  <fk-space wrap>
    <fk-tag v-for="(color, index) of custom" :key="index" :color="color" closable>{{ color }}</fk-tag>
  </fk-space>
</template>

<script>
export default {
  setup() {
    const colors = [
      'red',
      'orangered',
      'orange',
      'gold',
      'lime',
      'green',
      'cyan',
      'blue',
      'fkblue',
      'purple',
      'pinkpurple',
      'magenta',
      'gray'
    ];
    const custom = [
      '#f53f3f',
      '#7816ff',
      '#00b42a',
      '#165dff',
      '#ff7d00',
      '#eb0aa4',
      '#7bc616',
      '#86909c',
      '#b71de8',
      '#0fc6c2',
      '#ffb400',
      '#168cff',
      '#ff5722'
    ];

    return {
      colors,
      custom
    }
  },
}
</script>

标签的尺寸 ​

标签的大小分为：small、medium、large 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 medium。

代码事例
vue
<template>
  <fk-space>
    <fk-tag size="large">Large</fk-tag>
    <fk-tag>Medium</fk-tag>
    <fk-tag size="small">Small</fk-tag>
  </fk-space>
</template>

加载中状态 ​

标签的加载中状态。

代码事例
vue
<template>
  <fk-tag loading>Loading</fk-tag>
</template>

带图标的标签 ​

可通过 icon 插槽在标签中加入图标。

代码事例
vue
<template>
  <fk-space>
    <fk-tag color="gray">
      <template #icon>
        <icon-github/>
      </template>
      Github
    </fk-tag>
    <fk-tag color="orangered">
      <template #icon>
        <icon-gitlab/>
      </template>
      Gitlab
    </fk-tag>
    <fk-tag color="blue">
      <template #icon>
        <icon-twitter/>
      </template>
      Twitter
    </fk-tag>
    <fk-tag color="fkblue">
      <template #icon>
        <icon-facebook/>
      </template>
      Facebook
    </fk-tag>
  </fk-space>
</template>

带边框的标签 ​

通过参数 bordered，可以显示带边框的标签。

代码事例
vue
<template>
   <fk-space wrap>
    <fk-tag bordered>default</fk-tag>
    <fk-tag v-for="(color, index) of colors" :key="index" :color="color" bordered>{{ color }}</fk-tag>
  </fk-space>
</template>

<script>
export default {
  setup() {
    const colors = [
      'orangered',
      'orange',
      'gold',
      'lime',
      'green',
      'cyan',
      'blue',
      'fkblue',
      'purple',
      'pinkpurple',
      'magenta',
      'gray'
    ];
    return {
      colors
    }
  },
}
</script>

API ​

<tag> Props ​

参数名描述类型默认值版本
color标签的颜色'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'blue' | 'fkblue' | 'purple' | 'pinkpurple' | 'magenta' | 'gray'-
size标签的大小'small' | 'medium' | 'large''medium'
bordered是否显示边框booleanfalse1.0.0
visible (v-model)标签是否可见boolean-
default-visible标签默认是否可见booleantrue
loading标签是否为加载中状态booleanfalse
closable标签是否可关闭booleanfalse
checkable标签是否可选中booleanfalse
checked (v-model)标签是否选中（标签可选中时可用）boolean-
default-checked标签默认选中状态（标签可选中时可用）booleantrue
nowrap标签内容不换行booleanfalse

<tag> Events ​

事件名描述参数
close点击关闭按钮时触发ev: MouseEvent
check用户选中时触发（仅在可选中模式下触发）checked: boolean
ev: MouseEvent

<tag> Slots ​

插槽名描述参数
icon图标-
close-icon关闭按钮的图标-

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team