VUE实现QQ样式手风琴

最新推荐文章于 2025-04-29 22:43:13 发布

qq_53245972

最新推荐文章于 2025-04-29 22:43:13 发布

阅读量177

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53245972/article/details/130227095

版权

文件列表

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">

        <ol>
            <li v-for="g in groups" :key="g.groupId">
                <div class="title" @click="toggle(g.groupId)">
                    <img :src="g.expand?'img/down.png':'img/right.png'" alt="" class="arrow">
                    <span>{{g.groupName}} {{g.onlineMembers}}/{{g.members.length}}</span>
                </div>
                <ul v-if="g.expand">
                    <li v-for="m,i in g.members" :key="i">
                        <img :src="m.logo" alt="" class="logo">
                        <span>{{m.name}}</span>
                    </li>
                </ul>
            </li>
        </ol>

    </div>

    <script>
        var vm = new Vue({
            data: {
                groups: [
                    {
                        groupId: 1, // 组id
                        groupName: "小学同学", // 组名
                        onlineMembers: 1, // 在线人数
                        expand: false, // 是否展开
                        members: [ // 本组好友成员
                            { name: "张三1", logo: "img/logo.png" },
                            { name: "张三2", logo: "img/logo.png" },
                            { name: "张三3", logo: "img/logo.png" },
                            { name: "张三4", logo: "img/logo.png" }
                        ]
                    },
                    {
                        groupId: 2,
                        groupName: "高中同学",
                        onlineMembers: 2,
                        expand: false,
                        members: [
                            { name: "李四1", logo: "img/logo.png" },
                            { name: "李四2", logo: "img/logo.png" },
                            { name: "李四3", logo: "img/logo.png" },
                            { name: "李四4", logo: "img/logo.png" }
                        ]
                    },
                    {
                        groupId: 3,
                        groupName: "大学同学",
                        onlineMembers: 3,
                        expand: false,
                        members: [
                            { name: "王五1", logo: "img/logo.png" },
                            { name: "王五2", logo: "img/logo.png" },
                            { name: "王五3", logo: "img/logo.png" },
                            { name: "王五4", logo: "img/logo.png" }
                        ]
                    }
                ]
            },
            methods: {
                toggle(groupId){
                    var group = this.groups.filter(g=>g.groupId==groupId)[0];
                    group.expand = !group.expand;
                }
            }
        })

        vm.$mount("#app")
    </script>
</body>

</html>

CSS部分

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
}

ol,
ul {
    list-style: none;
}

ol {
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;
    margin: 10px auto;
}

ol>li, ul>li{
    line-height: 30px;
    cursor: pointer;
}

ul>li{
    padding: 0 10px;
}

.arrow {
    width: 25px;
    vertical-align: middle;
}

.logo{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
}