简单实现选项卡

父组件

父组件代码

<item class="add-list" :active="active" name="备注" :imgsrc='picList[0]' @click="aaa"></item>
<item class="add-list" :active="active" name="路由" :imgsrc='picList[0]' @click="aaa"></item>
<item class="add-list" :active="active" name="哈哈" :imgsrc='picList[0]' @click="aaa"></item>

picList: [
    require('../../static/icon/5.png'),
],
active: '',

aaa(e) {
        this.active = e
},

子组件

子组件代码

通过父子局和子组件的值(active 和 name)来判断当前元素是否被选中

<template>
    <view class="container"  @click="itemClick" >
        <view class="box">
            <view :class="['icon',classname]">
                <image :src="imgsrc" mode=""></image>
                <view :class="['name',classname]">
                        {{name}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "item",

        data() {
                return {
                        isactive: '',
                        select: ''
                };
        },
        computed: {
                //判断父组件选的值和子组件是否一样
                classname() {
                        return this.active == this.name ? 'active' : 'noactive'
                }
        },
        methods: {
            itemClick() {
                    this.$emit('click', this.name)
            },
            
        },
        props: {

                name: {
                        type: String,
                        default: ''
                },
                active: {
                        type: String,
                        default: ''
                },
                imgsrc: {
                        type: String,
                        default: '../../static/icon/2.png'
                }

        },

    }
</script>

<style lang="scss">
.container {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    .box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .icon {
                    border: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 60px;
                    height: 60px;
                    border-radius: 10px;
                    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
                            -18px -18px 30px rgba(255, 255, 255, 1);
                    background-color: #f5f4f4;
                    transition: box-shadow .2s ease-out;
                    padding: 0;

                    &:after {
                            border: none;
                    }

                    image {
                            width: 30px;
                            height: 30px;
                    }

                    &.active {
                        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
                                0px 0px 0px rgba(255, 255, 255, 0.8),
                                inset 18px 18px 30px rgba(0, 0, 0, 0.1),
                                inset -18px -18px 30px rgba(255, 255, 255, 1);
                        transition: box-shadow .2s ease-out;
                    }

                    .name {
                        font-size: 12px;
                        padding-top: 2px;
                        color: #999;

                        &.active {
                                color: #3d3d3d;
                        }

                        transition: all .3s;
                    }
            }

    }

}
</style>