vue手写卡片切换，并且点击获取到卡片信息

最新推荐文章于 2024-07-17 14:33:27 发布

请叫我欧皇i

最新推荐文章于 2024-07-17 14:33:27 发布

阅读量749

点赞数 9

分类专栏： vue2 Element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44278289/article/details/136252125

版权

vue2 Element 专栏收录该内容

79 篇文章 31 订阅

订阅专栏

需求：做一个卡片样式的列表，之后有一些基本信息，之后卡片选中后样式不一样，默认选中第一个卡片，点击卡片后可以获取到卡片的信息

一、效果

二、关键代码

index默认重0开始,activeTable默认为0,0-0等于0，但是有个!那就是取反的意思，那就是true ，就是点击的这个会有选中的active样式，也就是默认第一个会被选中，之后点击其他卡片只需要把index给赋值给activeTab就能实现了

  <div class="menu-list">
            <div v-for="(item, index) in menuTableData" :key="index">
                <div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)">
                    <div class="menu-avatar">
                        <i class="el-icon-star-off"></i>
                    </div>
                    <div class="menu-text">{{ item.name }}</div>
                </div>
            </div>
        </div>

三、完整代码

<template>
    <div style="width: 600px; margin-top: 50px">
        <div class="menu-list">
            <div v-for="(item, index) in menuTableData" :key="index">
                <!-- index==0,activeTable默认为0,0-0等于0，但是有个!那就是取反的意思，那就是true ，就是点击的这个会有选中的active样式-->
                <div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)">
                    <div class="menu-avatar">
                        <i class="el-icon-star-off"></i>
                    </div>
                    <div class="menu-text">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menuTableData: [
                {
                    name: '李华'
                },
                {
                    name: '张三'
                },
                {
                    name: '李四'
                }
            ],
            activeTab: 0 //根据点击进行高亮
        };
    },
    mounted() {},
    methods: {
        menuClick(item, index) {
            this.activeTab = index;
            console.log(item, '点击菜单管理获取');
        }
    }
};
</script>

<style lang="scss" scoped>
.menu-list {
    height: calc(100vh - 360px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    // 左侧主要样式
    .menus {
        /* 矩形 7 */
        width: 300px;
        height: 80px;
        background: rgb(255, 255, 255);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin: 20px 20px;
        display: flex;
        align-items: center;
        .menu-avatar {
            /* 椭圆形 */
            width: 43px;
            height: 43px;
            background: rgba(163, 241, 255, 0.4);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 20px;
            i {
                font-size: 25px;
                color: #fff;
            }
        }
        .menu-text {
            /* 用户管理 */
            color: pink;
            font-family: 阿里巴巴普惠体;
            font-size: 18px;
            font-weight: 400;
            line-height: 22px;
            letter-spacing: -1px;
            text-align: left;
            margin-left: 20px;
        }
    }
    // 选中菜单管理列表后高亮
    .active {
        box-shadow: 0px 8px 8px 0px rgba(27, 19, 19, 0.1);
        .menu-avatar {
            background: rgb(156, 210, 241);
        }
        .menu-text {
            font-weight: 600;
        }
    }
}
</style>

文章到此结束希望对你有所帮助~