1、换肤的点击事件+缓存
/*点击改变主题样式*/
change(theme) {
if (this.themetype == 'dark') {
document.documentElement.setAttribute("data-theme", 'light');
this.themetype = 'light'
console.log('改变为白色主题')
this.BLCcloseTable() //换肤时关闭数据视图方法,在main.js里定义
} else {
document.documentElement.setAttribute("data-theme", 'dark');
this.themetype = 'dark'
console.log('改变为深色主题')
this.BLCcloseTable()
}
// ----加入你所需的key和value值,缓存,main.js内定义的
this.resetSetItem('setThemetype', this.themetype);
},
2、main.js+chart
/*实时获取sessionStorage的值*/
Vue.prototype.resetSetItem = function(key, newVal) {
if (key === 'setThemetype') {//key值自定义
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function(k, val) {
sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, newVal);
}
}
/*数据视图关闭*/
//bottomleftchart
Vue.prototype.BLCcloseTable = function() {
const domId = document.getElementById('BLCcloseData')//BLCcloseData是chart里加的
if (domId !== null) {
const domParent =