使用 Nuxt Js i18n 在 head 中添加 RTL 条件

Question

我想添加一个条件如下

if(app.i18n.locale == 'ar')

我在这个项目中使用阿拉伯语和英语。如果当前语言是阿拉伯语，则在头部添加bootstrap-rtl.css，如果当前语言en名为bootstrap.css，我尝试了不止一种方法，都没有成功。

Answer 1

例如在插件文件夹中添加一个文件direction-control.js

\n

    export default ({ app }, inject) => {\n    const dir = () =>\n      app.i18n.locales.find((x) => x.code === app.i18n.locale)?.dir;\n      inject('dir', dir);\n    };\n

\n

当你的nuxt.config.js需要与此类似的代码

\n

  plugins: [\n      '~/plugins/direction-control',  // your plugins file name\n      // other plugins\n    ],\n    modules: [\n    [\n      'nuxt-i18n',\n      {\n        locales: [\n          {\n            code: 'en',\n            file: 'en.json',\n            dir: 'ltr',\n            name: 'English',\n          },\n          {\n            code: 'ar',\n            file: 'ar.json',\n            dir: 'rtl',        // that will be passed to your app\n            name: '\xd8\xb9\xd8\xb1\xd8\xa8\xd9\x8a',\n          },\n        ],\n        langDir: 'translations/',\n        defaultLocale: 'ar',\n      },\n    ],\n  ],\n

\n

现在是时候获取目录了

\n

export default {\n  mounted() {\n    console.log(this.$dir()); // logs your direction 'ltr' or 'rtl'\n    console.log(this.$i18n.locale);\n    if (this.$i18n.locale == "ar") {\n       // make some action\n    }\n  },\n}\n

\n

或像这样的内部模板

\n

<template>\n  <div :dir="$dir()">\n    <Nuxt />\n  </div>\n</template>\n

\n