辽宁建设厅查询网站首页,检索标准的网站,专业网站设计发展前景,小型私人会所装修设计成品效果 首先引入i18n(vue-i18n官网文档) 依赖包 npm install vue-i18n8然后单独在src目录下新建一个文件夹lang#xff0c;存放相对应的变量名称#xff0c;我这里只做显示中文所以其他引入我都注释了#xff0c;具体目录如下#xff1a; src\lang/zh.js部分代码
export…成品效果 首先引入i18n(vue-i18n官网文档) 依赖包 npm install vue-i18n8
然后单独在src目录下新建一个文件夹lang存放相对应的变量名称我这里只做显示中文所以其他引入我都注释了具体目录如下 src\lang/zh.js部分代码
export default {route: {riskDetail: 列表库管理,bdTaskRisk: 列表1,bdRepairOrder: 列表2,pdTaskRisk: 列表3,pdRepairOrder: 列表4,sdTaskRisk: 列表5,sdRepairOrder: 列表6,zlTaskRisk: 列表7,zlRepairOrder: 列表8,jobControlCard: 列表9,},navbar: {dashboard: 首页,github: 项目地址,logOut: 退出登录,profile: 个人中心,theme: 换肤,size: 布局大小},login: {title: 系统登录,logIn: 登录,tenant: 租户,username: 账号,password: 密码,any: 随便填,thirdparty: 第三方登录,thirdpartyTips: 本地不能模拟请结合自己业务进行模拟},documentation: {documentation: 文档,github: Github 地址},permission: {addRole: 新增角色,editPermission: 编辑权限,roles: 你的权限,switchRoles: 切换权限,tips: 在某些情况下不适合使用 v-permission。例如Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。,delete: 删除,confirm: 确定,cancel: 取消},guide: {description: 引导页对于一些第一次进入项目的人很有用你可以简单介绍下项目的功能。本 Demo 是基于,button: 打开引导},components: {documentation: 文档,tinymceTips: 富文本是管理后台一个核心的功能但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路市面上常见的富文本都基本用过了最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见,dropzoneTips: 由于我司业务有特殊需求而且要传七牛 所以没用第三方选择了自己封装。代码非常的简单具体代码你可以在这里看到 /components/Dropzone,stickyTips: 当页面滚动到预设的位置会吸附在顶部,backToTopTips1: 页面滚动到指定位置会在右下角出现返回顶部按钮,backToTopTips2: 可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示可在外部使用Element的el-tooltip元素,imageUploadTips: 由于我在使用时它只有vue1版本而且和mockjs不兼容所以自己改造了一下如果大家要使用的话优先还是使用官方版本。},table: {dynamicTips1: 固定表头, 按照表头顺序排序,dynamicTips2: 不固定表头, 按照点击顺序排序,dragTips1: 默认顺序,dragTips2: 拖拽后顺序,title: 标题,importance: 重要性,type: 类型,remark: 点评,search: 搜索,add: 添加,export: 导出,reviewer: 审核人,id: 序号,date: 时间,author: 作者,readings: 阅读数,status: 状态,actions: 操作,edit: 编辑,publish: 发布,draft: 草稿,delete: 删除,cancel: 取 消,confirm: 确 定},example: {warning: 创建和编辑页面是不能被 keep-alive 缓存的因为keep-alive 的 include 目前不支持根据路由来缓存所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include直接缓存所有页面。详情见},errorLog: {tips: 请点击右上角bug小图标,description: 现在的管理后台基本都是spa的形式了它增强了用户体验但同时也会增加页面出问题的可能性可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常你可以在其中进行错误处理或者异常上报。,documentation: 文档介绍},excel: {export: 导出,selectedExport: 导出已选择项,placeholder: 请输入文件名(默认excel-list)},zip: {export: 导出,placeholder: 请输入文件名(默认file)},pdf: {tips: 这里使用 window.print() 来实现下载pdf的功能},theme: {change: 换肤,documentation: 换肤文档,tips: Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法各自有不同的应用场景具体请参考文档。},tagsView: {refresh: 刷新,close: 关闭,closeOthers: 关闭其它,closeAll: 关闭所有},settings: {title: 系统布局配置,theme: 主题色,tagsView: 开启 Tags-View,fixedHeader: 固定 Header,sidebarLogo: 侧边栏 Logo}
}
src\lang\index.js
我这里默认设置只显示中文
import Vue from vue
import VueI18n from vue-i18n
//import Cookies from js-cookie
// import elementEnLocale from element-ui/lib/locale/lang/en // element-ui lang
import elementZhLocale from element-ui/lib/locale/lang/zh-CN// element-ui lang
// import elementEsLocale from element-ui/lib/locale/lang/es// element-ui lang
// import elementJaLocale from element-ui/lib/locale/lang/ja// element-ui lang
// import enLocale from ./en
import zhLocale from ./zh
// import esLocale from ./es
// import jaLocale from ./jaVue.use(VueI18n)const messages {// en: {// ...enLocale,// ...elementEnLocale// },zh: {...zhLocale,...elementZhLocale},// es: {// ...esLocale,// ...elementEsLocale// },// ja: {// ...jaLocale,// ...elementJaLocale// }
}
export function getLanguage() {// const chooseLanguage Cookies.get(language)//if (chooseLanguage) return chooseLanguage// if has not choose language// const language (navigator.language || navigator.browserLanguage).toLowerCase()// const locales Object.keys(messages)// for (const locale of locales) {// if (language.indexOf(locale) -1) {// return locale// }// }return zh // 默认中文
}
const i18n new VueI18n({// set locale// options: en | zh | eslocale: getLanguage(),// set locale messagesmessages
})export default i18n
src\main.js
接着要在main.js引入相关依赖
import Vue from vueimport normalize.css/normalize.css // A modern alternative to CSS resetsimport Element from element-ui
import element-ui/lib/theme-chalk/index.css
// import locale from element-ui/lib/locale/lang/en // lang i18n
// import Cookies from js-cookie //这里不用到字体大小切换所以不存cookies切换
import /styles/index.scss // global cssimport App from ./App
import store from ./store
import router from ./routerimport i18n from ./lang // internationalizationimport /icons // icon
import /permission // permission control/*** If you dont want to use mock-server* you want to use MockJs for mock api* you can execute: mockXHR()** Currently MockJs will be used in the production environment,* please remove it before going online ! ! !*/
if (process.env.NODE_ENV production) {const { mockXHR } require(../mock)mockXHR()
}// Vue.use(Element, {
// size: Cookies.get(size) || medium, // set element-ui default size
// i18n: (key, value) i18n.t(key, value)
// })//重点代码//
Vue.use(Element, {size: medium, // set element-ui default size设置元素默认大小i18n: (key, value) i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})Vue.config.productionTip falsenew Vue({el: #app,router,store,i18n,render: h h(App)
})然后修改src/layout/components/Sidebar/SidebarItem.vue文件 templatediv v-if!item.hiddentemplate v-ifhasOneShowingChild(item.children,item) (!onlyOneChild.children||onlyOneChild.noShowingChildren)!item.alwaysShowapp-link v-ifonlyOneChild.meta :toresolvePath(onlyOneChild.path)el-menu-item :indexresolvePath(onlyOneChild.path) :class{submenu-title-noDropdown:!isNest}item :icononlyOneChild.meta.icon||(item.metaitem.meta.icon) :titlegenerateTitle(onlyOneChild.meta.title) //el-menu-item/app-link/templateel-submenu v-else refsubMenu :indexresolvePath(item.path) popper-append-to-bodytemplate slottitleitem v-ifitem.meta :iconitem.meta item.meta.icon :titlegenerateTitle(item.meta.title) //templatesidebar-itemv-forchild in item.children:keychild.path:is-nesttrue:itemchild:base-pathresolvePath(child.path)classnest-menu//el-submenu/div
/templatescript
import path from path
import { generateTitle } from /utils/i18n
import { isExternal } from /utils/validate
import Item from ./Item
import AppLink from ./Link
import FixiOSBug from ./FixiOSBugexport default {name: SidebarItem,components: { Item, AppLink },mixins: [FixiOSBug],props: {// route objectitem: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: }},data() {// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237// TODO: refactor with render functionthis.onlyOneChild nullreturn {}},methods: {hasOneShowingChild(children [], parent) {const showingChildren children.filter(item {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length 0) {this.onlyOneChild { ... parent, path: , noShowingChildren: true }return true}return false},resolvePath(routePath) {if (isExternal(routePath)) {return routePath}if (isExternal(this.basePath)) {return this.basePath}return path.resolve(this.basePath, routePath)},generateTitle}
}
/script
然后修改src\components\Breadcrumb\index.vue文件 templateel-breadcrumb classapp-breadcrumb separator/transition-group namebreadcrumbel-breadcrumb-item v-for(item,index) in levelList :keyitem.pathspan v-ifitem.redirectnoRedirect||indexlevelList.length-1 classno-redirect{{ generateTitle(item.meta.title) }}/spana v-else click.preventhandleLink(item){{ generateTitle(item.meta.title) }}/a/el-breadcrumb-item/transition-group/el-breadcrumb
/templatescript
import pathToRegexp from path-to-regexp
import { generateTitle } from /utils/i18n
export default {data() {return {levelList: null}},watch: {$route(route) {// if you go to the redirect page, do not update the breadcrumbsif (route.path.startsWith(/redirect/)) {return}this.getBreadcrumb()}},created() {this.getBreadcrumb()},methods: {generateTitle,getBreadcrumb() {// only show routes with meta.titlelet matched this.$route.matched.filter(item item.meta item.meta.title)const first matched[0]if (!this.isDashboard(first)) {matched [{ path: /dashboard, meta: { title: Dashboard }}].concat(matched)}this.levelList matched.filter(item item.meta item.meta.title item.meta.breadcrumb ! false)},isDashboard(route) {const name route route.nameif (!name) {return false}return name.trim().toLocaleLowerCase() Dashboard.toLocaleLowerCase()},pathCompile(path) {// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561const { params } this.$routevar toPath pathToRegexp.compile(path)return toPath(params)},handleLink(item) {const { redirect, path } itemif (redirect) {this.$router.push(redirect)return}this.$router.push(this.pathCompile(path))}}
}
/scriptstyle langscss scoped
.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 8px;.no-redirect {color: #97a8be;cursor: text;}
}
/style
这样就完成了因为需求不需要语言版本切换就所以借默认了zh,我这里只做个人记录所以代码潦草不喜勿喷哈。
