README

关于 simple-translate
安装
基本用法
- 自动合并
自定义包
- 子组件
- 添加额外翻译
贡献

关于 simple-translate

simple-translate 是一个允许在 Vue 组件上轻松高效地使用 Laravel 翻译的包。该包创建了一个包含每个组件使用的翻译的 json 格式包，只传递了所需的信息到视图中。使用起来非常简单，只需要在 Vue 组件中使用 {{$attrs.__('<translation_key>')}} 调用翻译，运行 php artisan translate:bundle 命令将自动查找并创建翻译文件，然后在您的 Vue 组件上添加 @bundle(<your component>) 指令。

安装

composer require aridez/simple-translate

基本用法

第一步是前往您想添加翻译的 Vue 组件，并在您想要显示翻译的地方调用 $attrs.__('<message>')

//ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{$attrs.__('welcome.title')}}</div>

                    <div class="card-body">
                        {{$attrs.__('welcome.message')}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log(this.$attrs.__("I'm being translated!"))
        }
    }
</script>

一旦配置了翻译，就是时候更新包了

php artisan translate:bundle

最后，调用 @bundle(<name>) 指令，注意 <name> 参数是 Vue 组件文件名（不带扩展名）

<example-component @bundle('ExampleComponent')></example-component>

这就完成了！ 包将存储在新的 resources\simple-translate\bundles 文件夹中，如果您想查看它们，请记住在更新时运行 php artisan translate:bundle

自动合并

有时一个项目可能包含多个具有相同文件名的 Vue 组件。在这些情况下，两个文件的翻译将被合并并捆绑在一起。最好尽可能避免这种情况，以保持发送到客户端的数据量最小。

自定义包

有一些情况下，能够自定义包含在包中的翻译或者从头开始创建自定义翻译包非常有用。这些包可以在 resources\simple-translate\custom-bundles.json 文件中进行配置。它包含一个数组，可以填充以下结构

[
    {
        "name": "CustomBundle",
        "bundles": ["Component1", "Component2"],
        "keys": ["Key1", "Key2"]
    },
    ...
]

name: 定义包的名称，确保它是唯一的
bundles: 定义一个现有包名称的数组，它们的所有翻译都将合并
keys: 定义一个翻译键的数组，这些键将在自定义包内部合并

子组件

为了使翻译可用于父组件及其所有子组件，首先需要在 resources\simple-translate\custom-bundles.json 文件上创建一个新的自定义包。在数组中创建一个新元素，并设置一个唯一的 name，然后定义父组件和子组件的 bundles

[
    {
        "name": "CustomComponent",
        "bundles": ["ParentComponent", "ChildComponent"],
        "keys": []
    },
    ...
]

一旦定义，使用 php artisan translate:bundle 创建包，并使用上面指定的 @bundle 指令在父组件中使用

<parent-component @bundle(CustomComponent)></parent-component>

要使所有这些内容都可用于子组件，您需要通过绑定传递属性

<child-component v-bind="$attrs"></child-component>

这就完成了！现在函数和翻译也可以从子组件中访问了！

添加额外翻译

如果您正在动态生成要使用的翻译，可以从自定义包中的文件添加额外的翻译，如下所示

[
    {
        "name": "CustomComponent",
        "bundles": ["ExampleComponent"],
        "keys": ["auth.throttle"]
    },
    ...
]

这样，auth.throttle 翻译与 ExampleComponent.vue 内部找到的所有翻译将一起合并到新的 CustomComponent 下。

贡献

如果您正在寻找扩展或改进 simple-translate 功能的方法，您的贡献是受欢迎的！

要将此包设置用于开发，请将此文件夹克隆到您计划测试新功能的Laravel应用程序根目录下的 packages\aridez 目录中。为了在本地上传此包，请在您的 composer.json 文件中定义一个自定义仓库。

    "repositories": [
        {
          "type": "path",
          "url": "./packages/aridez/simple-translate"
        }
      ]

现在您可以使用包的所选命名空间在Laravel应用程序中引入您的本地包。

composer require aridez/simple-translate

有关如何为此包设置开发环境的更多信息，请访问 laravelpackage.com。

一旦您的代码合并，它将免费供所有人使用，受MIT许可证保护。在simple-translate GitHub仓库上发布您的Pull Request意味着您同意此许可证对您的贡献。

📧 info@skytanet.com

您喜欢这个包吗？帮助我继续开发开源项目

aridez / simple-translate

维护者

详细信息