更新记录

1.0（2019-08-25） 下载此版本

1.0 首次发布

平台兼容性

sun-tab

横向选项卡

1. 此组件固定高度(44px)
2. 内容超出会隐藏

props

event

使用说明

具体参数使用请查看demo

将组件放入你项目的components目录下。 在 script 中引用组件

<script>
    import sunTab from '@/components/sun-tab/sun-tab.vue';
    export default {
        components: {
            sunTab
        },
        data() {
            return {
                index: 0,
                tabList: ['选项卡一','选项卡二','选项卡三'], //普通数据赋值
                tabObjectList: [ //对象数组赋值
                    {
                        name: '选项卡一',
                        value: 1
                    },
                    {
                        name: '选项卡二',
                        value: 2
                    },
                    {
                        name: '选项卡三',
                        value: 3
                    }
                ],
            }
        },
        methods: {
            arrayChange(e){
                console.log('数组数据返回格式');
                console.log(e);
            },
            objectChange(e){
                console.log('对象数据返回格式');
                console.log(e);
            }
        }
    }
</script>

在 template 中使用组件

<sun-tab :value.sync="index" :tabList="tabList"></sun-tab>
<sun-tab :value.sync="index" @change="objectChange" :tabList="tabObjectList" rangeKey="name"></sun-tab>