qimall/backend/modules/mall/views/goods/component/com-specs-values-select.php

<template id="com-specs-values-select">
    <div class="specs-select" v-if="isShow()">
        <span class="el-dropdown-link-specs" @click="showSelect">
            选择已有规格<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-collapse-transition>
            <ul class="down-select" v-if="downSelectShow">
                <li class="el-dropdown-menu__item" v-for="item in specs.values" @click="useSpecsValue(item)">{{ item }}</li>
            </ul>
        </el-collapse-transition>
    </div>
</template>
<script>

Vue.component('com-specs-values-select', {
    template: '#com-specs-values-select',
    props: {
        specs: {
            type: Object,
            default: () => {
                return {}
            }
        },
        index: 0,
        show: Boolean,
    },
    data() {
        return {
            downSelectShow: false,
        }
    },
    methods: {
        isShow() {
            return JSON.stringify(this.specs) != '{}'
        },

        showSelect() {
            this.downSelectShow = !this.downSelectShow
        },

        useSpecsValue(item) {
            this.$emit('use-specs-value', item, this.index)
        }
    }
})
</script>
<style>
    .specs-select {
        margin-right: 16px;
    }

    .el-dropdown-link-specs {
        cursor: pointer;
        color: #409EFF;
        font-size: 12px;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    
    .down-select {
        position: absolute;
        /* top: 0; */
        /* left: 0; */
        z-index: 10;
        padding: 10px 0;
        margin: 5px 0;
        background-color: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
</style>