Question

我正在使用following script，以便在我的应用程序中使用法语和英语：

import Vue from 'vue';
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage';

Vue.use(MLInstaller);

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      logo:'logo-english',
      emotion: happy,

    }),

    new MLanguage('french').create({
      logo:'logo-french',
      emotion: joyeux,

    })
  ]
})

对于文本，我可以简单地执行以下操作：

但是对于图像，我不知道如何检索徽标的值以将其传递给下面的方法：

方法（动态提取徽标图像和扩展名）：

getImg(image, ext) {
  return require(`@/assets/images/${image:this.logo}.${ext}`);
},

获取图像：

我想将两者合并，现在我只能获取alt值，但不能解析logo，因为我不知道怎么做：

<img v-bind:src="getImg(logo, 'svg')" v-bind:alt="$ml.with('VueJS').get('logo')" />

如何将$ml应用于"getImg(logo, 'svg')"？

Answer 1

您可以为此使用计算属性：

computed: {
    computerLogoName () {
        return this.$ml.with('VueJS').get('logo')
    }
}

但是正如您所说的那样，您希望它是动态的，我会在vuex中使用类似mapGetters的技术：

首先，您需要在一个单独的文件中创建一个函数，该函数将返回包含所有getter的对象。像这样：

export const mapLanguageKeys = function (keys) {
    let computed = {}

    for (let computedPropertyName in keys) {
        computed[computedPropertyName] = function mappedLanguageKey () {
            return this.$ml.with('VueJS').get(keys[computedPropertyName])
        }
    }

    return computed
}

因此，基本上，此函数在参数中接受一个对象。键将是计算属性的名称（即“ computedLogoName”），而值将是“语言键”（即“徽标”）。然后，函数mappedLanguageKey中的代码就是您要放入计算属性中的代码。

最后一步是将这些生成的计算属性添加到您的计算对象中。这是通过ES6的“ ...”运算符完成的（不要忘记导入函数）：

computed: {
    ...mapLanguageKeys({
        'computedLogoName': 'logo'
    })
}

这应该可以解决问题。

使用它现在是地球上最简单的事情，您有一个名为computedLogoName的计算属性，该属性返回“语言键” logo的“语言值”。因此，您可以在javascript代码中仅调用this.computedLogoName，而在html中仅调用computedLogoName。

如何将其放在单独的文件中并导入：

创建一个名为language.js的文件（如果需要，可以给它起另一个名字）。然后，将该函数的代码粘贴到该文件中。当您想在组件中调用该函数时，只需要这样导入即可：

import {mapLanguageKeys} from './path/to/language.js';

您可以使用它。

注意：我假设您正在使用ES6。

注2：您也可以使用一种方法。

Answer 2

更新的代码： 语言数据和多语言功能

//language.js

import Vue from 'vue';
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage';

Vue.use(MLInstaller);

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      logo:'logo-english',
      emotion: happy,

    }),

    new MLanguage('french').create({
      logo:'logo-french',
      emotion: joyeux,

    })
  ]
})

使图像动态化的代码

// tools.js

export const mapLanguageKeys = function (keys) {
    let computed = {}

    for (let computedPropertyName in keys) {
        computed[computedPropertyName] = function mappedLanguageKey () {
            return this.$ml.with('VueJS').get(keys[computedPropertyName])
        }
    }

    return computed
}

在我的组件内部

// header.js

<script>
import { MLBuilder } from 'vue-multilanguage'
import {mapLanguageKeys} from '../tools'
..


  computed: {
    ...mapLanguageKeys({
        'computedLogoName': 'logo',
    }),
  },
  methods: {
    changeLang(lang) {
      this.$ml.change(lang);
      this.currentLang = lang;
    },
    getImg(image, ext) {
      return require(`@/assets/images/${image}.${ext}`);
    },
  },

我对图像和按钮开关的HTML调用

    //Language placeholders
    <h1 v-text="$ml.with('VueJS').get('emotion')" />
    <img v-bind:src="getImg(computedLogoName, 'svg')" v-bind:alt="computedLogoName" />

   //Button switch
    <div class="tools">
      <button
          v-for="lang in $ml.list"
              v-if="currentLang !== lang"
          :key="lang"
          @click="$ml.change(lang); currentLang = lang"
          v-text="lang"
      />

v-text中的所有内容均在单击按钮时切换，但是图像本身v-bind:src仅加载一次，并且不会再次更改。我尝试将v-bind:src="lang"添加到上方的按钮，但它仍然仅加载英文徽标。

vue.js应用程序中的多种语言

2 个答案: