更新记录

0.0.2（2024-10-22） 下载此版本

选项卡

0.0.1（2024-10-18） 下载此版本

选项卡

平台兼容性

tabs

options

使用

    import pdTabs from "@/components/pd-tabs/pd-tabs.vue";

<pd-tabs :tabsMarginTop="20" :content="state.content"  :tabsWidth="750" :tabsHeight="100" tabsBgColor="green" is_line :tabList="state.tabList" range-key="name"  @tabSubmit="tabSubmit">
   <template v-slot:default="slotProps">
     {{slotProps.data.title}}
   </template>
</pd-tabs>

const state = reactive({
    tabList:[
        {
            name:'全部',
            id:1
        },
        {
            name:'待支付',
            label:'tab2',
            id:2
        },
        {
            name:'待发货',
            label:'tab3',
            id:3
        },
        {
            name:'待收货',
            label:'tab4',
            id:4
        }
    ],
    content:[
        {
            title:'第一张',
            id:1
        },
        {
            title:'第二张',
            id:2
        },
        {
            title:'第三张',
            id:3
        },
        {
            title:'第四张',
            id:4
        }
    ]
})