qimall/addons/DepositPresale/backend/views/default/components/style-components/diy-tab.php

<template id="diy-tab">
    <div flex="cross:center">
        <div v-for="(item,index) in value" :key="index">
            <div @click="select(item,index)" style="cursor: pointer;">
                <slot :item="item" :index="item" :is-select="index == current"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    Vue.component('diy-tab', {
        name: "diy-tab",
        template: "#diy-tab",
        props: {
            // 数据列表
            value: {
                type: Array,
                default () {
                    return []
                }
            },
            // 默认选中
            defaultIndex: {
                type: Number | String,
                default () {
                    return -1
                }
            },
            // 默认样式
            defaultStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 选中样式
            selectedStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
        },
        data() {
            return {
                current: -1
            }
        },
        watch: {
            defaultIndex: {
                handler(newVal) {
                    this.current = newVal
                },
                immediate: true,
            }
        },
        methods: {
            select(item, index) {
                this.current = index
                this.$emit("change", item, index)
            },
        }
    });
</script>

<style>
    .diy-tab-item {
        padding: 10px;
    }
</style>