vue element echarts 換膚功能

2021-10-06 08:29:41 字數 1744 閱讀 2265

demo中的換膚效果沒有用到css預編譯處理

整體的思路是 預先定義好多套css樣式表分別放到static檔案中,根據按鈕切換在dom上掛載相對應的css,聽上去是個比較笨的方法,下面直接上**

2. 將預設的主題放在vuex中

import vue from 'vue'


import vuex from 'vuex'


//掛載vuex


vue.use(vuex)


//建立vuex物件


const store = new vuex.store(,


getters:,


get_elementname:(state)=>,


get_htmlthemeurl:(state)=>,


}})export default store
然後在mian.js中掛載vuex

import store from './store'


/* eslint-disable no-new */


new vue()
4.在index.html中預先定義好兩個link 用於更換不同的主題css檔案
5.在頁面上繫結乙個按鈕用作換膚的切換

6.echarts元件 在渲染時需要在vuex中獲取echarts主題的名稱,並需要重新整理頁面才會渲染新的主題檔案

var echarts = require("echarts/lib/echarts");


require("echarts/lib/chart/bar");


require("echarts/lib/chart/radar");


require("echarts/lib/component/tooltip");


require("echarts/lib/component/title");


import  from "vuex"


export default ,


props: {},


data() ,


tooltip: }},


legend: ,


toolbox: }},


grid: ,


xaxis: [


],yaxis: [


],series: [


,data: [120, 132, 101, 134, 90, 230, 210]},,


data: [220, 182, 191, 234, 290, 330, 310]},,


data: [150, 232, 201, 154, 190, 330, 410]},,


data: [320, 332, 301, 334, 390, 330, 320]


},},


areastyle: {},


data: [820, 932, 901, 934, 1290, 1330, 1320]}]


}};},watch: 


},computed: ),


},created() {},


mounted() ,


methods: 


}};
經測試換膚效果成

介面換膚技術

換膚技術原理 說到換膚就要提到介面庫，介面庫一般來說分2種，一種是基於傳統視窗控制代碼控制項的，還有一種是基於directui的。當然比較早的專業介面庫都是基於傳統視窗控制代碼控制項的,而這種介面庫實現換膚的方式一般是基於hook，大概原理是 1 安裝視窗過程hook 如wh cbt hook 準備...

element ui動態換膚

通過在elementui的框架基礎上使用colorpicker顏色選擇器進行動態換膚，多餘的話就不說了下述 能夠直接使用。動態換膚效果圖 展示詳情 el button dark content placement bottom v model theme class theme picker siz...

DevExpress動態換膚

1.首先新增devexpress.officeskins和devexpress.bonusskins 兩個引用。在main 函式之前進行 註冊 1 static class program 2 17 2.新增乙個父窗體，加乙個全域性靜態defaultlookandfeel 成員控制 其他所有的窗體都...