精华内容
下载资源
问答
  • A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.DemoUsageyarn add vue-translator复制代码Basic Usageimport Vue from 'vue'import VueTran...

    A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.

    Demo

    Usage

    yarn add vue-translator复制代码

    Basic Usage

    import Vue from 'vue'

    import VueTranslator form 'vue-translator'

    Vue.use(VueTranslator, {

    locale?: string, // set it on initialize or before first rendering

    translations?: { // If you want to define translations in component only, no need to set it on initialize

    [locale: string]: {

    [key:string]: string | array | object

    }

    },

    defaultLocale?: string, // when no value can be found in current locale, try to fallback to defaultLocale

    merge?: Function // `lodash.merge` for example, if you want to use component translator you must pass it

    })复制代码

    You will get a default translator instance on Vue.translator, it is safe to use it on client, but please avoid use it on server, be careful!

    translations is often generated via require.context provided by webpack from *.{locale}.i18n.json:

    const context = require.context('.', true, /([\w-]*[\w]+)\.i18n\.json$/)

    const LOCALE_KEYS: { [key: string]: string[] } = {}

    const translations: {

    [locale: string]: {

    [key: string]: string

    }

    } = context.keys().reduce((modules: any, key: string) => {

    const module = context(key)

    const lang = key.match(/([\w-]*[\w]+)\.i18n\.json$/)[1]

    const matched = modules[lang] || (modules[lang] = {})

    if (process.env.NODE_ENV === 'development') {

    const keys = LOCALE_KEYS[lang] || (LOCALE_KEYS[lang] || [])

    const moduleKeys = Object.keys(module)

    const duplicates = _.intersection(keys, moduleKeys)

    if (duplicates.length) {

    console.warn('detect duplicate keys:', duplicates)

    }

    keys.push(...moduleKeys)

    }

    Object.assign(matched, module)

    return modules

    }, {})复制代码

    Then you will be able to use $t in all your component template.

    {{ $t('message', obj_params?) }}

    {{ $t('nested.message', arr_params?) }}

    export default {

    name: 'custom-component', // it is needed for better cache

    translator: {

    zh: {

    message: '我的信息'

    },

    en: {

    message: 'My Message'

    }

    }

    }

    复制代码

    If you are trying to get a non-exist key or value is undefined, you will get a warning in console on development. And if you want to ignore it, pass a third parameter ignoreNonExist: boolean: $t('non-exist-key', null, true).

    If you want to watch locale change in any component, global watch should be defined on root component:

    new Vue({

    el: '#app',

    watch: {

    '$t.locale'(curr, prev) {

    // do something

    },

    },

    })复制代码

    Or you want to change locale on client:

    {

    methods: {

    changeLocale() {

    this.$t.locale = 'locale'

    }

    }

    }复制代码

    SSR related

    You'd better to detect user custom locale via cookie and fallback to accept-language on first request.

    And you need to generate a single translator instance for every user request (cache by locale would be better) via createTranslator, koa for example:

    import { createTranslator } from 'vue-translator'

    app.use(async (ctx, next) => {

    const translator = createTranslator({

    locale: string, // ctx.cookies.get('locale_cookie')

    defaultLocale: string,

    })

    const context = {} // user context

    context.translator = translator

    // ... do anything

    })复制代码

    Then $t will be translator generated above, if you don't mind user's locale cookie and not pass translator instance into user context, it will fallback to the default translator.

    Remember, always get translator instance via this.$t of context.translator instead of Vue.translator unless you are not handling user request.

    template syntax

    Translation key should be string, but .(dot) will be parsed as nested key, it will also work in template!

    $t('a.b.c') // will try to find `a.b.c` on your custom transition, if a is falsy, will render undefined and try default locale

    // render `nested value`

    new Vue({

    translator: {

    en: {

    a: {

    b: {

    c: 'nested value',

    },

    },

    },

    },

    })

    // render `nested template`

    $t('a.b', {c: d: 'nested template'})

    new Vue({

    translator: {

    en: {

    a: {

    b: '{ c.d }'

    },

    },

    },

    })复制代码

    Array is also supported, .index(dot) or [index] can both be used!

    // nested with array key and template

    // render `1`

    $t('a.b[0]', [{ a: 1 }])

    new Vue({

    translator: {

    en: {

    a: {

    b: ['{ 0.a }'], // do not use `[0].a` here, `0[a]` is also OK

    },

    },

    },

    })复制代码

    Feature Request or Troubleshooting

    展开全文
  • vue-translatorA deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.DemoUsageyarn add vue-translatorBasic Usageimport Vue from 'vue'import VueTranslator form 'vue-translator'V...

    vue-translator

    1460000012458410

    1460000012458411

    1460000012458412

    1460000012458413

    1460000012458414

    1460000012458415

    1460000012458416

    A deadly simple i18n translate plugin for Vue, ready for Server Side Rendering.

    Demo

    Usage

    yarn add vue-translator

    Basic Usage

    import Vue from 'vue'

    import VueTranslator form 'vue-translator'

    Vue.use(VueTranslator, {

    locale?: string, // set it on initialize or before first rendering

    translations?: { // If you want to define translations in component only, no need to set it on initialize

    [locale: string]: {

    [key:string]: string | array | object

    }

    },

    defaultLocale?: string, // when no value can be found in current locale, try to fallback to defaultLocale

    merge?: Function // `lodash.merge` for example, if you want to use component translator you must pass it

    })

    You will get a default translator instance on Vue.translator, it is safe to use it on client, but please avoid use it on server, be careful!

    translations is often generated via require.context provided by webpack from *.{locale}.i18n.json:

    const context = require.context('.', true,/([\w-]*[\w]+)\.i18n\.json$/)

    const LOCALE_KEYS: { [key: string]: string[] } = {}

    const translations: {

    [locale: string]: {

    [key: string]: string

    }

    } = context.keys().reduce((modules: any, key: string) => {

    const module = context(key)

    const lang = key.match(/([\w-]*[\w]+)\.i18n\.json$/)[1]

    const matched = modules[lang] || (modules[lang] = {})

    if (process.env.NODE_ENV === 'development') {

    const keys = LOCALE_KEYS[lang] || (LOCALE_KEYS[lang] || [])

    const moduleKeys = Object.keys(module)

    const duplicates = _.intersection(keys, moduleKeys)

    if (duplicates.length) {

    console.warn('detect duplicate keys:', duplicates)

    }

    keys.push(...moduleKeys)

    }

    Object.assign(matched, module)

    return modules

    }, {})

    Then you will be able to use $t in all your component template.

    {{ $t('message', obj_params?) }}

    {{ $t('nested.message', arr_params?) }}

    export default {

    name: 'custom-component', // it is needed for better cache

    translator: {

    zh: {

    message: '我的信息'

    },

    en: {

    message: 'My Message'

    }

    }

    }

    If you are trying to get a non-exist key or value is undefined, you will get a warning in console on development. And if you want to ignore it, pass a third parameter ignoreNonExist: boolean: $t('non-exist-key', null, true).

    If you want to watch locale change in any component, global watch should be defined on root component:

    new Vue({

    el: '#app',

    watch: {

    '$t.locale'(curr, prev) {

    // do something

    },

    },

    })

    Or you want to change locale on client:

    {

    methods: {

    changeLocale() {

    this.$t.locale = 'locale'

    }

    }

    }

    SSR related

    You'd better to detect user custom locale via cookie and fallback to accept-language on first request.

    And you need to generate a single translator instance for every user request (cache by locale would be better) via createTranslator, koa for example:

    import { createTranslator } from 'vue-translator'

    app.use(async (ctx, next) => {

    const translator = createTranslator({

    locale: string, // ctx.cookies.get('locale_cookie')

    defaultLocale: string,

    })

    const context = {} // user context

    context.translator = translator

    // ... do anything

    })

    Then $t will be translator generated above, if you don't mind user's locale cookie and not pass translator instance into user context, it will fallback to the default translator.

    Remember, always get translator instance via this.$t of context.translator instead of Vue.translator unless you are not handling user request.

    template syntax

    Translation key should be string, but .(dot) will be parsed as nested key, it will also work in template!

    $t('a.b.c') // will try to find `a.b.c` on your custom transition, if a is falsy, will render undefined and try default locale

    // render `nested value`

    new Vue({

    translator: {

    en: {

    a: {

    b: {

    c: 'nested value',

    },

    },

    },

    },

    })

    // render `nested template`

    $t('a.b', {c: d: 'nested template'})

    new Vue({

    translator: {

    en: {

    a: {

    b: '{ c.d }'

    },

    },

    },

    })

    Array is also supported, .index(dot) or [index] can both be used!

    // nested with array key and template

    // render `1`

    $t('a.b[0]', [{ a: 1 }])

    new Vue({

    translator: {

    en: {

    a: {

    b: ['{ 0.a }'], // do not use `[0].a` here, `0[a]` is also OK

    },

    },

    },

    })

    Feature Request or Troubleshooting

    展开全文
  • 本文实例为大家分享了vue实现在线翻译功能的具体代码,供大家参考,具体内容如下最终效果:APP.vue在线翻译简单/易用/方便import TranslateForm from './components/translateForm'import translateOutput from './...

    本文实例为大家分享了vue实现在线翻译功能的具体代码,供大家参考,具体内容如下

    最终效果:

    APP.vue

    在线翻译

    简单/易用/方便

    import TranslateForm from './components/translateForm'

    import translateOutput from './components/translateOutput'

    export default {

    name: 'App',

    components:{

    TranslateForm,translateOutput

    },

    data(){

    return{

    //翻译出的文字

    translatedText:''

    }

    },

    methods:{

    //点击翻译事件

    translateText(text,language){

    // alert(text)

    this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang='

    +language+'&text='+text)

    .then((response)=>{

    console.log(response.body.text[0]) //翻译结果

    this.translatedText = response.body.text[0]; //将翻译结果赋给文本框,传给子组件

    })

    }

    }

    }

    表单组件 translateForm.vue

    English

    Russian

    Korean

    export default {

    name: 'translateForm',

    data () {

    return {

    //用户输入的内容

    textTotranslate:"",

    //用户选择的语言

    language:""

    }

    },

    methods:{

    //点击翻译传给父元素

    formSubmit(e){

    this.$emit("formSubmit",this.textTotranslate,this.language)

    e.preventDefault();

    }

    }

    }

    显示组件 translateOutput.vue

    {{translatedText}}

    export default {

    name: 'translateOutput',

    props:[

    'translatedText'

    ],

    data () {

    return {

    }

    }

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

    本文标题: vue实现在线翻译功能

    本文地址: http://www.cppcns.com/wangluo/javascript/276660.html

    展开全文
  • npm 下载 vue-i18n 插件npm install vue-i18n -S定义文件静态目录(这里用到简体,繁体,英文)image.png文件采取对象形式,编写个版本语言。简繁英image.png在main.js中引用import VueI18n from 'vue-i18n';Vue.use...

    npm 下载 vue-i18n 插件

    npm install vue-i18n -S

    定义文件静态目录(这里用到简体,繁体,英文)

    image.png

    文件采取对象形式,编写个版本语言。简繁英

    image.png

    在main.js中引用

    import VueI18n from 'vue-i18n';

    Vue.use(VueI18n);

    const i18n = new VueI18n({

    locale: _.isNil(localStorage.getItem('i18n')) ? 'hk' : localStorage.getItem('i18n'),//_.isNil是个工具库判断是否为空,具体可以参考Lodash,

    messages: {

    en: require('./static/i18n/en').default,

    cn: require('./static/i18n/cn').default,

    hk: require('./static/i18n/hk').default

    },

    silentTranslationWarn: true//解决警告问题

    });

    引用完成后在项目中应用

    {{$t('lang.english')}}

    {{$t('lang.simplified_chinese')}}

    {{$t('lang.traditional_chinese')}}

    使用------

    1.页面中是{{$t()}}

    2.标签属性是 $t('')

    3.js中是this.$t('')

    setLang(val){

    localStorage.setItem('i18n',val);

    this.$router.go(0) //刷新页面

    }

    展开全文
  • vue 在线翻译

    2018-09-30 16:09:56
    在线demo: ... 在线翻译调用免费AP Ihttps://tech.yandex.com/ vue框架 element-ui 效果实现 创建translateform.vue,translateOutput.vue,translation.vue translation.vue...
  • Vue在线翻译代码.zip

    2017-08-14 00:17:42
    Vue在线翻译代码
  • vue中文翻译拼音组件 @ alidrus / vue-simple-inline-translation (@alidrus/vue-simple-inline-translation) A Vue component that simplifies the way text is translated: by translating it inline. Vue组件可...
  • 开始这是一适合新手练习的小项目,一个在线翻译的demo。在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单...
  • 本来打算今天上午把这个案例写好的,结果上午昏昏欲睡,毫无动力,中午吃完饭就打王者荣耀,玩到下午三点多,队友不给力,自己又太坑实在太累了就睡了一觉,醒来到了六点了...搭建脚手架我不多说,建立两个vue文件 ...
  • vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n兼容性:支持 Vue.js 2.x 以上版本安装方法:(此处只演示 npm)npm install vue-i18n使用方法:1、在 main.js 中引入 vue-i18n (前提是要先引入 vue)import ...
  • vue 在线翻译demo

    2019-06-12 17:44:30
    APP.vue <template> <div id="app"> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'>...
  • 首先说下,本人为在校大三狗一只,缺少实战开发经验,然后用语什么的也不标准,就按我自己的想法写的,有什么不对的地方欢迎指导指导哈然后直接开始吧在需要翻译的地方做上标记,这里用的是添加名为"text-dom"的...
  • VUE实现在线翻译11111

    2018-08-03 11:33:09
    VUE-cli 2.0实现简单的在线翻译 主要就是熟悉VUE框架的使用
  • 开始这是一适合新手练习的小项目,一个在线翻译的demo。在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单...
  • vue实现在线翻译功能

    2020-10-16 07:40:05
    主要为大家详细介绍了vue实现在线翻译功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue中英文翻译

    2021-03-11 15:43:53
    在文件中写入需要翻译的内容 中文版cn.js export const m = { help: "帮助", homeSearch: "请输入", } 英文版en.js export const m = { help: "help", homeSearch: "Please input", } 3:配置main.js文件 //...
  • 刚学习vue不久,所以对vue了解还不是很深,一直处于边做边查的状态,这几天开发一个双语网站。内容如下,希望对大家有帮助。安装 vue-i18n插件npm install vue-i18n1.首先是引进i18n1.首先是引进i18n然后在index.js...
  • 不过想想也是,这几天我在校对他的翻译时,发现些许错误与不合翻译规范的地方,不过总体而言,我们 印记中文 这个 97 年的小伙子让我记忆犹新。我完整读了一遍文档后,觉得这是我和 VuePress 最接近的时刻,刹那间我...
  • 本文链接:git地址:本次说明用vue-cli 3 来做示范。安装:npm install jj_language --save在main.jsimport language from 'jj_language'//list 和 directory 别同时设置language.initData({from:'auto',to:get...
  • vue实现在线翻译

    千次阅读 2018-08-03 11:42:23
    这个是用VUE实现简单的在线翻译 GITHUB:https://github.com/pengdadasunnyboy/vue-translate 有积分的可以https://download.csdn.net/download/sunnyboysix/10581178源码打包 npm run dev就可以启动项目了 简单...
  • 这次给大家带来vuevue-i18n如何实现后台数据的多语言切换,vuevue-i18n实现后台数据的多语言切换的注意事项有哪些,下面就是实战案例,一起来看一下。在XXX.js文件中定义函数:getUser(context,info){context.$...
  • vuevue-i18n结合实现后台数据的多语言切换方法发布于 2020-3-23|复制链接下面小妖就为大家分享一篇vuevue-i18n结合实现后台数据的多语言切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看...
  • vue整合百度翻译,js整合百度翻译 md5.js var MD5 = function (string) { function RotateLeft(lValue, iShiftBits) { return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits)); } ...
  • 小程序类似mvvm框架,和vue好像,这里主要以项目为主整理总结以供日后参考,可为初级小程序学习指南,主要包括以下:云开发,数据库与云函数的使用小程序生命周期其他涉及音频,存储,动画,相关技巧项目需求:主要...
  • 前言:最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额。首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是...为什么谷歌翻译后,Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,619
精华内容 647
关键字:

vue翻译

vue 订阅