Panel 面板

横向（或纵向）切换的面板容器，通过 v-model 绑定当前索引。

基础用法

面板 1：面板一 (激活)

面板 2：面板二

面板 3：面板三

查看代码

<template>
    <div style="border: 1px solid #eee; border-radius: 8px; overflow: hidden">
        <Panel v-model="active" :items="items">
            <template #default="{ item, index, active }">
                <div style="height: 140px; padding: 24px; background: #fafafa">
                    面板 {{ index + 1 }}：{{ item.label }} {{ active ? "(激活)" : "" }}
                </div>
            </template>
        </Panel>
        <div style="padding: 12px">
            <Button @click="active = (active + 1) % items.length">下一个</Button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Panel } from "@a-drowned-fish/rox-v";

const active = ref(0);
const items = [
    { key: "1", label: "面板一" },
    { key: "2", label: "面板二" },
    { key: "3", label: "面板三" },
];
</script>

Props

参数	说明	类型	默认值
modelValue (v-model)	当前索引	number	0
items	面板数据，每项需含 key、label	{ key; label; disabled?: boolean }[]	[]
dir	排列方向	"x" | "y" | "rtl"	"x"
duration	切换动画时长（ms）	number	0

事件

事件名	说明	回调参数
update:modelValue	索引变化	(index: number) => void

插槽

插槽名	子作用域	说明
default	{ item, index, active }	每个面板的内容