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

<template id="diy-size-setting">
    <diy-style-contain :title="topName" :show-title="containObj.showTitle">
        <div class="color-info" v-for="(item,index) in newsizeInfos" :key="index" v-show="!item.hidden">
            <div class="diy-name">{{item.name}}</div>
            <div class="sel-size">
                <el-slider :min="minValue" :max="item.maxValue" :disabled="item.disabled" v-model="item.value" @change="updateSize"></el-slider>
            </div>
            <div class="diy-text-btn">{{item.value + item.unit}}</div>
        </div>
    </diy-style-contain>
</template>

<script>
    /**
     * 颜色组件
     *
     */
    Vue.component('diy-size-setting', {
        template: '#diy-size-setting',
        name: 'diy-size-setting',
        props: {
            containObj: {
                type: Object,
                default: () => ({
                    showTitle: true
                })
            },
            topName: { //头部标题
                type: String,
                default: "大小设置",
            },
            minValue: { //最小值
                type: [String,Number],
                default: 0,
            },
            maxValue: { //最大值
                type: [String,Number],
                default: 100,
            },
            defUnit: {
                type: String,
                default: "px",
            },
            disabledArr: { //禁用的下标
                type: Array,
                default: () => []
            },
            strMaxSizeVal: { //如果sizeInfos刚开始是字符串，可以给改对象添加最大值,优先级比maxValue高
                type: Array,
                default: () => {
                    return []
                }
            },
            /**
                值可以是字符串或者对象
                对象格式：{
                    name: "", //名字
                    value: 0, //值
                    unit: "px", //单位
                    disabled: false,//是否禁用
                    maxValue: maxValue, //最大值
                    hidden: false, //是否隐藏
                }
                字符串：传个名字
                注：返回出去是一个对象数组
             */
            sizeInfos: {
                type: Array,
                default: () => []
            },
            /**
                给sizeInfos值为字符串添加值

             */
            sizeInfosValue: {
                type: Array,
                default: () => []
            },
            sizeInfosMax: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                newsizeInfos: [],
            }
        },
        created() {
            
        },
        watch: {
            sizeInfos: {
                deep:true,
                immediate: true,
				handler(val) {
                    let that = this;
                    this.newsizeInfos = [];
                    if(this.sizeInfos.length > 0 && typeof this.sizeInfos[0] == 'string'){
                        that.sizeInfos.forEach((v,index) => {
                            let boo = that.disabledArr.indexOf(index) != -1?true:false;
                            let defValue = that.sizeInfosValue.length > 0 && that.sizeInfosValue[index]? that.sizeInfosValue[index]:this.minValue;
                            let max = that.sizeInfosMax.length > 0 && that.sizeInfosMax[index]? that.sizeInfosMax[index]:that.maxValue;
                            if(that.strMaxSizeVal.length > 0 && that.strMaxSizeVal[index]){
                                max = that.strMaxSizeVal[index];
                            }
                            let obj = {
                                name: v, 
                                value: defValue, 
                                unit: that.defUnit, 
                                disabled: boo,
                                maxValue:max,
                                hidden: false,
                            }
                            that.newsizeInfos.push(obj);
                        })
                        this.updateSize();
                    } else {
                        this.newsizeInfos = val;
                    }
                }
            }
        },
        methods:{
            updateSize(){
                this.$emit("chang",this.newsizeInfos);
            },
        }
    });
</script>

<style scoped>
    .color-info{
        margin-top: 20px;
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        display: flex;
        align-items: center;
    }
    .sel-size{
        margin-right: 12px;
        width: 153px;
        height: 30px;
    }
    .el-color-picker .el-color-picker__trigger{
        width: 65px;
        height: 30px;
    }

    .diy-text-btn{
        text-align: center;
    }
</style>