标签业务组件

基础用法

流量告警

敏感数据告警

安全告警

基础用法

根据配置生成标签，由div实现

<template>
  <su-tabs class="vp-raw" :tabsList="tabsList" name="basic" />
</template>

<script setup lang="ts">
const tabsList = ['流量告警', '敏感数据告警', '安全告警'];
</script>

显示标识

漏洞告警

2

监控告警

威胁告警

显示标识

显示红点标识

<template>
  <su-tabs class="vp-raw" :tabsList="tabsList" name="tip" />
</template>

<script setup lang="ts">
const tabsList = [
  { name: "漏洞告警", num: 2 },
  "监控告警",
  "威胁告警",
];
</script>

手动变更标签位置

流量告警

敏感数据告警

安全告警

手动变更标签位置

根据输入变更位置

<template>
  <div style="margin-bottom: 24px;">
    <a-button @click="reset(0)" style="margin-right: 24px;">第1个</a-button>
    <a-button @click="reset(1)">第2个</a-button>
  </div>
  <su-tabs class="vp-raw" :tabsList="tabsList" :cur="3" ref="resetTabs" name="change" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tabsList = ['流量告警', '敏感数据告警', '安全告警'];

const resetTabs = ref()

const reset = (val: number) => {
  resetTabs.value.changeBor(val)
  resetTabs.value.current = tabsList[val]
}
</script>

组件参数配置

参数	说明	类型	默认值
tabsList	标签配置	string[] or object[]	['测试'] or [{name: '测试', num: 1, value: 'test'}]
name	标识	string	多个tabs在同一个页面使用时需要设置不同的name值
cur	当前高亮项	number	设置初始高亮的项
itemRight	每一项右侧的宽度	number	--

回调方法

参数	说明	类型	示例
click	点击不同值触发	function	--