kvuseTabs 标签页 #
基础使用 #
vue
<template>
<k-tabs
:tabs-list="tabsList" v-model="activeName"
@tab-click="tabClick"
/>
<span>{{ activeName }}</span>
</template>
<script setup>
import { ref } from 'vue';
const tabsList = ref([
{ label: '全部', name: 'all' },
{ label: '正常', name: 'normal' },
{ label: '已拉黑', name: 'block' },
]);
const activeName = ref('all');
const tabClick = (value) => {
console.log('value: ', value);
};
</script>
Card 类型 #
如果设置type为card类型，展示卡片类型
vue
<template>
<k-tabs
:tabs-list="tabsList" v-model="activeName"
type="card" @tab-click="tabClick"
/>
<span>{{ activeName }}</span>
</template>
<script setup>
import { ref } from 'vue';
const tabsList = ref([
{ label: '全部', name: 'all' },
{ label: '正常', name: 'normal' },
{ label: '已拉黑', name: 'block' },
]);
const activeName = ref('all');
const tabClick = (value) => {
console.log('value: ', value);
};
</script>
Router 路由模式 #
如果设置is-router属性，可设置路由模式 name就是跳转的路由
WARNING
首先要配置路由，name值要和路由名一致，切换路由自动跳转，刷新默认当前路由
如果没有配置路由，去掉is-router
vue
<template>
<k-tabs
:tabs-list="tabsList" v-model="activeName"
is-router @change="tabClick"
/>
</template>
<script setup>
import { ref } from 'vue';
const tabsList = ref([
{ label: '全部', name: 'all' },
{ label: '正常', name: 'normal' },
{ label: '已拉黑', name: 'block' },
]);
const activeName = ref('all');
const tabClick = (value) => {
console.log('value: ', value);
};
</script>
Layout 左右布局 #
可以通过插槽<slot>，设置左右布局
vue
<template>
<k-tabs
:tabs-list="tabsList" v-model="activeName"
@tab-click="tabClick"
>
<k-button>设置</k-button>
</k-tabs>
<span>{{ activeName }}</span>
</template>
<script setup>
import { ref } from 'vue';
const tabsList = ref([
{ label: '全部', name: 'all' },
{ label: '正常', name: 'normal' },
{ label: '已拉黑', name: 'block' },
]);
const activeName = ref('all');
const tabClick = (value) => {
console.log('value: ', value);
};
</script>