前端:每天一个工作小技巧 如何实现一个前端的选中效果(Vue3 + Element ui)

前言

大家好 我是歌谣 今天继续给大家带来平时工作生活中 会遇到的一些开发需求 
今天要说的需求就是实现一个需求 在选中的时候按钮的样式会发生变化

思路

 

首先 遇到这样的需求 我们所需要做的就是要分析 
先简单画出我们所需要的样式 这是我们设计需求的第一步

效果

实现点击的时候右侧的颜色选中会改变左侧的页面效果 这就是我们所需要的

页面部分

<template>
    <div  class="GeyaoColor">
        <div class="GeyaoColorContent">
            <div :style="`color:${activeColor}`"  class="GeyaoColorLeft">前端小歌谣</div>
            <div class="GeyaoColorMiddle"></div>
            <div class="GeyaoColorRight">
                <div :style="`background-color:${item}`"  :span="6" v-for="(item, index) in defaultValueColor" @click="handleColor(item)"
                    :class="`${item === activeColor? 'GeyaoColorActive' : 'GeyaoColorTag'} `">
                </div>
            </div>
        </div>
    </div>
</template>

逻辑部分

<script setup>
import { ref, defineProps,defineEmits,defineExpose,watch} from "vue"
const props = defineProps({
    modelValue: {
        type: String,
        required: ()=>''
    },
    defaultColor: {
        type: Array,
        default: () => []
    },
})
const defaultValueColor = ref(props?.defaultColor)
const emit = defineEmits(['update:modelValue'])
const activeColor = ref(props?.modelValue)
const handleColor = (item) => {
    activeColor.value = item
}


defineExpose({
    activeColor
})
</script>

样式部分

<style lang="scss" scoped>
.GeyaoColor {
    width: 417px;
    height: 112px;
    background: #FAFAFA;
    border-radius: 8px 8px 8px 8px;


    .GeyaoColorContent {
        display: flex;
        align-items: center;




        .GeyaoColorLeft {
            width: 241px;
            height: 64px;
            line-height: 64px;
            border-radius: 0px 0px 0px 0px;
            margin-top: 28px;
            display: flex;
            justify-content: center;


        }


        .GeyaoColorMiddle {
            width: 1px;
            height: 64px;
            border: 1px solid #E6E9F0;
            margin-top: 28px;
        }


        .GeyaoColorRight {
            width: 176px;
            height: 56px;
            border-radius: 0px 0px 0px 0px;
            margin-top: 28px;
            display: flex;
            flex-wrap: wrap;


            .GeyaoColorTag {
                width: 20px;
                height: 20px;
                margin: 0 0 0 16px;
                border-radius: 4px 4px 4px 4px;
            }


            .GeyaoColorActive {
                width: 28px;
                height: 28px;
                margin: 0 0 0 16px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #246AE3;
            }
        }
    }
}
</style>

子组件

<template>
    <div  class="GeyaoColor">
        <div class="GeyaoColorContent">
            <div :style="`color:${activeColor}`"  class="GeyaoColorLeft">前端小歌谣</div>
            <div class="GeyaoColorMiddle"></div>
            <div class="GeyaoColorRight">
                <div :style="`background-color:${item}`"  :span="6" v-for="(item, index) in defaultValueColor" @click="handleColor(item)"
                    :class="`${item === activeColor? 'GeyaoColorActive' : 'GeyaoColorTag'} `">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, defineProps,defineEmits,defineExpose,watch} from "vue"
const props = defineProps({
    modelValue: {
        type: String,
        required: ()=>''
    },
    defaultColor: {
        type: Array,
        default: () => []
    },
})
const defaultValueColor = ref(props?.defaultColor)
const emit = defineEmits(['update:modelValue'])
const activeColor = ref(props?.modelValue)
const handleColor = (item) => {
    activeColor.value = item
}


defineExpose({
    activeColor
})
</script>
<style lang="scss" scoped>
.GeyaoColor {
    width: 417px;
    height: 112px;
    background: #FAFAFA;
    border-radius: 8px 8px 8px 8px;


    .GeyaoColorContent {
        display: flex;
        align-items: center;




        .GeyaoColorLeft {
            width: 241px;
            height: 64px;
            line-height: 64px;
            border-radius: 0px 0px 0px 0px;
            margin-top: 28px;
            display: flex;
            justify-content: center;


        }


        .GeyaoColorMiddle {
            width: 1px;
            height: 64px;
            border: 1px solid #E6E9F0;
            margin-top: 28px;
        }


        .GeyaoColorRight {
            width: 176px;
            height: 56px;
            border-radius: 0px 0px 0px 0px;
            margin-top: 28px;
            display: flex;
            flex-wrap: wrap;


            .GeyaoColorTag {
                width: 20px;
                height: 20px;
                margin: 0 0 0 16px;
                border-radius: 4px 4px 4px 4px;
            }


            .GeyaoColorActive {
                width: 28px;
                height: 28px;
                margin: 0 0 0 16px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #246AE3;
            }
        }
    }
}
</style>

父组件

<SelectTag :defaultColor="defaultValue"></SelectTag>

const defaultValue = ["#FFB6D1", "#DC163C", "#87CEFA", 
"#40E0D0", "#FFD700", "#FF4500", "#A9A9A9", "#FFE4E1"]

运行