z-base-ui

Appearance

ZTag ​

  • 可用于进行属性分类，用于标记事物的属性和维度。
  • 版本要求 >= 1.2.0

基础用法 ​

标签 1标签 2标签 3标签 4
<template>
  <div>
    <z-tag>标签 1</z-tag>
    <z-tag>标签 2</z-tag>
    <z-tag>标签 3</z-tag>
    <z-tag>标签 4</z-tag>
  </div>
</template>

<script setup lang="ts">
import { ZTag } from "@d7ee/z-base-ui";
</script>

多彩标签 ​

我们预设了六种常见的标签颜色，作用于不同场景，当然如果不能符合你的需求，也支持自定义色彩。

Presets:

successprimarywarningdangerinfonormal

Custom:

purpleyellowcyanbluered#f06292#96ab61
<template>
  <h4 style="margin-bottom: 16px">Presets:</h4>
  <z-tag color="success">success</z-tag>
  <z-tag color="primary">primary</z-tag>
  <z-tag color="warning">warning</z-tag>
  <z-tag color="danger">danger</z-tag>
  <z-tag color="info">info</z-tag>
  <z-tag>normal</z-tag>

  <h4 style="margin-bottom: 16px">Custom:</h4>
  <z-tag color="purple">purple</z-tag>
  <z-tag color="yellow">yellow</z-tag>
  <z-tag color="cyan">cyan</z-tag>
  <z-tag color="blue">blue</z-tag>
  <z-tag color="red">red</z-tag>
  <z-tag color="#f06292">#f06292</z-tag>
  <z-tag color="#96ab61">#96ab61</z-tag>
</template>

<script setup lang="ts">
import { ZTag } from "@d7ee/z-base-ui";
</script>

色彩饱满 ​

使用plump可使色彩饱满。

Presets:

successprimarywarningdangerinfo

Custom:

purplebluered#f06292#96ab61
<template>
  <h4 style="margin-bottom: 16px">Presets:</h4>
  <z-tag color="success" plump>success</z-tag>
  <z-tag color="primary" plump>primary</z-tag>
  <z-tag color="warning" plump>warning</z-tag>
  <z-tag color="danger" plump>danger</z-tag>
  <z-tag color="info" plump>info</z-tag>

  <h4 style="margin-bottom: 16px">Custom:</h4>
  <z-tag color="purple" plump>purple</z-tag>
  <z-tag color="blue" plump>blue</z-tag>
  <z-tag color="red" plump>red</z-tag>
  <z-tag color="#f06292" plump>#f06292</z-tag>
  <z-tag color="#96ab61" plump>#96ab61</z-tag>
</template>

<script setup lang="ts">
import { ZTag } from "@d7ee/z-base-ui";
</script>

图标 ​

使用icon可以自定义样式图标或使用预设的图标库。值得注意的是，如果你打算使用预设图标需要安装对应的库，具体方法请查看icon图标。

Presets:

pickredorange

Custom:

custom 1 custom 2 😅 custom 3 
<template>
  <div class="box">
    <h4 style="margin-bottom: 16px">Presets:</h4>
    <z-tag color="pick" icon="face-smile-beam">pick</z-tag>
    <z-tag color="red" icon="ghost">red</z-tag>
    <z-tag color="orange" icon="cloud-showers-heavy">orange</z-tag>

    <h4 style="margin-bottom: 16px">Custom:</h4>
    <z-tag color="success">
      <template #icon>
        <z-icon icon="jet-fighter" bounce></z-icon>
      </template>

      custom 1
    </z-tag>

    <z-tag color="primary">
      <template #icon>
        <z-icon icon="phone" shake></z-icon>
      </template>

      custom 2
    </z-tag>

    <z-tag color="#80cbc4">
      <template #icon>
        😅
      </template>

      custom 3
    </z-tag>
  </div>
</template>

<script setup lang="ts">
import { ZTag, ZIcon } from "@d7ee/z-base-ui";
</script>

<style lang="less" scoped>
.box {
  line-height: 20px;
  .z-tag {
    padding: 4px 7px;
  }
  .z-icon {
    margin-right: 4px;
  }
}
</style>

无边框 ​

使用bordered可取消边框。

标签 1标签 2标签 3标签 4
<template>
  <div>
    <z-tag>标签 1</z-tag>
    <z-tag>标签 2</z-tag>
    <z-tag :bordered="false">标签 3</z-tag>
    <z-tag :bordered="false">标签 4</z-tag>
  </div>
</template>

<script setup lang="ts">
import { ZTag } from "@d7ee/z-base-ui";
</script>

可关闭标签 ​

使用closable可使标签变为可关闭标签。

successprimarywarningnormalpurple#f06292#96ab61
<template>
  <z-tag color="success">success</z-tag>
  <z-tag color="primary">primary</z-tag>
  <z-tag color="warning" closable>warning</z-tag>
  <z-tag closable>normal</z-tag>

  <z-tag color="purple" closable>purple</z-tag>
  <z-tag color="#f06292" closable>#f06292</z-tag>
  <z-tag color="#96ab61">#96ab61</z-tag>
</template>

<script setup lang="ts">
import { ZTag } from "@d7ee/z-base-ui";
</script>

动态添加和删除 ​

用数组生成一组标签，可实现动态删除或添加

标签1标签2标签3标签4新增属性
<template>
  <div class="dynamic">
    <z-tag closable v-for="(tag, index) in tags" :key="index" @close="closeTag(tag)">
      {{tag}}
    </z-tag>

    <z-tag v-if="!isAdd" icon="plus" class="add" @click="() => isAdd = !isAdd">新增属性</z-tag>
    <div class="ipt" v-if="isAdd">
      <input v-model="content" placeholder="请输入"/>
      <z-button size="small" type="primary" @click="handleClickAddItem">添加</z-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ZTag, ZButton, Message } from "@d7ee/z-base-ui";
import {ref} from "vue";

const tags = ref<string[]>(["标签1", "标签2", "标签3", "标签4"]);
const isAdd = ref(false);
const content = ref<string>("");

const closeTag = (tag: string) => {
  tags.value = tags.value.filter(r => r !== tag);
}

const handleClickAddItem = () => {
  if (!content.value) {
    Message.warning("请输入内容");
    return;
  }

  tags.value.push(content.value);
  isAdd.value = false;
  content.value = "";
}
</script>

<style lang="less" scoped>
.dynamic {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.add {
  cursor: pointer;
}

.ipt {
  display: inline-flex;
  input {
    border: 1px solid #cccccc;
    margin-right: 4px;
    box-sizing: border-box;
    padding: 0 6px;
  }
}
</style>

API 属性 ​

属性名说明类型默认值
color色彩string-
plump色彩饱满booleanfalse
fontColor字体颜色boolean-
bordered是否边框object—
icon图标string | slot—
closable是否可被关闭booleanfalse
id唯一id，没有时随机生成string-

slot 插槽 ​

slotName说明参数
icon图标

event 事件 ​

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