2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-07 07:12:23 +03:00

Added features to non multiple selects

- added a single class to the selected-tag for non multiple selects
- added styling to the single selected-tag to differentiate it from the default
This commit is contained in:
Brandon Bey
2017-03-30 16:21:18 -07:00
parent 90981a5a7f
commit 5271ed7c70
+19 -1
View File
@@ -115,6 +115,14 @@
float: left;
line-height: 24px;
}
.v-select .selected-tag.single {
background-color: transparent;
border-color: transparent;
}
.v-select.open .selected-tag.single {
position: absolute;
opacity: 0.5;
}
.v-select .selected-tag .close {
float: none;
margin-right: 0;
@@ -254,7 +262,7 @@
<div class="dropdown v-select" :class="dropdownClasses">
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
<span class="selected-tag" :class="selectedTagClasses" v-for="option in valueAsArray" v-bind:key="option.index">
{{ getOptionLabel(option) }}
<button v-if="multiple" @click="deselect(option)" type="button" class="close">
<span aria-hidden="true">&times;</span>
@@ -769,6 +777,16 @@
}
},
/**
* Classes to be output on .selected-tag
* @return {Object}
*/
selectedTagClasses() {
return {
single: !this.multiple
}
},
/**
* Return the current state of the
* dropdown menu.