2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00

Add a higher level slot to labels so they can be customized completely

This commit is contained in:
Thom Hurks
2017-10-23 22:16:41 +02:00
parent f836eaeb6a
commit cbdc5982fd
+11 -8
View File
@@ -282,14 +282,17 @@
<div :dir="dir" class="dropdown v-select" :class="dropdownClasses"> <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
<div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix', {'disabled': disabled}]"> <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix', {'disabled': disabled}]">
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index"> <slot v-for="option in valueAsArray" name="selected-option-container"
<slot name="selected-option" v-bind="option"> :option="option" :deselect="deselect">
{{ getOptionLabel(option) }} <span class="selected-tag" v-bind:key="option.index">
</slot> <slot name="selected-option" v-bind="option">
<button v-if="multiple" @click="deselect(option)" type="button" class="close" aria-label="Remove option"> {{ getOptionLabel(option) }}
<span aria-hidden="true">&times;</span> </slot>
</button> <button v-if="multiple" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
</span> <span aria-hidden="true">&times;</span>
</button>
</span>
</slot>
<input <input
ref="search" ref="search"