vue multiselect template slot clear 不起作用

Question

我从 async part of the documentation 复制了代码，因为那是 'X' 删除我想要的值。

这是我在其他 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>

一切都按预期工作，除了永远不会显示用于清除 selection 的 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 输入字段上方。还更改了开发控制台中的高度属性，刚刚在输入字段上方明确 space。

我错过了什么？

Answer 1

vue-multiselect 除了 render it before the input tags 之外，clear 插槽没有任何特殊之处。它将样式和 behavior/implementation 完全留给最终用户。

此外，您链接的文档中的示例未能很好地实现插槽，因为提供的插槽没有内容，因此 div 将不可见或不可点击，使其实际上无用。更不用说，它使用 Vue 的过时（pre-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>

demo

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);
}

vue multiselect template slot clear 不起作用

Vue multiselect template slot clear does not work

javascript

css

vue.js

vue-multiselect

解决方案