Vue多选模板槽清除不工作

Question

我从文档的async部分复制了代码，因为这是'X'来删除我想要的值。

这是我在其他value组件中使用的通用组件

<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>

一切都能正常工作，除了不显示用于清除选择的X。

我在控制台找到clear元素，它的宽度为255，高度为0。我试着把X放在div标签之间，像这样

<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="items.length" 
@mousedown.prevent.stop="clearAll(props.search)"
>
X
</div>
</template>

但是它会显示在select input字段的上方。也改变了开发控制台的高度属性，使输入字段上方的空间变得清晰。

我错过了什么?

Answer 1

vue-multiselect对clear插槽没有任何特殊的作用，只是在输入标签之前呈现它。它将样式和行为/实现完全留给最终用户。

此外，您链接的文档中的示例很差地实现了插槽，因为提供的插槽没有内容，因此div将不可见或不可点击，使其实际上无用。更不用说，它使用了Vue过时的(2.6之前的)插槽语法，如果使用Vue的开发版本，这会在浏览器控制台上引起警告。

解决方案clear插槽应该是这样的:

<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>

演示

Answer 2

感谢tony19，我去检查了我在问题中提到的那部分文档。

我发现他们在示例中使用了不同的代码，因此为了达到预期的效果，我需要将以下代码添加到我的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);
}