通過在elementui的框架基礎上使用colorpicker顏色選擇器進行動態換膚，多餘的話就不說了下述**能夠直接使用。
動態換膚效果圖：
>展示詳情<
/el-button>
"dark" content=
"**" placement=
"bottom"
>
v-model=
"theme"
class
="theme-picker"
size=
"small"
popper-
class
="theme-picker-dropdown"
/>
<
/el-tooltip>
"showdetails"
>
<
/showdetails>
<
/div>
<
/template>
const version =
require
('element-ui/package.json'
).version // element-ui version from node_modules
const
original_theme
='#409eff'
// default color
export
default},
watch:
styletag.innertext = newstyle
}}const chalkhandler =
gethandler
('chalk'
,'chalk-style')if
(!this
.chalk)
/lib/theme-chalk/index.css`
this
.getcssstring
(url, chalkhandler,
'chalk')}
else
const styles =
.slice
.call
(document.
queryselectorall
('style'))
.filter
(style =>
) styles.
foreach
(style =>
= style
if(typeof innertext !==
'string'
)return
style.innertext =
this
.updatestyle
( innertext,
originalcluster,
themecluster
)})this
.$message()
}}, methods:
)return newstyle
},getcssstring
(url, callback, variable)
]+}/,''
)callback()
}}xhr.
open
('get'
, url)
xhr.
send()
},getthemecluster
(theme)
else$$
` }
}const
shadecolor
=(color, shade)
=>$$
` }
const clusters =
[theme]
for(
let i =
0; i <=
9; i++
) clusters.
push
(shadecolor
(theme,
0.1)
)return clusters
}}}<
/script>
vue 實現主題換膚 element ui
站在巨人的肩膀上開發之主題換膚 npm i webpack theme color replacer d2.1 vue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme colo...
vue 實現主題換膚 element ui
npm i webpack theme color replacer dvue.config.jsconst webpack require webpack const themecolorreplacer require webpack theme color replacer const for...
Element UI換膚解決方案
vue之elementuielementui 動態換膚 theme chalk preview 注意的問題 有的時候我們會對elementui樣式進行重寫。那麼這個時候如果沒有自定義class去包裹elementui的class去寫的話，就會造成，直接你重寫的樣式被直接覆蓋。1 對於覆蓋自己自定義e...