noob-components/packages/tool/color.vue

<template>
    <h2>{{ t('tool.colorCpar') }}</h2>
    <div class="color-item" v-for="(item, i) in colors" :key="i">
        <div>{{ t('base.color') + (i + 1) }}</div>
        <NoobInput :width="120" v-model="colors[i]" />
        <div :class="['color-view', 'c' + i]"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { NoobInput } from 'noob-mengyxu';
import { useI18n } from "vue3-i18n";
import { useStore } from "vuex";
const { t } = useI18n();
const { state } = useStore();
const colors = reactive(new Array(10));

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.color-item {
    width: 150px;
    height: 150px;
    float: left;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
}

.color-view {
    width: 100%;
    height: 100px;

    &.c0 {
        background-color: v-bind('"#" + colors[0]');
    }

    &.c1 {
        background-color: v-bind('"#" + colors[1]');
    }

    &.c2 {
        background-color: v-bind('"#" + colors[2]');
    }

    &.c3 {
        background-color: v-bind('"#" + colors[3]');
    }

    &.c4 {
        background-color: v-bind('"#" + colors[4]');
    }

    &.c5 {
        background-color: v-bind('"#" + colors[5]');
    }

    &.c6 {
        background-color: v-bind('"#" + colors[6]');
    }

    &.c7 {
        background-color: v-bind('"#" + colors[7]');
    }

    &.c8 {
        background-color: v-bind('"#" + colors[8]');
    }

    &.c9 {
        background-color: v-bind('"#" + colors[9]');
    }
}
</style>