VUE交互式组件的封装（内有代码实现逻辑与完整代码）

这个组件封装很容易，难就难在了代码逻辑上，接下来带你了解一下这个组件的代码逻辑，写完之后发现好简单，哈哈…

下图是代码实现的效果，鼠标悬停不同六宫格，左侧手机的两个div显示不同的信息

代码分析：

1. 首先写两个div分左右两个盒子，居中显示，屏幕自适应。
2. 左侧盒子是贴了一张手机的backgroud（url），内置两个盒子，使用定位设置两个盒子位置
3. 右侧盒子使用定位的方式决定六宫格的位置，六宫格首先做了一个白色的background（url）,然后使用：hover事件更改背景图片与字体颜色。
4. 给循环体绑定@mouseover事件进行动态赋值

话不多说，直接上代码，复制可用：

<template >
    <div class="websiteBox">
        <div class="shzxBody">
            <div class="Scenario">
                <p class="Scenario-title">应用场景</p>
                <div class="Scenario-body">
                    <div class="left">
                        <div class="message">
                            <div class="message-top">{{message}}</div>
                            <div class="message-bottom">
                                <img src="../images/tips33@2x.png"
                                     alt="">
                            </div>
                        </div>
                        <div class="tips">{{tips}}</div>
                    </div>
                    <div class="right">
                        <ul>
                            <li v-for="(item,index) in info"
                                :key="index"
                                :class="'polygon_'+item.value + ' ' + (activeIdx == index + 1 ? 'active' : '')"
                                @mouseover="liItem(item)">
                                <span>{{item.title}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    name: 'Scenario',
    props: {
        info: Array,
    },
    data () {
        return {
            message: '',
            tips: '',
            activeIdx: 1
        }
    },
    methods: {
        liItem (item) {
            this.message = item.message
            this.tips = item.tips
            this.activeIdx = item.value
        }
    },
    mounted () {
    }
}
</script>
<style lang="scss" scoped>
.shzxBody {
    .Scenario {
        background-color: #f8f8f8;
        &-title {
            font-size: 28px;
            font-weight: 500;
            text-align: center;
            padding: 64px 0 64px 0;
        }
        &-body {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 64px;
            .left {
                position: relative;
                width: 317px;
                height: 624px;
                background: url(../images/iPhone@2x.png);
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 100% 100%;
                .message {
                    position: absolute;
                    top: 20%;
                    left: 36px;
                    width: 209px;
                    background: #f3f3f3;
                    border-radius: 10px 10px 10px 0;
                    &-top {
                        margin: 10px;
                    }
                    &-bottom {
                        img {
                            position: absolute;
                            width: 14px;
                            height: 17px;
                            top: 86%;
                            left: -2.5%;
                        }
                    }
                }
                .tips {
                    padding: 10px;
                    position: absolute;
                    width: 321px;
                    left: 47px;
                    top: 400px;
                    -webkit-box-shadow: 0 9px 27px 0 hsl(0deg 0% 84% / 51%);
                    box-shadow: 0 9px 27px 0 hsl(0deg 0% 84% / 51%);
                    border-radius: 10px;
                    background: #fff;
                }
            }
            .right {
                margin-left: 115px;
                ul {
                    width: 436px;
                    height: 436px;
                    position: relative;
                    .polygon_1 {
                        position: absolute;
                        top: 0;
                        left: 66px;
                    }
                    .polygon_2 {
                        position: absolute;
                        top: 0;
                        left: 198px;
                    }
                    .polygon_3 {
                        position: absolute;
                        top: 132px;
                        left: 0px;
                    }
                    .polygon_4 {
                        position: absolute;
                        top: 264px;
                        left: 198px;
                    }
                    .polygon_5 {
                        position: absolute;
                        top: 132px;
                        left: 264px;
                    }
                    .polygon_6 {
                        position: absolute;
                        top: 264px;
                        left: 66px;
                    }
                    .polygon_7 {
                        position: absolute;
                        top: 132px;
                        left: 132px;
                    }
                    li {
                        cursor: pointer;
                        display: inline-block;
                        width: 132px;
                        height: 132px;
                        text-align: center;
                        line-height: 132px;
                        background: url(../images/baise@2x.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    li:hover {
                        background-position: 0 0;
                        background: url(../images/lanse@2x.png) no-repeat;
                        background-size: 100% 100%;
                        color: #fff;
                    }
                    .active {
                        background-position: 0 0;
                        background: url(../images/lanse@2x.png) no-repeat;
                        background-size: 100% 100%;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>

欢迎大佬来补充