根据颜色来定义编辑框背景色

效果图

这里点击什么颜色下面编辑框就是什么背景色

定义两个颜色 ，data.js

export const cardColor=[
    'rgba(252,175,162,0.30)',
    'rgba(255,227,148,0.30)',
    'rgba(146,230,245,0.30)',
    'rgba(168,237,138,0.31)',
    'rgba(202,167,247,0.30)',
    'rgba(212,212,212,0.30)',

]
export const cardColor1=[
    'rgba(252,175,162,1)',
    'rgba(255,227,148,1)',
    'rgba(146,230,245,1)',
    'rgba(168,237,138,1)',
    'rgba(202,167,247,1)',
]

HTML代码

<template>
  <div class="new-card">
    <div class="colors">
        <p class="colorlist" :class="{coloractive:index==seleced}" v-for="(item,index) in cardColor1" :style="{background:item}" :key="index" @click="onSelece(index)"></p>
    </div>
    <div class="card-main" :style="{background:cardColor[seleced]}">
        <textarea maxlength="96" class="message" placeholder="留言。。。" ></textarea>
        <input class="name" type="text" placeholder="签名">
    </div>
  </div>
</template>

js代码

<script>
import {cardColor, cardColor1 } from '@/utils/data';
export default {
    data(){
        return {
            cardColor,
            cardColor1,
            seleced:0,
        }
    },
    props:{

    },
    methods:{
        // 切换颜色
        onSelece(index){
            this.seleced = index
        }
    }
}
</script>

CSS代码

<style lang="less" scoped>
.new-card{
    padding: 0px 20px;
    .colors{
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        .colorlist{
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
        .coloractive{
            border: 1px solid rgba(59,115,240,1);
        }
    }
    .card-main{
        width: 100%;
        height: 240px;
        // background: rgba(252,175,162,0.31);
        padding: 12px;
        box-sizing: border-box;
        .message{
            padding: 8px;
            box-sizing: border-box;
            width: 100%;
            background: none;
            border: none;
            resize: none;
            height: 172px;
            font-size: 15px;
        }
        .name{
            width: 100%;
            box-sizing: border-box;
            padding: 8px;
            background: none;
            border: 1px solid #fff;
            line-height: 20px;
            font-size: 15px;
        }
    }
}
</style>