手写一个vue中英文翻译组件

1：下载vue-i18n插件

npm install vue-i18n

2：创建中英文js文件

在文件中写入需要翻译的内容

中文版cn.js

export const m = {help: "帮助",homeSearch: "请输入",
}

英文版en.js

export const m = {help: "help",homeSearch: "Please input",
}

3：配置main.js文件

//引入中英文切换插件vue-i18n
import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 挂载const i18n = new VueI18n({locale: 'zh-CN',    // 语言标识messages: {'zh-CN': require('./utils/i18n/langs/cn'),   // 中文版cn.js文件路径'en-US': require('./utils/i18n/langs/en')    // 英文版en.js文件路径}
})new Vue({el: '#app',render:h=>h(App),router,store,i18n,  // ！！！！！一定要引入
})

4：语言切换组件

html代码

<el-dropdown trigger="click" @command="setLanguage" @visible-change="visibleChange"><span class="el-dropdown-link"><el-button type="primary" size="small" class="languageBtn"><span>{{translate}}</span><i :class="languageIcon"></i></el-button></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="en">English</el-dropdown-item><el-dropdown-item command="cn">中文</el-dropdown-item></el-dropdown-menu>
</el-dropdown>

js代码

data() {translate: "中文",languageIcon: "el-icon-caret-bottom"
},
methods() {setLanguage(name) {if (name === "cn") {this.translate = "中文"this.$i18n.locale = 'zh-CN'       // 切换为中文this.$message.success('已切换中文');} else {this.translate = "English"this.$i18n.locale = 'en-US'        // 切换为英文this.$message.success('Chinese switched');}},visibleChange(value) {if(value){this.languageIcon = "el-icon-caret-top"} else {this.languageIcon = "el-icon-caret-bottom"}}
}

5：数据渲染

使用方式一：

<el-buttontype="primary"icon="el-icon-plus"
>{{$t('m.help')}}</el-button>

使用方式二：

<el-inputv-model="value":placeholder="$t('m.homeSearch')"
></el-input>

6：看效果

参考https://blog.csdn.net/m0_46627730/article/details/107590852

手写一个vue中英文翻译组件相关推荐

Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
深入Vue底层，手写一个vuex
深入底层,手把手教你写一个Vuex 1. Vuex是什么?什么场景下使用? 2. Vuex的基本使用 3. 手写一个vuex 1. Vuex是什么?什么场景下使用? Vuex是vue的一个插件,叫做状 ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...
vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 DatePicker 的原理是- ...
vue 使用fs_模仿vue-cli，手写一个脚手架
vue-cli 在vue的开发的过程中,经常会使用到vue-cli脚手架工具去生成一个项目.在终端运行命令vue create hello-world后,就会有许多自动的脚本运行. 为什么会这样运行呢 ...
基于vue手写一个分屏器，通过鼠标控制屏幕宽度。
基于vue手写一个分屏器,通过鼠标控制屏幕宽度. 先来看看实现效果: QQ录屏20220403095856 下面是实现代码: <template><section class=&qu ...
vue手写一个计算器
计算器大家都不陌生有计算器机器有手机计算器网页计算器! 那么好今天我来给大家手写一个计算器啥都不说上操作请听题:vue手写计算器一个个小方块拼成一个计算器绿色比较好可以缓解视力哦 i ...

手写一个vue中英文翻译组件

1：下载vue-i18n插件

2：创建中英文js文件

3：配置main.js文件

4：语言切换组件

5：数据渲染

6：看效果

手写一个vue中英文翻译组件相关推荐

最新文章

热门文章