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

<template id="diy-style-preview">
    <el-scrollbar class="dsp-contain">
        <diy-header :active-item="activeItem" @permis-change="permisChange" :all-permission="permission">
            <components :is="activeCompName" :active-item="activeItem" @update="update"></components>
        </diy-header>
    </el-scrollbar>
</template>
<script>
    Vue.component('diy-style-preview', {
        name: "diy-style-preview",
        template: '#diy-style-preview',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
            activeIndex: {
                type: Number,
                default () {
                    return 0
                }
            },
            permission: {
                type: Array,
                default () {
                    return []
                }
            },
        },
        computed: {
            activeCompName() {
                return this.getName(this.activeItem)
            }
        },
        data() {
            return {};
        },
        methods: {
            getName(target) {
                try {
                    return target ? target.funcListItem.type + "-style" : ""
                } catch (e) {
                    console.log(e);
                    return ""
                }
            },
            update(item) {
                this.$emit('update', item, this.activeIndex)
            },
            permisChange(arr) {
                this.activeItem.permission = arr
                this.$emit('update', this.activeItem)
            }
        }
    });
</script>
<style>
    .dsp-contain {
        position: relative;
        width: 467px;
        height: 100%;
        background: #FFFFFF;
    }
</style>