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

<template id="diy-func-list">
    <el-scrollbar style="height: 100%;">
        <!-- <div class="func-search">
            <el-input placeholder="搜索组件名称" prefix-icon="el-icon-search" v-model="search" :border="false"></el-input>
        </div> -->
        <el-collapse v-model="activeNames">
            <el-collapse-item :name="index" v-for="(item,index) in list" :key="index">
                <template slot="title">
                    <div class="activeNames">{{item.title}}</div>
                </template>
                <el-row>
                    <draggable :list="item.list" :sort="false" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" @end="onEnd">
                        <el-col :span="6" v-for="(item1,index1) in item.list" :key="index1">
                            <div class="func-list-item" @click="onClick(item1)">
                                <div class="grid-img">
                                    <el-image :src="tempalateStr.replace('template',item1.type)"></el-image>
                                </div>
                                <div class="grid-title">{{item1.title}}</div>
                            </div>
                        </el-col>
                    </draggable>
                </el-row>
            </el-collapse-item>
        </el-collapse>
        <el-scrollbar>
</template>
<script>
    Vue.component('diy-func-list', {
        name: "diy-func-list",
        template: '#diy-func-list',
        props: {
            list: {
                type: Array,
                default () {
                    return []
                }
            },
            testData: {
                type: Function
            }
        },
        data() {
            return {
                activeNames: [0, 1, 2],
                search: "",
                tempalateStr: "resources/img/decorate/func/template.png"
            }
        },
        methods: {
            cloneComponent(e) {
                this.dragItem = e
                return
            },
            onEnd(e) {
                if (e.to === e.from) return
                let newIndex = e.newIndex; // 改变索引
                let dragItem = this.dragItem;
                this.$emit('end', dragItem, newIndex)
            },
            onClick(item) {
                this.$emit("add-prev-item", item)
            }
        }
    });
</script>

<style scoped>
    .el-collapse-item__header {
        padding: 0 30px;
        background-color: #f7f7f7;
        border: none;
    }

    .el-collapse-item__wrap {
        border: none;
    }

    .el-collapse-item {
        margin-bottom: 10px;
    }

    .el-collapse-item__content {
        padding-bottom: 0px;
    }

    .func-list-item {
        width: 75px;
        height: 92px;
        overflow: hidden;
        margin: 0px auto 0;
        border-radius: 2px;
        text-align: center;
    }

    .grid-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 0px;
        margin: 6px auto;
        cursor: pointer;
    }

    .grid-img .el-image {
        line-height: 1;
    }

    .grid-title {
        font-size: 12px;
        font-family: PingFang SC;
        /*font-weight: 700;*/
        color: #333333;
    }

    .activeNames {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 0px;
        color: #666666;
    }

    .func-search .el-input__inner {
        border: none
    }
</style>