Copié el código de la parte asíncrona de la documentación , porque esa es la 'X' para eliminar el valor que quiero.
aquí está mi componente general que uso en otros componentes de vue
<template> <div> <multiselect v-model="items" :options="filteredList" :multiple="multiple" :close-on-select="multiple ? false : true" :show-labels="false" :placeholder="placeholder" track-by="id" :label="label" @input="inputChanged" :internal-search="false" @search-change="searchItems" > <template slot="clear" slot-scope="props"> <div class="multiselect__clear" v-if="items.length" @mousedown.prevent.stop="clearAll(props.search)"></div> </template> </multiselect> </div> </template> <script> export default { model: { prop: 'parentItems', event: 'change', }, props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'], data() { return { items: this.parentItems, filteredList: this.list, } }, methods: { searchItems(query) { let q = latinize(query.toLowerCase().replace(/\s/g,'')) this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q)) }, inputChanged() { this.$emit('change', this.items); }, clearAll() { this.items = this.multiple ? [] : null }, }, } </script>todo funciona como se desea, excepto que nunca se muestra la X para borrar la selección.
encontré el elemento clear en la consola, tiene un ancho de 255 y una altura de 0. Traté de poner una X entre las etiquetas div, así
<template slot="clear" slot-scope="props"> <div class="multiselect__clear" v-if="items.length" @mousedown.prevent.stop="clearAll(props.search)" > X </div> </template>pero se mostraría encima del campo de entrada de selección. También cambiar el atributo de altura en la consola de desarrollo acaba de dejar espacio libre sobre el campo de entrada.
¿Qué me estoy perdiendo?
vue-multiselect no hace nada especial con la ranura clear aparte de mostrarla antes de las etiquetas de entrada . Deja el estilo y el comportamiento/implementación totalmente en manos del usuario final.
Además, el ejemplo de los documentos que vinculó implementa de manera deficiente la ranura, ya que la ranura provista no tiene contenido, por lo que el div no será visible ni se podrá hacer clic en él, lo que lo hará efectivamente inútil. Sin mencionar que utiliza la sintaxis de ranura obsoleta (pre-2.6) de Vue, lo que generaría advertencias en la consola del navegador si se utiliza la versión de desarrollo de Vue.
La ranura clear debería verse así:
<multiselect v-model="value" :options="options" multiple taggable @tag="addTag"> <template v-slot:clear> <button v-if="value.length" class="multiselect__clear" @click="clearSelectedTags"> Ⓧ Clear selection </button> </template> </multiselect>Gracias a tony19 fui e inspeccioné la parte de la documentación que mencioné en la pregunta.
Descubrí que usan un código diferente para el ejemplo, por lo que para lograr el efecto deseado, necesito agregar el siguiente código a mi css.
.multiselect__clear { position: absolute; right: 41px; height: 40px; width: 40px; display: block; cursor: pointer; /*z-index: 2;*/ } .multiselect__clear:after, .multiselect__clear:before { content: ""; display: block; position: absolute; width: 3px; height: 16px; background: #aaa; top: 12px; right: 4px; cursor: pointer; } .multiselect__clear:before { transform: rotate(45deg); } .multiselect__clear:after { transform: rotate(-45deg); }