条件渲染的东西在组件(从ltr到rtl)与最小的重复?

Question

我对价值很陌生，所以这可能是一个愚蠢的问题。我正在使用vue cli为英语和阿拉伯语制作一个多语言应用程序，我也在使用vue-i18n插件。基本上在我的组件中，我在html模板中有很多事情要做，如果用户选择阿拉伯语，我需要考虑从右到左。下面是一个非常简单的例子:

<template>
<div>
<h1>Some text</h1>
<p>lorem ipsum...</p>
<button type="button">Button</button>
</div>
</template>

我需要做的是阿拉伯语也是从右到左的，所以我需要将文本对齐到右，并将按钮放在另一边，例如，我需要为其他组件中的所有代码也这样做，而不仅仅是一次性的。那么，是否有比使用条件渲染更好的方法来做到这一点，因为代码看起来非常重复?

<template>
<div v-if="language=arabic">
<h1 text-align:right>{{ $t('message') }}</h1>
<button type="button">Button</button>
<p>{{ $t('lorem_ipsum') }}</p>
</div>
<div v-else>
<h1>{{ $t('message') }}</h1>
<p>{{ $t('lorem_ipsum') }}</p>
<button type="button">Button</button>
</div>
</template>

谢谢!

Answer 1

你可以使用css flexbox，然后使用BEM:

<template>
<div :class="['has-translation', `has-translation--${this.i18n.locale}`]">
<h1>{{ $t('message') }}</h1>
<button type="button">Button</button>
<p>{{ $t('lorem_ipsum') }}</p>
</div>
</template>

在你的CSS中，你可以这样做:

.has-translations.has-translations--en {
text-align: left;
}
.has-translations.has-translations--ar {
text-align: right;
}

如果你想让所有的行向左或向右对齐，你可以:

.has-translations {
display: flex;
}
.has-translations.has-translations--en {
justify-content: left;
}
.has-translations.has-translations--ar {
justify-content: right;
}

我还没有测试过代码，但这是我在我的项目中使用过的一个总体想法，并且效果很好。

Answer 2

由于这是一个与应用程序基本结构相关的布局问题，因此我首先想到的是在应用程序的根处定义它，而不是在每个组件上定义它。如果您的主体有一个定义从右向左的类，那么您可以相应地为组件设置样式。我认为您的虚拟组件不需要知道这些信息。