qimall/backend/views/components/common/storeDiy/style-components/diy-operation-list.php

<template id="diy-operation-list">
    <div>
        <div v-for="(item,index) in value" :key="index" class="diy-operation-item">
            <!-- 动态插槽 -->
            <div :style="gutterStyle">
                <div v-if="item.slot">
                    <slot :name="item.slot" :item="item" :index="index"></slot>
                </div>
                <!-- 默认类型start -->
                <!-- input -->
                <div v-else-if="item.type === 'textarea'" class="item-row ">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <el-input class="flex-1" type="textarea" v-model="item.value" @input="colorInput($event,index)" :placeholder="item.placeholder" :maxlength="item.max" :show-word-limit="item.showLimit"></el-input>
                </div>
                <!-- input -->
                <div v-else-if="item.type === 'input'" class="item-row diy-operation-input">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <el-input class="diy-input" v-model="item.value" @input="colorInput($event,index)" :placeholder="item.placeholder" :maxlength="item.max" :show-word-limit="item.showLimit"></el-input>
                </div>
                <!-- color -->
                <div v-else-if="item.type === 'color'" class="item-row diy-operation-color">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <el-color-picker color-format="colorFormat" :show-alpha="item.showAlpha" v-model="item.value" @change="updateColor($event,index)" :predefine="item.predefineColors || []"></el-color-picker>
                    <el-input class="diy-color-input" v-model="item.value" @input="colorInput($event,index)" maxlength="10"></el-input>
                </div>
                <!-- 尺寸大小 -->
                <div v-else-if="item.type === 'size'" class="item-row diy-operation-size">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <div style="padding-left: 2px;">
                        <el-slider :min="getRange(item,'minValue')" :max="getRange(item,'maxValue')" :disabled="item.disabled" v-model="item.value" @change="updateSize"></el-slider>
                    </div>
                    <div class="diy-text-btn">{{ getSizeText(item) }}</div>
                </div>
                <!-- 单选 -->
                <div v-else-if="item.type === 'radio'" class="item-row diy-operation-radio">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <el-radio-group class="flex-1" v-model="item.value" @change="onChange">
                        <el-radio :label="childItem.label" v-for="(childItem, j) in item.list" :key="j"> {{ childItem.value }}</el-radio>
                    </el-radio-group>
                </div>
                <!-- 多选 -->
                <div v-else-if="item.type === 'checkbox'" class="item-row diy-operation-checkbox">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <el-checkbox-group class="flex-1" v-model="item.value" @change="onChange">
                        <el-checkbox :label="childItem.label" v-for="(childItem, j) in item.list" :key="j"> {{ childItem.value }}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <!-- 上传图片 - 只能单个 - 待优化 -->
                <div v-else-if="item.type === 'image'" class="diy-operation-image">
                    <div class="diy-operation-name" :style="labelStyle(item)" v-if="item.isShowLabel !== false">{{ item.label }}</div>
                    <div>
                        <com-attachment :multiple="false" :max="1" @selected="selecImg($event, item)">
                            <div class="card-upload img-upload-bor" :style="videoComputed" v-if="!item.value">
                                <i class="el-icon-plus icon-plugs-center"></i>
                            </div>
                            <div class="diy-sty-img" v-else @mouseover="mouseOverImg(item)" @mouseleave="mouseLeaveImg(item)" :style="videoComputed">
                                <el-image :style="videoComputed" :src="item.value"></el-image>
                                <div class="diy-upd-img" v-show="item.showIcon">替换</div>
                                <i class="el-icon-close diy-upd-icon" @click.stop="delImg(item)" v-show="item.showIcon"></i>
                            </div>
							<slot name="tips"></slot>
                        </com-attachment>
                    </div>
                </div>
                <!-- 默认类型end -->
            </div>
        </div>
    </div>
</template>
<script>
    // test data
    /**
     * [{
                    type: "color",
                    label: "哈哈哈",
                    value: ""
                }, {
                    type: "size",
                    label: "哈哈哈",
                    value: 0
                }, {
                    type: "radio",
                    label: "哈哈哈",
                    value: 0,
                    list: [{
                        label: 0,
                        value: "男"
                    }, {
                        label: 1,
                        value: "女"
                    }]
                }, {
                    type: "checkbox",
                    label: "哈哈哈",
                    value: [],
                    list: [{
                        label: 0,
                        value: "男"
                    }, {
                        label: 1,
                        value: "女"
                    }]
                }]
     */
    Vue.component('diy-operation-list', {
        template: '#diy-operation-list',
        name: 'diy-operation-list',
        props: {
            value: {
                type: Array,
                default () {
                    return []
                }
            },
            // 提示文字width
            labelWidth: {
                type: String | Number,
                default () {
                    return 70
                }
            },
            // 提示文字
            labelAlign: {
                type: String,
                default: 'end'
            },
            // 总的size最小值
            minValue: {
                type: String | Number,
                default () {
                    return 0
                }
            },
            // 总的size最大值
            maxValue: {
                type: String | Number,
                default () {
                    return 100
                }
            },
            gutter: {
                type: String | Number,
                default () {
                    return 0
                }
            },
        },
        data() {
            return {}
        },
        computed: {
            videoComputed() {
                return {
                    width: `60px`,
                    height: `60px`
                }
            },
            gutterStyle() {
                return {
                    margin: `${this.gutter}px ${0}`
                }
            }
        },
        methods: {
            onChange() {
                this.$nextTick(() => {
                    var list = deepClone(this.value)
                    this.$emit("on-change", list);
                })
            },
            // 颜色
            updateColor() {
                this.onChange()
            },
            colorInput() {
                console.log('颜色',this.value)
                this.onChange()
            },
            // size
            getSizeText(item) {
                var unit = item.unit ? item.unit : "px";
                return `${item.value}${unit}`
            },
            getRange(item, type) {
                if (item[type]) {
                    return item[type]
                } else {
                    this[type]
                }
            },
            updateSize() {
                this.onChange()
            },
            // 图片
            selecImg(event, item) {
                item.value = event[0].url
                this.onChange()
            },
            mouseOverImg(item) {
                this.$set(item, "showIcon", true)
            },
            mouseLeaveImg(item) {
                this.$set(item, "showIcon", false)
            },
            delImg(item) {
                item.value = "";
                this.onChange()
            },
            // label样式 
            labelStyle(item) {
                var labelWidth = item.labelWidth ? item.labelWidth : this.labelWidth
                var labelAlign = item.labelAlign ? item.labelAlign : this.labelAlign
                return {
                    width: `${labelWidth}px`,
                    'text-align': labelAlign
                }
            },
        }
    });
</script>
<style scoped>
    .item-row {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .diy-operation-image {
        display: flex;
        align-items: center;
    }

    .diy-operation-input .diy-input {
        flex: 1;
        height: 30px;
    }

    .diy-operation-input .el-input__inner {
        height: 100%;
    }

    .flex-1 {
        flex: 1;
    }

    /* .diy-operation-color,
    .diy-operation-size,
    .diy-operation-radio,
    .diy-operation-checkbox {} */

    .diy-operation-name {
        margin-right: 15px;
        text-align: end;
        color: #999999;
    }

    .diy-color-input {
        width: 74px;
        background: #F4F3F7;
        border-radius: 3px;
        font-size: 14px;
        color: #666666;
        text-align: center;
        margin-left: 15px;
        height: 28px;
    }

    .diy-color-input .el-input__inner {
        height: 100%;
        padding: 0 6px;
    }

    .diy-operation-color .el-color-picker {
        height: 30px;
    }

    .diy-operation-size .el-slider {
        width: 153px;
        margin-right: 15px;
    }
</style>