vue 根据网站路由判断页面主题色

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

需求：

不同品牌对应不同版本配色

做法：

根据域名带的参数判断进入哪个品牌，对应哪个版本

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import MintUI from 'mint-ui'
import { Indicator } from 'mint-ui'
import { getUrls } from '@/util/utils'
import 'mint-ui/lib/style.css'
import './css/index.css'
Vue.use(MintUI)
//添加请求拦截器 loading
axios.interceptors.request.use(function (config) {
  Indicator.open({
    text: '加载中...',
    spinnerType: 'fading-circle'
  })
  return config
}),function (error) {
  Indicator.close()
  return Promise.reject(error)
}
axios.interceptors.response.use(function (config) {
  Indicator.close()
  return config
}),function (error) {
  return Promise.reject(error)
}
Vue.prototype.$http = axios
Vue.prototype.getUrls = getUrls
router.beforeEach((to,from,next) => {
  if (sessionStorage.getItem('basecolor')) {
    document.documentElement.style.setProperty("--color", sessionStorage.getItem('basecolor'))
    next()
  }
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　在util.js中

export function getUrls() {
  let colorValue
  let url = window.location.href
  let urlArr = url.split('?')
  let appU = urlArr[0].split('/')
  let styles = getComputedStyle(document.documentElement)
  if (appU[appU.length-1] === 'login') {
    colorValue = styles.getPropertyValue('--OLAY')
    sessionStorage.setItem('basecolor', colorValue)
    this.$router.push('/login')
  } else if (appU[appU.length-1] === 'resetPassword') {
    colorValue = styles.getPropertyValue('--pampers')
    sessionStorage.setItem('basecolor', colorValue)
    this.$router.push('/login')
  }
}

　　在App.vue

<template>
  <div >
    <router-view/>
  </div>
</template>
<script>
  export default {
  name: 'App',
    created() {
      this.getUrls()
    }
}
</script>
<style>
  :root {
    --OLAY: rgb(237,202,138);
    --pampers: rgb(5,183,185);
    --color: #fff;
  }
  #app{
    height: 100%;
  }
</style>

以上是 vue 根据网站路由判断页面主题色 的全部内容， 来源链接： utcz.com/z/378893.html

回到顶部