17.vue 自定义主题
1.安装需要的相关依赖
npm i element-theme -g
npm i element-theme-chalk -D
2.初始化变量文件
et -i
项目根目录下生成
打卡此文件
修改变量
编译主题
et
3.引入主题
在main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入字体图标库
import './assets/fonts/iconfont.css'
import './plugins/element.js'
import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css'
import ElementUI from 'element-ui'
// 导入全局样式表
import './assets/scss/global.scss'
// 导入全局接口入口文件
import api from './api/index'
// 导入国际化i18n
import VueI18n from 'vue-i18n'
// 导入全局mock
import './mock'
Vue.config.productionTip = false
Vue.use(VueI18n) // 通过插件的形式挂载
Vue.use(ElementUI)
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
// this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./assets/lang/zh'), // 中文语言包
'en-US': require('./assets/lang/en') // 英文语言包
}
})
// 将导入的接口文件全局挂载在vue全局上
Vue.prototype.$api = api
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')
4.封装动态换肤色ThemePicker.vue组件
参考大神：
博客园：https://www.cnblogs.com/dengqichang/p/10364455.html
大神的博客地址
- ThemePicker.vue内容
<template>
<el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :size="size"> </el-color-picker>
</template>
<script>
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
export default {
name: 'ThemePicker',
props: {
default: {
// 初始化主题，可由外部传入
type: String,
// default: '#EB815B'
default: '' + localStorage.getItem('tremePackers') + ''
},
size: {
// 初始化主题，可由外部传入
type: String,
default: 'small'
}
},
data() {
return {
chalk: '', // content of theme-chalk css
theme: ORIGINAL_THEME,
showSuccess: true // 是否弹出换肤成功消息
}
},
mounted() {
if (this.default != null) {
this.theme = this.default
this.$emit('onThemeChange', this.theme)
this.showSuccess = false
}
},
watch: {
theme(val, oldVal) {
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
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
}
}
const chalkHandler = getHandler('chalk', 'chalk-style')
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
this.getCSSString(url, chalkHandler, 'chalk')
} else {
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('onThemeChange', val)
// 存入localStorage
localStorage.setItem('tremePackers', val)
if (this.showSuccess) {
this.$notify.success({
title: this.$t('lang.tip'),
message: this.$t('lang.optSuccess')
})
} else {
this.showSuccess = true
}
}
},
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, callback, variable) {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
callback()
}
}
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-picker .el-color-picker__trigger {
vertical-align: middle;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
}
</style>
5.导入组件
<template>
<header>
<!-- 头部左侧导航折叠按钮 -->
<div>
<i class="el-icon-s-fold" v-show="!isCollapse" @click="collapseMenu"></i>
<i class="el-icon-s-unfold" v-show="isCollapse" @click="collapseMenu"></i>
</div>
<!-- 右侧工具栏部分 -->
<div class="opt-wrapper">
<!-- 主题选择 -->
<div class="theme-picker">
<theme-picker></theme-picker>
</div>
<!-- 语言切换 -->
<div class="lang">
<el-dropdown :hide-on-click="false" @command="changeLang">
<span class="el-dropdown-link">{{ lang }}<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh-CN">{{ $t('lang.chinese') }}</el-dropdown-item>
<el-dropdown-item command="en-US">{{ $t('lang.engLish') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 是否全屏 -->
<div class="fullScreen">
<i class="iconfont icon-caozuo-quanping-shousuo" v-show="isFullscreen" @click="screen"></i>
<i class="iconfont icon-icon-GIS_quanping" v-show="!isFullscreen" @click="screen"></i>
</div>
<!-- 用户信息、退出登录 -->
<div>
<el-dropdown :hide-on-click="false" @command="handleCommand">
<span class="el-dropdown-link"> <img :src="avatar" alt="" class="avatar"/></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="userinfo"><i class="el-icon-info"></i>{{ $t('lang.personal') }}</el-dropdown-item>
<el-dropdown-item command="logout"><i class="el-icon-switch-button"></i>{{ $t('lang.logout') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</header>
</template>
<script>
// 导入选择主题组件
import ThemePicker from '@/components/ThemePicker/ThemePicker'
import { mapState } from 'vuex'
import screenfull from 'screenfull'
export default {
components: {
ThemePicker
},
data() {
return {
isFullscreen: false, // 是否是全屏
avatar: require('@/assets/images/admin-logo.jpg')
}
},
computed: {
...mapState({
isCollapse: state => state.tab.isCollapse,
lang: state => state.header.lang
})
},
created() {
// 获取刷新之前的语言信息
const sessionLang = JSON.parse(sessionStorage.getItem('currentLang'))
console.log(sessionLang)
if (sessionLang !== null) {
// 获取到存储的路由列表之后，将信息利用vuex进行存储
if (sessionLang.currentLang === 'EngLish') {
this.$i18n.locale = 'en-US'
this.$store.commit('changeLang', 'en-US')
}
if (sessionLang.currentLang === '中文') {
this.$i18n.locale = 'zh-CN'
this.$store.commit('changeLang', 'zh-CN')
}
}
},
mounted() {
// 刷新之前存储当前语言信息
window.addEventListener('beforeunload', e => {
sessionStorage.setItem(
'currentLang',
JSON.stringify({
currentLang: this.lang
})
)
})
},
methods: {
// 退出方法
handleCommand(command) {
if (command === 'logout') {
sessionStorage.clear()
sessionStorage.removeItem('tabs')
this.$router.push('/login')
window.location.reload()
}
if (command === 'userinfo') {
this.$router.push('/userinfo')
const userinfo = {
path: '/userinfo',
name: 'userinfo',
label: '个人信息',
icon: 'info'
}
this.$store.commit('selectMenu', userinfo)
}
this.$message.success('click on item ' + command)
},
// 控制左侧导航栏开启/关闭事件
collapseMenu() {
this.$store.commit('collapseMenu')
},
// 切换语言
changeLang(command) {
if (command === 'zh-CN') {
this.$i18n.locale = 'zh-CN'
}
if (command === 'en-US') {
this.$i18n.locale = 'en-US'
}
this.$store.commit('changeLang', command)
},
// 控制是否是全屏还是非全屏
screen() {
// 如果不允许进入全屏，发出不允许提示
// if (!screenfull.enabled) {
// this.$message('您的浏览器不能全屏')
// return false
// }
screenfull.toggle()
this.isFullscreen = !screenfull.isFullscreen
// console.log(screenfull.isFullscreen)
// this.$message.success('全屏啦')
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/common/header.scss';
</style>