前言
大家好 我是歌谣 今天继续给大家带来平时工作生活中 会遇到的一些开发需求
今天要说的需求就是实现一个需求 在选中的时候按钮的样式会发生变化
思路
首先 遇到这样的需求 我们所需要做的就是要分析
先简单画出我们所需要的样式 这是我们设计需求的第一步
效果
实现点击的时候右侧的颜色选中会改变左侧的页面效果 这就是我们所需要的
页面部分
<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"]
运行