VueJS 多选更改所有选择的默认值

Question

我正在使用 vue-multiselect.js (https://vue-multiselect.js.org/)。

Atm 我需要将所有文本翻译成德语。 Atm 我在 multiselect

里面用海关做这件事

<multiselect id="account-selected" @input="selectParent" v-model="account.parent_account" placeholder="Tippen um Suche zu starten" :multiple="false" ... :options="optionsParents">
            <span slot="noResult">Suche ergab keine Treffer</span>
            <span slot="noOptions">Keine Optionen</span>
          </multiselect>

它工作正常，但我经常使用这些多选。所以维护起来很痛苦。我需要在每个组件的每个多选时更改它。有没有办法在全球范围内定义这些“noResult”、“noOptions”、“placeholder”等？那么每个组件中的每个多选都一样吗？

Answer 1

您可以基于vue-multiselect制作自己的Multiselect组件

下面是我在codesandbox中做的演示，供大家参考：

https://codesandbox.io/s/dazzling-yonath-pjsxt?file=/src/components/CustomMultiSelect.vue

想法是制作一个只有 vue-multiselect 的 vue 组件，并在那里设置所有固定设置，如占位符、插槽。对于所有动态值，可以通过 vue 提供的 value/event ($attrs, $listeners) 传递来检索。

CustomMutliSelect.vue

<template>
  <multiselect
    v-bind="$attrs"
    v-on="$listeners"
    placeholder="Tippen um Suche zu
      starten"
  >
    <span slot="noResult">Suche ergab keine Treffer</span>
    <span slot="noOptions">Keine Optionen</span>

    <!-- Below template for Testing -->
    <template slot="singleLabel" slot-scope="{ option }"
      ><strong>{{ option }}</strong> is written in<strong>
        {{ option }}</strong
      ></template
    >
  </multiselect>
</template>

App.vue

<CustomMultiSelect
      id="account-selected"
      v-model="value"
      :multiple="false"
      :options="options"
    />

使用 CustomMultSelect，您可以在任何地方应用它，而无需复制占位符和插槽。

VueJS 多选更改所有选择的默认值

VueJS Multiselect change default for all selects

multi-select

vue.js

vue-multiselect