根据 Vue 3/Laravel 8 中的语言环境自定义字体大小？答案

【问题标题】：Customize font-size depending on locale in Vue3/Laravel8?根据 Vue 3/Laravel 8 中的语言环境自定义字体大小？
【发布时间】：2021-12-12 10:47:13
【问题描述】：

我正在开发一个Vue3/Laravel8 应用程序，它必须支持english 和arabic 语言。问题是en 和ar 语言环境之间存在巨大的字体大小差异：

我一直在寻找一种方法来更改arabic font-size，但这似乎并不简单。

首先我尝试在vue-i18n 中找到一种方法，但没有成功。如果可能的话，那将是最方便的。

然后我尝试使用 :lang(ar) 选择器使用 CSS 路由，但这取决于 html 或在我的情况下为 laravel.blade 并且控制项目语言似乎很麻烦，创建中间件和控制器。

有方便的方法吗？

【问题讨论】：

标签： html css laravel vue.js localization

【解决方案1】：

Vue 3.2 为单文件组件 (SFC) 引入了一些新功能： https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

所以在你的情况下，你可以尝试这样的事情（未经测试）：

<template>
    <div class="text">hello</div>
</template>

<script>
export default {
    data() {
        return {
            lang: 'en',
        },
    },
    computed() {
        fontSize() {
            if (this.lang === 'ar') {
                return '1.5em';
            }
            return '1em';
        },
    },
}
</script>

<style>
.text {
    font-size: v-bind(fontSize);
}
</style>

【讨论】：