vue-poster-editor/lib/widgets/editor-select-picker.html

A poster editor based on Vue.js

<div class="editor-select-picker" :class="{active:active}">
    <div class="label" @click="toggleActive()">
        <span>{{currItem ? (currItem.alias || currItem.name || currItem) : ' - '}}</span>
    </div>
    <div
        class="editor-popup editor-popup-list editor-popup-ne"
        :style="{bottom: pushUp ? '0' : ''}"
        v-if="active"
    >
        <div class="list" ref='list' :style="{maxHeight: listMaxHeight}">
            <ul>
                <li
                    v-for="(item, idx) in items"
                    :class="{current: isEqual(item, idx)}"
                    :data-key="item ? (item.name || item) : ''"
                    :data-class="item.class || ''"
                    @click="set(item)"
                >
                    <span v-if="!item || !item.preview" class="intro">{{item ? (item.alias || item.name || item) : ''}}</span>
                    <span v-if="item && item.preview" class="preview"><img :src="item.preview.url" :alt="item.name"></span>
                </li>
            </ul>
        </div>
    </div>
</div>