<!-- 功能：功能描述; 作者：LZJ; 时间：2022年10月12日 09:57:38-->
<template>
    <div id="ColorTest" class="pd20">
        <el-tabs type="border-card">
            <el-tab-pane label="字体颜色">
                <code>
                    <div class="flex-wrap">
                        <div v-for="(item, index) in colorArr" :key="index" class="c-box flex-column-center br8 mr8 mb12" :style="{backgroundColor: `${item.value}`}" @click="handleCopy(item.key)">
                            <span :class="item.color">{{ item.title || '文字颜色' }}</span>
                            <p class="ft16 fw-500" :class="item.color">{{ item.key }}</p>
                        </div>
                    </div>

                </code>
            </el-tab-pane>
            <el-tab-pane label="背景颜色">
                <code>
                    <div class="flex-wrap">
                        <div v-for="(item, index) in bgcArr" :key="`bgc-${index}`" class="c-box flex-column-center br8 mr8 mb12" :class="item.key" @click="handleCopy(item.key)">
                            <span :class="item.color">{{ item.title || '背景颜色' }}</span>
                            <p class="ft16 fw-500" :class="item.color">{{ item.key }}</p>
                        </div>
                    </div>
                </code>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    // 组件名称
    name: 'ColorTest',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            colorArr: [
                {
                    key: 'c-1677ff', // 文字标题
                    value: '#fff', // 背景色
                    color: 'c-1677ff' // 文字颜色
                },
                {
                    key: 'c-fff',
                    value: '#303133',
                    color: 'c-fff'
                },
                {
                    key: 'c-f56c6c',
                    value: '#fff',
                    color: 'c-f56c6c'
                },
                {
                    key: 'c-e6a23c',
                    value: '#fff',
                    color: 'c-e6a23c'
                },
                {
                    key: 'c-67c23a',
                    value: '#fff',
                    color: 'c-67c23a'
                },
                {
                    key: 'c-303133',
                    value: '#fff',
                    color: 'c-303133'
                },
                {
                    key: 'c-606266',
                    value: '#fff',
                    color: 'c-606266'
                },
                {
                    key: 'c-909399',
                    value: '#fff',
                    color: 'c-909399'
                },
                {
                    key: 'c-c0c4cc',
                    value: '#fff',
                    color: 'c-c0c4cc'
                },
                {
                    key: 'c-dcdfe6',
                    value: '#fff',
                    color: 'c-dcdfe6'
                },
                {
                    title: '主题色',
                    key: 'c-theme',
                    value: '#fff',
                    color: 'c-theme'
                },
                {
                    title: '主题透明度为30%',
                    key: 'c-theme-30',
                    value: '#fff',
                    color: 'c-theme-30'
                },
                {
                    title: '主题透明度为5%',
                    key: 'c-theme-5',
                    value: '#fff',
                    color: 'c-theme-5'
                }
            ],
            bgcArr: [
                {
                    key: 'bgc-fff', // 文字
                    color: 'c-303133' // 文字颜色
                },
                {
                    key: 'bgc-f8fafb',
                    color: 'c-303133'
                },
                {
                    key: 'bgc-f5f5f5',
                    color: 'c-303133'
                },
                {
                    key: 'bgc-f2f6fc',
                    color: 'c-303133'
                },
                {
                    key: 'bgc-f7f8fa',
                    color: 'c-303133'
                },
                {
                    key: 'bgc-1677ff',
                    color: 'c-fff'
                },
                {
                    key: 'bgc-67c23a',
                    color: 'c-fff'
                },
                {
                    key: 'bgc-e6a23c',
                    color: 'c-fff'
                },
                {
                    key: 'bgc-f56c6c',
                    color: 'c-fff'
                },
                {
                    key: 'bgc-909399',
                    color: 'c-fff'
                },
                {
                    title: '主题背景色',
                    key: 'bgc-theme',
                    color: 'c-fff'
                },
                {
                    title: '透明度为30%的背景色',
                    key: 'bgc-theme-30',
                    color: 'c-303133'
                },
                {
                    title: '透明度为10%的背景色',
                    key: 'bgc-theme-10',
                    color: 'c-303133'
                },
                {
                    title: '透明度为5%的背景色',
                    key: 'bgc-theme-5',
                    color: 'c-303133'
                }
            ]
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        handleCopy(value) {
            this.$copyText(value)
                .then(() => {
                    this.$message('已成功复制，可直接去粘贴');
                })
                .catch(() => {
                    this.$message('复制失败');
                });
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#ColorTest {
    .c-box {
        width: 150px;
        height: 60px;
        border: 1px solid #DCDFE6;
    }
}
</style>
