qimall/addons/DepositPresale/backend/views/default/components/style-components/diy-tabs.php

<template id="diy-tabs">
    <diy-style-contain :title="title">
        <div class="tabs-radios">
            <el-radio-group flex v-model="radioType" border @change="radioChange($event)">
                <el-radio-button flex="cross:center" class="radio-btn" flex v-for="(item, index) in list" :key="index" :label="item.value">
                    <span v-if="radio_text == 'text'">{{ item[name] }}</span>
                    <el-image :style="imgStyle" v-else-if="radio_text == 'image'" class="tabs-img" :src="item[name]"></el-image>
                    <slot v-else name="icons" :item="item"></slot>
                </el-radio-button>
            </el-radio-group>
            
            <div class="tabs-stroke" flex="cross:center" v-if="item.is_show">
                <span class="storke-title">描边颜色</span>
                <div class="storke-picker" flex="cross:center">
                    <el-color-picker flex="cross:center" v-model="item.color" @change="colorChange" :show-alpha="showAlpha"></el-color-picker>
                    <el-input class="storke-ipt" size="mini" v-model="item.color" placeholder="选择颜色" @focus="iptSelect($event)"></el-input>
                </div>
            </div>
        </div>
    </diy-style-contain>
</template>

<script>
    /**
     * 样式tab
     */
    Vue.component('diy-tabs', {
        name: "diy-tabs",
        props: {
            title: { // 头部标题
                type: String,
                default: '样式'
            },
            radio_text: { // text: 文字，image: 图片
                type: String,
                default: ''
            },
            name: { // 用来替换list的label属性
                type: String,
                default: 'label'
            },
            list: { // tabs数组
                type: Array,
                default: () => {
                    return [{
                            label: '默认',
                            value: 'default',
                            is_show: false,
                            color: '#DDDDDD'
                        },
                        {
                            label: '投影',
                            value: 'shandow',
                            is_show: false,
                            color: '#DDDDDD'
                        },
                        {
                            label: '描边',
                            value: 'border',
                            is_show: true,
                            color: '#DDDDDD'
                        },
                    ]
                }
            },
            default_item: {
                type: Object,
                default: () => null
            },
            showAlpha: {
                type: Boolean,
                default: false
            },
            imgStyle: {
                type: Object,
                default: () => {}
            }
        },
        template: '#diy-tabs',
        data() {
            return {
                radioType: '',
                radio_index: 0,
                item:{}
            }
        },
        watch: {
            
        },
        mounted() {
            this.tabInit()
        },
        methods: {
            tabInit() {
                if (this.default_item) {
                    this.item = this.default_item
                } else {
                    this.item = this.list[0]
                }
                this.radioType = this.item.value
            },
            onChange(data){
                this.$emit('change', data)
            },
            radioChange(e) { // 切换
                let index = this.list.findIndex(it => it.value == e)
                this.radioType = e
                this.item = this.list[index]
                this.onChange({
                    item: this.item,
                    index
                })
            },
            colorChange(e) {
                let index = this.list.findIndex(it => it.value == this.item.value)
                this.onChange({
                    item: this.item,
                    index
                })
            },
            iptSelect(e) {
                e.currentTarget.select();
            }
        }
    });
</script>

<style>
    .tabs-title {
        color: var(--textGray, #999999);
        padding-bottom: 20px;
        font-size: 14px;
        font-weight: 700;
    }

    .tabs-radios .radio-btn {
        flex: 1;
    }

    .tabs-radios .radio-btn .el-radio-button__inner {
        display: block;
        flex: 1;
    }

    .tabs-radios .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: transparent;
        color: var(--diy-theme);
    }

    .tabs-img {
        width: 30px;
        height: 25px;
    }

    /* 描边颜色 */
    .tabs-stroke {
        height: 54px;
        border: 1px solid rgba(112, 112, 112, 0.2);
        padding: 0 10px;
        margin-top: 10px;
    }

    .storke-title {
        font-size: 14px;
        color: var(--textGray, #999999);
        font-weight: 700;
        padding-right: 27px;
    }

    .storke-picker .el-color-picker__trigger {
        width: 64px;
        height: 30px;
    }

    .storke-picker .el-color-picker__icon,
    .storke-picker .el-color-picker__empty {
        display: none;
    }

    .storke-ipt {
        width: 90px;
        margin-left: 100px;

    }

    .storke-picker .el-input__inner {
        color: var(--textGray, #999999);
    }
</style>