Viog UI

标签栏 tab-card 待优化

用于评分交互

使用说明

简单引入

你需要在tab-card-group组件中添加vi-tab-card组件自定义标签栏卡片数量，value属性用于标识标签栏的值

通过v-model绑定一个变量用于存放当前选中value

0
1
2
3
展开代码
<template>
    <vi-tab-card-group v-model="cardOne">
        <vi-tab-card :value="0"/>
        <vi-tab-card :value="1"/>
        <vi-tab-card :value="2"/>
        <vi-tab-card :value="3"/>
    </vi-tab-card-group>
</tempalte>

<script>
    const cardOne = ref(0)
</script>

别名与图标

可以通过tab-card默认插槽给定标签栏别名，也可以通过icon插槽给定标签栏图标

标签栏1
标签栏2
展开代码
<template>
    <vi-tab-card-group v-model="cardFour">
        <vi-tab-card :value="0">
            <template v-slot:icon>
                <vi-icon/>
            </template>
            标签栏1
        </vi-tab-card>
        <vi-tab-card :value="1">标签栏2</vi-tab-card>
    </vi-tab-card-group>
</tempalte>

<script>
    const cardFour = ref(0)
</script>

样式

你可以通过type属性更换卡片样式

0
1
2
3
0
1
2
3
0
1
2
3
展开代码
<template>
    <vi-tab-card-group v-model="cardTwo">
        <vi-tab-card :value="0"/>
        <vi-tab-card :value="1"/>
        <vi-tab-card :value="2"/>
        <vi-tab-card :value="3"/>
    </vi-tab-card-group>
    <vi-tab-card-group v-model="cardTwo" type="plain">
        <vi-tab-card :value="0"/>
        <vi-tab-card :value="1"/>
        <vi-tab-card :value="2"/>
        <vi-tab-card :value="3"/>
    </vi-tab-card-group>
        <vi-tab-card-group v-model="cardTwo" type="button">
        <vi-tab-card :value="0"/>
        <vi-tab-card :value="1"/>
        <vi-tab-card :value="2"/>
        <vi-tab-card :value="3"/>
    </vi-tab-card-group>
</template>

<script>
    const cardTwo = ref(0)
</script>

删除事件

组件不会主动删除卡片，点击按钮会触发删除事件delete，你可以根据需求自行定义

0
1
2
3
展开代码
<template>
    <vi-tab-card-group v-model="cardThree" @delete="handleDelete">
        <vi-tab-card :value="0"/>
        <vi-tab-card :value="1"/>
        <vi-tab-card :value="2"/>
        <vi-tab-card :value="3"/>
    </vi-tab-card-group>
</template>

<script>
    const cardThree = ref(0)

    function handleDelete (value) {
        alert(value)
    }
</script>

Props

tab-card-group

属性名描述类型默认值

tab-card

属性名描述类型默认值

插槽

tab-card-group

插槽名描述有无默认内容

tab-card

插槽名描述有无默认内容

可覆写css变量

变量名描述默认值