vue首页组件切换

• Z时代
• 2024-01-10
• 分类：综合

结构如下

代码如下：

<template>
    <div id="page">
        <div style="width: 100%" class="flex-container column">
            <div class="item one" @click="clickChart('1')" style="transform: translate(-38.4%, -24.5%) scale(0.23)">
                <Pie ref="pie"></Pie>
            </div>
            <div class="item two" @click="clickChart('2')" style="transform: translate(-38.4%, 14.5%) scale(0.23)">
                <WorldMap ref="worldMap"></WorldMap>
            </div>
            <div class="item three" style="transform: translate(-18.6%, -28.5%) scale(0.33);height: 20%;width: 160%">
                <Home></Home>
            </div>
            // active 很关键 别写漏掉了
            <div class="item four active" @click="clickChart('4')" style="transform: translate(0%, -9.5%) scale(0.55);">
                <Geo ref="geo"></Geo>
            </div>
            <div class="item five" @click="clickChart('5')" style="transform: translate(38.29%, -24.5%) scale(0.23);">
                <Pile ref="pile"></Pile>
            </div>
            <div class="item six" @click="clickChart('6')" style="transform: translate(38.29%, 14.5%) scale(0.23);">
                <Gauge></Gauge>
            </div>
        </div>
    </div>
</template>
<script>
    import Geo from '@/components/Geo'
    import Pile from '@/components/Pile'
    import Pie from '@/components/Pie'
    import Gauge from '@/components/Gauge'
    import WorldMap from '@/components/WorldMap'
    import Home from '@/components/Home'
    export default {
        components: {
            Geo,
            Pie,
            Pile,
            Gauge,
            WorldMap,
            Home
        },
        data() {
            return {iconDisplay: '4'}
        },
        methods: {
            clickChart(clickIndex) {
                let activeItem = document.querySelector('.flex-container .active')
                let activeIndex = activeItem.dataset.order
                let clickItem = this.items[clickIndex - 1]
                if (activeIndex === clickIndex) {
                    return
                }
                activeItem.classList.remove('active')
                clickItem.classList.add('active')
                this._setStyle(clickItem, activeItem)
                this.iconDisplay = clickIndex
            }, _setStyle(el1, el2) {
                let transform1 = el1.style.transform
                let transform2 = el2.style.transform
                el1.style.transform = transform2
                el2.style.transform = transform1
            }
        }
    }
</script>
<style scoped> .active {
    height: 110%;
    width: 100%;
    margin-left: 10px;
    line-height: 300px;
    background-color: rgba(47, 136, 165, 0.35) !important;
    z-index: 9;
}
.item {
    padding: 0px;
    margin: 0px;
    position: absolute;
    transform: scale(0.33);
    text-align: center;
    transition: all 0.8s;
    background: rgba(43, 94, 121, 0.3);
}
.flex-container.column {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-sizing: content-box;
} </style>

以上是 vue首页组件切换 的全部内容， 来源链接： utcz.com/z/377665.html