0

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

Atm 我需要将所有文本翻译成德语。Atm 我在多选中使用海关

<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”等？那么每个组件中的每个多选都是一样的吗？

4

1 回答 1

1

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

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

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

这个想法是制作一个 vue 组件，它只具有vue-multiselect并在那里设置所有固定设置，如占位符、插槽。对于所有动态值，可以通过 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>

应用程序.vue

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

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

于 2021-05-12T13:57:21.907 回答