应用平台

# 组件名cap4-tap

# 引入

import Cap4Tap from 'cap4-pc-ui/lib/cap4-tap';
import 'cap4-pc-ui/lib/cap4-tap/css/cap4-tap.css';

# 基础用法

/**/

export default {
data() {
return {
tabs: [
{
value: 1,
name: '北京'
},
{
value: 2,
name: '上海'
},
{
value: 3,
name: '广州'
}
],
activeTabIndex: 0
};
},
methods: {
changeTab(index) {
this.activeTabIndex = index;
console.log('index', index);
}
}
};
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-tap :tabs="tabs" @changeTab="changeTab" :activeTabIndex="activeTabIndex"></cap4-tap>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabs: [
                {
                    value: 1,
                    name: '北京'
                },
                {
                    value: 2,
                    name: '上海'
                },
                {
                    value: 3,
                    name: '广州'
                }
            ],
            activeTabIndex: 0
        };
    },
    methods: {
        changeTab(index) {
            this.activeTabIndex = index;
            console.log('index', index);
        }
    }
};
</script>

:::

# Attributes

参数 说明 类型 可选值 默认值
tabs 数据 (选填)) String — —
activeTabIndex 选中项 (选填)) Number — 0
padding padding样式 (选填)) String — '5px 10px'
showPartition 是否显示竖线 (选填)) Boolean — true
showBorder 是否显示边线 (选填)) Boolean — false
showTriangle 是否显示三角 (选填)) Boolean — false
height 高度 (选填)) Number — —
fontSize 字体 (选填)) Number — 14

# Event

事件名称 说明 回调参数
changeTab 切换 index
编撰人：yinyanting

快速跳转

← （13) 文本组件 →