VR_panorama/src/components/shared/Combox.vue

<template>
    <div class="com-combox ui-input" :class="{show:showPopup}" @click="show" v-clickoutside="hide">
        <div class="input">
            <p v-if="current">{{current.name}}</p>
        </div>
        <ul class="ui-input">
            <li
                v-for="(item,key) in data"
                :key="key"
                @click="onClick(item,key)"
                :class="{active:selectedIndex == key}"
            >
                <slot :item="item">
                    <template>
                        <span>{{item.name}}</span>
                    </template>
                </slot>
            </li>
        </ul>
        <a class="iconfont icon_pulldown"></a>
    </div>
</template>
<script>
export default {
    props: {
        data: Array,
        type: {
            type: String,
            default: "object"
        },
        selectedIndex: {
            type: Number,
            default:0
        }
    },
    data() {
        return {
            showPopup: false,
        };
    },
    computed: {
        current() {
            return this.data[this.selectedIndex];
        }
    },
    methods: {
        show() {
            if (this.showPopup === true) {
                this.showPopup = false;
                return;
            }
            this.showPopup = true;
        },
        hide() {
            this.showPopup = false;
        },
        onClick(item, index) {
            if (this.selectedIndex == index) {
                return this.$emit("click", item, index);
            }
            this.$emit("change", item, index);
        }
    }
};
</script>
<style lang="less" scoped>
.com-combox {
    cursor: pointer;
    position: relative;
    padding: 5px;
    &.show {
        ul {
            display: block;
        }

        a {
            transform: translateY(-50%) rotate(180deg);
        }
    }
    > div {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .input p {
        width: 100%;
        padding-right: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
    ul {
        display: none;
        padding: 0;
        position: absolute;
        left: -1px;
        right: -1px;
        top: 100%;
        width: auto;
        height: auto;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        overflow: hidden;
        background: #000;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
        z-index: 10000;

        li {
            padding: 5px;
            display: flex;
            height: 30px;
            align-items: center;
            &.active,
            &:hover {
                background: #272729;
                color: @color;
            }
        }
    }
    i {
        font-size: 22px;
        margin-top: 2px;
        margin-right: 5px;
        &.icon_logo {
            font-size: 17px;
            margin-top: 0;
            margin-left: 3px;
            margin-right: 7px;
        }
    }
    a {
        position: absolute;
        right: 5px;
        top: 50%;
        font-size: 16px;
        transform: translateY(-50%);
    }
}
</style>