VUE3 实现点击图片高亮 实现布局切换功能

具体效果如下图

实现方式VUE3+TS

实现效果：点击任意一个布局按钮  按钮高亮  其他按钮取消高亮  上面呈现不同布局（图中布局实现方式为float浮动布局）

实现思路：

相当于一共有八个布局的按钮  ， 所以整体布局一共分为8类；

因为当前大模块中需要展示的布局只有一个；

所以按照基础思路：

要提前设置好两个数组，一个为当前展示的数组 ，一个为储备的8中种类型数组；

当点击时获取当前的类型按钮时，判断按钮类别为哪个，然后根据类别type去判断储备数组中type值相同的数组，并将其赋值给当前展示的数组中，实现布局联动效果。

实现代码

vue代码实现

//对应上面盒子的方式
<div
            class="camerabox" //最外层盒子
            :style="{ width: videoList.parentW, height: videoList.parentH }" //最外层盒子动态绑定父盒子的宽高
        >
            <div
                v-for="(item, index) in videoList.list" //循环当前默认展示的数组
                :key="index"
                :style="{ float: videoList.float }" //绑定样式布局方式 因为有左浮动方式和右浮动方式
                :width="item.width"//当前类型中每个小盒子的宽度
                :height="item.height"//当前类型中每个小盒子的高度
             
            >
         
            </div>
        </div>


//右下角按钮 点击出现弹窗的功能
     <div class="bom-right">
                <div class="icon1" @click="changeState"></div>  //点击出发changeState函数 ，展示下方弹框
     </div>

//弹窗布局
   <div v-if="state" class="alertbox" @mouseleave="state = false"> //根据v-if判断是否展示弹窗   
            <div
                v-for="(item, index) in typeboxs"
                :key="index"
                class="type"
                :style="{
                    background: 'center right no-repeat url(' + item.icon + ')',
                }"
                @click="changeType(item.type)" //点击 改变type类型 向函数中传入type值
            >
                <!-- {
  { item.icon }} -->
            </div>
        </div>

基本数据储备

//
<script setup  lang="ts">
//点击状态改变  打开弹窗 
let state = ref<boolean>(false);
function changeState() {
    state.value = !state.value;
}

//八种类型盒子

interface Typeboxs {
    icon: string;
}

const typeboxs: any = reactive([
    {
        icon: black9,//常规默认图片
        normal: black9,//移出变为正常图片
        high: sun9,//点击高亮图片
        type: '1',//当前类型为1
    },
    {
        icon: balck6left,
        normal: balck6left,
        high: sun6left,
        type: '2',
    },
    {
        icon: balck4,
        normal: balck4,
        high: sun4,
        type: '3',
    },
    {
        icon: balck1,
        normal: sun1,
        high: balck1,
        type: '4',
    },
    {
        icon: balck6right,
        normal: balck6right,
        high: sun6right,
        type: '5',
    },
    {
        icon: balck4,
        normal: balck4,
        high: sun4,
        type: '6',
    },
    {
        icon: balck6right,
        normal: balck6right,
        high: sun6right,
        type: '7',
    },
    {
        icon: black9,
        normal: black9,
        high: sun9,
        type: '8',
    },
]);


//数组
interface Radios {//ts定义接口数据
    type: string;//点击类型
    list: any[];//类别数组