vue+element+echarts 换肤功能

demo中的换肤效果没有用到css预编译处理

整体的思路是 预先定义好多套css样式表分别放到static文件中,根据按钮切换在DOM上挂载相对应的CSS,听上去是个比较笨的方法,下面直接上代码

 

1.预先在准备好自己写好的css文件、element官方主题样式、echarts官方样式(这里下载是js格式)

vue+element+echarts 换肤功能_第1张图片

 

 

 

 

 

 

2. 将默认的主题放在vuex中

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        echThemeName:sessionStorage.getItem("echartTheme") || "essos", //echarts主题
        elementName:sessionStorage.getItem("elementtheme") || "static/elementThem2.css", //element主题
        htmlTheme:sessionStorage.getItem("htmlTheme") || "static/htmlTheme.css", //html主题


    },
    getters:{
        GEt_echThemeName:(state)=>{
            return state.echThemeName
        },
        Get_elementName:(state)=>{
            return state.elementName
        },
        Get_htmlThemeURl:(state)=>{
            return state.htmlTheme
        },

    }

})

export default store

然后在mian.js中挂载vuex

import store from './store'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

3.下面将echarts主题在vue.app中引入,这样全局的组件都可使用这个主题文件


4.在index.html中预先定义好两个link 用于更换不同的主题css文件


  
    
    
    
    
    vue换肤
  
  
    

5.在页面上绑定一个按钮用作换肤的切换

6.echarts组件 在渲染时需要在vuex中获取echarts主题的名称,并需要刷新页面才会渲染新的主题文件


                    
                    

你可能感兴趣的:(vue问题总结,vue.js,javascript,css3)