功能权限应用
目标: 实现功能权限的应用
功能权限的受控思路
上小节中,当我们拥有了一个模块,一个页面的访问权限之后,页面中的某些功能,用户可能有,也可能没有,这就是功能权限
这就是上小节,查询出来的数据中的points
比如,我们想对员工管理的删除功能做个权限怎么做?
首先需要在员工管理的权限点下, 新增一个删除权限点,启用
我们要做的就是看看用户,是否拥有point-user-delete这个point,有就可以让删除能用,没有就隐藏或者禁用
使用Mixin技术将检查方法注入
所以,我们可以采用一个新的技术 mixin(混入)来让所有的组件可以拥有一个公共的方法
src/mixin/checkPermission.js
import store from '@/store' export default { methods: { checkPermission(key) { const { userInfo } = store.state.user if (userInfo.roles.points && userInfo.roles.points.length) { return userInfo.roles.points.some(item => item === key) } return false } } }
main.js
中导入注册混入
// 导入混入 import checkPermission from '@/mixin/checkPermission' Vue.mixin(checkPermission)
在员工组件中检查权限点
<el-button :disabled="!checkPermission('POINT-USER-UPDATE')" type="text" size="small" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-button>
此时,可以通过配置权限的方式,检查权限的可用性了
提交代码
全模块集成
目标: 将其他业务模块代码集成到该项目中
到目前为止,我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的 业务联调, 时间关系,我们不可能将所有的业务都去编写一遍,这里提供大家 其余模块的集成代码,最终的目的是让大家得到一个完成的业务模块
要集成的模块业务,包括工资模块,社保模块,考勤模块,审批模块
在我们提供的资源集成模块中,我们提供了四个模块的
路由
/页面
/*api
, 按照下面的路径拷贝即可
路由 => src/router/modules
页面 => src/views
api => src/api
除此之外,我们需要将 router/modules/user.js
导入到静态路由中,因为这个模块是所有模块都可以访问的
最终,我们将得到一个较为完整的系统业务。
首页的页面结构
目标
: 实现系统首页的页面结构
目前,我们的页面还剩下首页,这里我们可以按照如图实现一下的结构
首页页面结构,src/views/dashboard/index.vue
<template> <div class="dashboard-container"> <!-- 头部内容 --> <el-card class="header-card"> <div> <div class="fl headL"> <div class="headImg"> <img src="@/assets/common/head.jpg"> </div> <div class="headInfoTip"> <p class="firstChild">早安,管理员,祝你开心每一天!</p> <p class="lastChild">早安,管理员,祝你开心每一天!</p> </div> </div> <div class="fr" /> </div> </el-card> <!-- 主要内容 --> <el-row type="flex" justify="space-between"> <!-- 左侧内容 --> <el-col :span="13" style="padding-right:26px"> <!-- 工作日历 --> <el-card class="box-card"> <div slot="header" class="header"> <span>工作日历</span> </div> <!-- 放置日历组件 --> </el-card> <!-- 公告 --> <el-card class="box-card"> <div class="advContent"> <div class="title"> 公告</div> <div class="contentItem"> <ul class="noticeList"> <li> <div class="item"> <img src="@/assets/common/img.jpeg" alt=""> <div> <p><span class="col">朱继柳</span> 发布了 第1期“传智大讲堂”互动讨论获奖名单公布</p> <p>2018-07-21 15:21:38</p> </div> </div> </li> <li> <div class="item"> <img src="@/assets/common/img.jpeg" alt=""> <div> <p><span class="col">朱继柳</span> 发布了 第2期“传智大讲堂”互动讨论获奖名单公布</p> <p>2018-07-21 15:21:38</p> </div> </div> </li> <li> <div class="item"> <img src="@/assets/common/img.jpeg" alt=""> <div> <p><span class="col">朱继柳</span> 发布了 第3期“传智大讲堂”互动讨论获奖名单公布</p> <p>2018-07-21 15:21:38</p> </div> </div> </li> </ul> </div> </div> </el-card> </el-col> <!-- 右侧内容 --> <el-col :span="11"> <el-card class="box-card"> <div class="header headTit"> <span>流程申请</span> </div> <div class="sideNav"> <el-button class="sideBtn">加班离职</el-button> <el-button class="sideBtn">请假调休</el-button> <el-button class="sideBtn">审批列表</el-button> <el-button class="sideBtn">我的信息</el-button> </div> </el-card> <!-- 绩效指数 --> <el-card class="box-card"> <div slot="header" class="header"> <span>绩效指数</span> </div> <!-- 放置雷达图 --> </el-card> <!-- 帮助连接 --> <el-card class="box-card"> <div class="header headTit"> <span>帮助链接</span> </div> <div class="sideLink"> <el-row> <el-col :span="8"> <a href="#"> <span class="icon iconGuide" /> <p>入门指南</p> </a> </el-col> <el-col :span="8"> <a href="#"> <span class="icon iconHelp" /> <p>在线帮助手册</p> </a> </el-col> <el-col :span="8"> <a href="#"> <span class="icon iconTechnology" /> <p>联系技术支持</p> </a> </el-col> </el-row> </div> </el-card> </el-col> </el-row> </div> </template> <script> import { mapGetters } from 'vuex' export default { name: 'Dashboard', computed: { ...mapGetters([ 'name' ]) } } </script> <style lang="scss" scoped> .dashboard-container { margin: 10px; li { list-style: none; } .headImg { float: left; width: 100px; height: 100px; border-radius: 50%; background: #999; img { width: 100%; height: 100%; border-radius: 50%; } } .headInfoTip { padding: 25px 0 0; margin-left: 120px; p { padding: 0 0 15px; margin: 0; &.firstChild { font-size: 24px; } &.lastChild { font-size: 20px; color: #7f8c8d; } } } } .box-card { padding: 5px 10px; margin-top: 20px; .header { span { color: #2c3e50; font-size: 24px; } .item { color: #97a8be; float: right; padding: 3px 0; } } .headTit { span { border-bottom: 4px solid #8a97f8; padding-bottom: 10px; } } } .header-card{ position: relative; .header { position: absolute; right: 20px; top: 15px; z-index: 1; } } .advContent { background: #fff; border-radius: 5px 5px 0px 0px; .title { font-size: 16px; padding: 20px; font-weight: bold; border-bottom: solid 1px #ccc; } .contentItem { padding: 0 30px; min-height: 350px; .item { display: flex; padding:18px 0 10px; border-bottom: solid 1px #ccc; .col { color: #8a97f8; } img { width: 56px; height: 56px; border-radius: 50%; margin-right: 10px; } p{ padding: 0 0 8px; } } } } .noticeList { margin: 0; padding: 0; } .sideNav, .sideLink { padding: 30px 0 12px; .sideBtn { padding: 16px 26px; font-size:16px; margin: 10px 5px; } } .sideLink { text-align: center; .icon { display: inline-block; width: 76px; height: 76px; background: url('./../../assets/common/icon.png') no-repeat; } .iconGuide { background-position: 0 0; } .iconHelp { background-position: -224px 0; } .iconTechnology { background-position: -460px 0; } } </style>
通过上面的代码,我们得到了如下的页面
大家发现,我们预留了工作日历
和绩效指数
两个组件,我们会在后续的组件中进行开发
提交代码
首页用户资料显示
目标
:将首页的信息换成真实的用户资料
直接获取Vuex的用户资料即可
<script> import { createNamespacedHelpers } from 'vuex' const { mapState } = createNamespacedHelpers('user') export default { name: 'Dashboard', data() { return { defaultImg: require('@/assets/common/head.jpg'), } }, computed: { ...mapState(['userInfo']) } } </script>
在 vue视图中绑定
<div class="fl headL"> <div class="headImg"> <img :src="userInfo.staffPhoto"> </div> <div class="headInfoTip"> <p class="firstChild">早安,{ { userInfo.username }},祝你开心每一天!</p> <p class="lastChild">{ { userInfo.username }} | { { userInfo.companyName }}-{ { userInfo.departmentName }}</p> </div> </div>
除此之外,当我们加载图片失败的时候,图片地址存在,但是却不能显示,之前我们封装的图片错误指令可以应用
<img :src="userInfo.staffPhoto" v-imageerror="defaultImg">
工作日历组件封装
目标
封装一个工作日历组件在首页中展示
新建工作日历组件结构
工作日历的要求很简单,显示每个月的日期,可以设定日期的范围
我们可以基于Element组件el-calendar进行封装
代码如下 src/views/dashboard/components/work-calendar.vue
<template> <div> <el-row type="flex" justify="end"> <el-select v-model="currentYear" size="small" style="width: 120px" @change="dateChange"> <el-option v-for="item in yearList" :key="item" :label="item" :value="item">{ { item }}</el-option> </el-select> <el-select v-model="currentMonth" size="small" style="width: 120px;margin-left:10px" @change="dateChange"> <el-option v-for="item in 12" :key="item" :label="item" :value="item">{ { item }}</el-option> </el-select> </el-row> <el-calendar v-model="currentDate"> <template v-slot:dateCell="{ date, data }" class="content"> <div class="date-content"> <span class="text"> { { data.day | getDay }}</span> <span v-if="isWeek(date)" class="rest">休</span> </div> </template> </el-calendar> </div> </template> <script> export default { props: { startDate: { type: Date, default: () => new Date() } }, data() { return { currentMonth: null, // 当前月份 currentYear: null, // 当前年份 currentDate: null, yearList: [] } } } </script> <style lang="scss" scoped> ::v-deep .el-calendar-day { height: auto; } ::v-deep .el-calendar-table__row td, ::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev { border: none; } .date-content { height: 40px; text-align: center; line-height: 40px; font-size: 14px; } .date-content .rest { color: #fff; border-radius: 50%; background: rgb(250, 124, 77); width: 20px; height: 20px; line-height: 20px; display: inline-block; font-size: 12px; margin-left: 10px; } .date-content .text { width: 20px; height: 20px; line-height: 20px; display: inline-block; } ::v-deep .el-calendar-table td.is-selected .text { background: #409eff; color: #fff; border-radius: 50%; } ::v-deep .el-calendar__header { display: none; } </style>
实现工作日历逻辑
export default { filters: { getDay(value) { const day = value.split('-')[2] return day.startsWith('0') ? day.substr(1) : day } }, props: { startDate: { type: Date, default: () => new Date() } }, data() { return { currentMonth: null, // 当前月份 currentYear: null, // 当前年份 currentDate: null, yearList: [] } }, // 初始化事件 created() { // 处理起始时间 // 组件要求起始时间必须是 周一开始 以一个月为开始 this.currentMonth = this.startDate.getMonth() + 1 this.currentYear = this.startDate.getFullYear() // 根据当前的年 生成可选年份 前后各加5年 this.yearList = Array.from(Array(11), (value, index) => this.currentYear + index - 5 ) // 计算 当年当月的第一个周一 再加上 四周之后的一个月月份 this.dateChange() }, methods: { // 是否是休息日 isWeek(value) { return value.getDay() === 6 || value.getDay() === 0 }, // 年月份改变之后 dateChange() { const year = this.currentYear const month = this.currentMonth this.currentDate = new Date(`${year}-${month}-1`) // 以当前月的1号为起始 } } }
在主页中应用
// 导入 import WorkCalendar from './components/work-calendar'
components: { WorkCalendar // 注册 },
<!-- 放置日历组件 --> <work-calendar />
提交代码
封装雷达图图表显示在首页
目标
:封装一个echarts中的雷达图表显示在首页的绩效指数的位置
了解雷达图
封装雷达图插件
首页中,还有一个绩效指数的位置需要放置一个雷达图的图表,我们可以采用百度的echarts进行封装
第一步, 安装echarts图表
$ npm i echarts
echarts是一个很大的包,里面包含了众多图形,假设我们只使用雷达图,可以做按需加载
第二步, 新建雷达图组件,src/views/dashboard/components/radar.vue
<template> <!-- 雷达图 图表必须给高和宽度--> <div ref="myDiv" class="radar-echart" /> </template> <script> // 完成加载过程 // var echarts = require('echarts') var echarts = require('echarts/lib/echarts') // 引入echarts主模块 require('echarts/lib/chart/radar') // 引入雷达图 // 引入提示框和标题组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') require('echarts/lib/component/legend') export default { // 页面渲染完毕事件 mounted() { const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例 myChart.setOption({ title: { text: '基础雷达图' }, tooltip: {}, legend: { data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)'] }, radar: { // shape: 'circle', name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, // 每个区域的最高值 indicator: [ { name: '工作效率', max: 100 }, { name: '考勤', max: 100 }, { name: '积极性', max: 100 }, { name: '帮助同事', max: 100 }, { name: '自主学习', max: 100 }, { name: '正确率', max: 100 } ] }, series: [{ name: '预算 vs 开销(Budget vs spending)', type: 'radar', // areaStyle: {normal: {}}, data: [ { value: [10, 1, 100, 5, 100, 0], name: '张三' }, { value: [50, 50, 50, 50, 50, 10], name: '李四' } ] }] }) } } </script> <style> .radar-echart { width: 600px; height: 400px; } </style>
我们得到一个雷达图,对绩效指数进行统计
注意
:相关数据的缺失,所以这里我们进行的是模拟数据
在主页中引入使用
import Radar from './components/radar'
components: { Radar // 注册 },
<!-- 放置组件 --> <radar />
审批流程业务的基本介绍
什么是审批流程
提交一个离职审批
目标
: 提交一个离职的审批,并完成业务流转
离职弹层
<!-- 弹出层 --> <el-dialog :visible="showDialog" title="离职申请" @close="btnCancel"> <el-form ref="ruleForm" :model="ruleForm" status-icon label-width="110px" :rules="rules" > <!--离职表单--> <el-form-item label="离职时间" prop="end_time"> <el-date-picker v-model="ruleForm.exceptTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" /> </el-form-item> <el-form-item label="离职原因" prop="reason"> <el-input v-model="ruleForm.reason" type="textarea" :autosize="{ minRows: 3, maxRows: 8}" style="width: 70%;" placeholder="请输入内容" /> </el-form-item> </el-form> <el-row slot="footer" type="flex" justify="center"> <el-col :span="6"> <el-button size="small" type="primary" @click="btnOK">确定</el-button> <el-button size="small" @click="btnCancel">取消</el-button> </el-col> </el-row> </el-dialog>
显示弹层
<el-button class="sideBtn" @click="showDialog = true">加班离职</el-button>
加班数据及校验
showDialog: false, ruleForm: { exceptTime: '', reason: '', processKey: 'process_dimission', // 特定的审批 processName: '离职' }, rules: { exceptTime: [{ required: true, message: '离职时间不能为空' }], reason: [{ required: true, message: '离职原因不能为空' }] }
提交审批逻辑
import { startProcess } from '@/api/approvals' methods: { btnOK() { this.$refs.ruleForm.validate(async validate => { if (validate) { const data = { ...this.ruleForm, userId: this.userInfo.userId } await startProcess(data) this.$message.success('提交流程成功') this.btnCancel() } }) }, btnCancel() { this.showDialog = false this.$refs.ruleForm.resetFields() this.ruleForm = { exceptTime: '', reason: '', processKey: 'process_dimission', // 特定的审批 processName: '离职' } } }
配置审批列表的导航
<el-button class="sideBtn" @click="$router.push('/users/approvals')">审批列表</el-button> <el-button class="sideBtn" @click="$router.push('/users/info')">我的信息</el-button>
完成该流程的审批和流转
注意: 审批接口中的同意接口存在一定问题,可以测试 提交 /撤销 驳回等操作
提交代码
全屏插件的引用
目标:实现页面的全屏功能
全屏功能可以借助一个插件来实现
第一步,安装全局插件screenfull
$ npm i screenfull
第二步,封装全屏显示的插件·· src/components/ScreenFull/index.vue
<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" /> </div> </template> <script> import ScreenFull from 'screenfull' export default { methods: { // 改变全屏 changeScreen() { if (!ScreenFull.isEnabled) { // 此时全屏不可用 this.$message.warning('此时全屏组件不可用') return } // document.documentElement.requestFullscreen() 原生js调用 // 如果可用 就可以全屏 ScreenFull.toggle() } } } </script> <style> </style>
第三步,全局注册该组件 src/components/index.js
import ScreenFull from './ScreenFull' Vue.component('ScreenFull', ScreenFull) // 注册全屏组件
第四步,放置于layout/navbar.vue
中
<screen-full class="right-menu-item" />
.right-menu-item { vertical-align: middle; /* 修改为middle */ }
提交代码
本节任务
: 实现页面的全屏功能
动态主题的设置
目标
: 实现动态主题的设置
我们想要实现在页面中实时的切换颜色,此时页面的主题可以跟着设置的颜色进行变化
简单说明一下它的原理: element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的,所有的颜色都是基于几个基础颜色变量来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json
拿到 element-ui 的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态添加 style
标签来覆盖原有的 css 样式。
第一步, 封装颜色选择组件 ThemePicker
代码地址:@/components/ThemePicker。
注意:本章节重点在于集成,内部的更换主题可以先不用关心。
实现代码 src/ThemePicker/index.vue
<template> <el-color-picker v-model="theme" :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" class="theme-picker" popper-class="theme-picker-dropdown" /> </template> <script> const version = require('element-ui/package.json').version // element-ui version from node_modules const ORIGINAL_THEME = '#409EFF' // default color export default { data() { return { chalk: '', // content of theme-chalk css theme: '' } }, computed: { defaultTheme() { return this.$store.state.settings.theme } }, watch: { defaultTheme: { handler: function(val, oldVal) { this.theme = val }, immediate: true }, async theme(val) { const oldVal = this.chalk ? this.theme : ORIGINAL_THEME if (typeof val !== 'string') return const themeCluster = this.getThemeCluster(val.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) console.log(themeCluster, originalCluster) const $message = this.$message({ message: ' Compiling the theme', customClass: 'theme-message', type: 'success', duration: 0, iconClass: 'el-icon-loading' }) const getHandler = (variable, id) => { return () => { const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) let styleTag = document.getElementById(id) if (!styleTag) { styleTag = document.createElement('style') styleTag.setAttribute('id', id) document.head.appendChild(styleTag) } styleTag.innerText = newStyle } } if (!this.chalk) { const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` await this.getCSSString(url, 'chalk') } const chalkHandler = getHandler('chalk', 'chalk-style') chalkHandler() const styles = [].slice.call(document.querySelectorAll('style')) .filter(style => { const text = style.innerText return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) }) styles.forEach(style => { const { innerText } = style if (typeof innerText !== 'string') return style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) }) this.$emit('change', val) $message.close() } }, methods: { updateStyle(style, oldCluster, newCluster) { let newStyle = style oldCluster.forEach((color, index) => { newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) }) return newStyle }, getCSSString(url, variable) { return new Promise(resolve => { const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') resolve() } } xhr.open('GET', url) xhr.send() }) }, getThemeCluster(theme) { const tintColor = (color, tint) => { let red = parseInt(color.slice(0, 2), 16) let green = parseInt(color.slice(2, 4), 16) let blue = parseInt(color.slice(4, 6), 16) if (tint === 0) { // when primary color is in its rgb space return [red, green, blue].join(',') } else { red += Math.round(tint * (255 - red)) green += Math.round(tint * (255 - green)) blue += Math.round(tint * (255 - blue)) red = red.toString(16) green = green.toString(16) blue = blue.toString(16) return `#${red}${green}${blue}` } } const shadeColor = (color, shade) => { let red = parseInt(color.slice(0, 2), 16) let green = parseInt(color.slice(2, 4), 16) let blue = parseInt(color.slice(4, 6), 16) red = Math.round((1 - shade) * red) green = Math.round((1 - shade) * green) blue = Math.round((1 - shade) * blue) red = red.toString(16) green = green.toString(16) blue = blue.toString(16) return `#${red}${green}${blue}` } const clusters = [theme] for (let i = 0; i <= 9; i++) { clusters.push(tintColor(theme, Number((i / 10).toFixed(2)))) } clusters.push(shadeColor(theme, 0.1)) return clusters } } } </script> <style> .theme-message, .theme-picker-dropdown { z-index: 99999 !important; } .theme-picker .el-color-picker__trigger { height: 26px !important; width: 26px !important; padding: 2px; } .theme-picker-dropdown .el-color-dropdown__link-btn { display: none; } .el-color-picker { height: auto !important; } </style>
注册代码
import ThemePicker from './ThemePicker' Vue.component('ThemePicker', ThemePicker)
第二步, 放置于layout/navbar.vue
中
<!-- 放置主题插件 --> <theme-picker class="right-menu-item" />
提交代码
多语言实现
目标
实现国际化语言切换
初始化多语言包
本项目使用国际化 i18n 方案。通过 vue-i18n而实现。
第一步,我们需要首先国际化的包
$ npm i [email protected]
第二步,需要单独一个多语言的实例化文件 src/lang/index.js
import Vue from 'vue' // 引入Vue import VueI18n from 'vue-i18n' // 引入国际化的包 import Cookie from 'js-cookie' // 引入cookie包 import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包 import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包 Vue.use(VueI18n) // 全局注册国际化包 export default new VueI18n({ locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文 messages: { en: { ...elementEN // 将饿了么的英文语言包引入 }, zh: { ...elementZH // 将饿了么的中文语言包引入 } } })
上面的代码的作用是将Element的两种语言导入了
第三步,在main.js中对挂载 i18n的插件,并设置element为当前的语言
import locale from 'element-ui/lib/locale/lang/en' // lang i18n // 删除这一句 Vue.use(ElementUI, { locale }) // 修改成下面的
import i18n from './lang' // 设置element为当前的语言 Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }) new Vue({ el: '#app', router, store, i18n, render: h => h(App) })
引入自定义语言包
此时,element已经变成了zh,也就是中文,但是我们常规的内容怎么根据当前语言类型显示?
这里,针对英文和中文,我们可以提供两个不同的语言包 src/lang/zh.js , src/lang/en.js
该语言包,我们已经在资源中提供
第四步,在index.js中同样引入该语言包
import customZH from './zh' // 引入自定义中文包 import customEN from './en' // 引入自定义英文包 Vue.use(VueI18n) // 全局注册国际化包 export default new VueI18n({ locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文 messages: { en: { ...elementEN, // 将饿了么的英文语言包引入 ...customEN }, zh: { ...elementZH, // 将饿了么的中文语言包引入 ...customZH } } })
在左侧菜单中应用多语言包
自定义语言包的内容怎么使用?
第五步,在左侧菜单应用
当我们全局注册i18n的时候,每个组件都会拥有一个$t
的方法,它会根据传入的key,自动的去寻找当前语言的文本,我们可以将左侧菜单变成多语言展示文本
layout/components/SidebarItem.vue
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t('route.'+onlyOneChild.name)" />
注意:当文本的值为嵌套时,可以通过$t(key1.key2.key3...)
的方式获取
现在,我们已经完成了多语言的接入,现在封装切换多语言的组件
<span style="color:#fff;background-color:red">注意检查router/modules相关的路由文件里面的name是否定义了且是否和语言包里面键是否完全一致,如果不一致就会出现不能正常显示问题</span>
封装多语言插件
第六步,封装多语言组件 src/components/lang/index.vue
<template> <el-dropdown trigger="click" @command="changeLanguage"> <!-- 这里必须加一个div --> <div> <svg-icon style="color:#fff;font-size:20px" icon-class="language" /> </div> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item> <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> import Cookie from 'js-cookie' export default { methods: { changeLanguage(lang) { Cookie.set('language', lang) // 切换多语言 this.$i18n.locale = lang // 设置给本地的i18n插件 this.$message.success('切换多语言成功') } } } </script>
// src/component/index.js 中注册 import lang from './lang' Vue.component('lang', lang)
第七步,在Navbar组件中引入
<!-- 放置切换多语言 --> <lang class="right-menu-item" /> <!-- 放置主题 --> <theme-picker class="right-menu-item" /> <!-- 放置全屏插件 --> <screen-full class="right-menu-item" />
最终效果
提交代码
tab页的视图引入
目标
: 实现tab页打开路由的功能
当前我们实现的打开页面,看到一个页面之后,另一个页面就会关闭,为了显示更加有效率,我们可以引入多页签组件
多页签的组件的代码过于繁杂,开发实际需要的是集成和调用能力,所以我们只是将开发好的组件集成到当前的功能项中即可。
在资源目录中,
多页签
目录下放置的是 组件和vuex模块
第一步,将组件TagsView目录放置到src/components
, 并全局注册
import TagsView from './TagsView' Vue.component('TagsView', TagsView)
第二步,将Vuex模块tagsView.js
放置到 src/store/modules
并在store中引入该模块
import tagsView from './modules/tagsView' const store = new Vuex.Store({ modules: { app, settings, user, permission, tagsView }, getters })
第三步,在src/layout/Index.vue
中引入该组件
<template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div class="main-container"> <div :class="{'fixed-header':fixedHeader}"> <navbar /> <!-- 放置tabsview --> <tags-view /> </div> <app-main /> </div> </div> </template>
效果如下
提交代码