vue中使用Element主題自定義膚色

一、搭建好專案的環境。

二、根據elementui官網的自定義主題（來安裝【主題生成工具】。

三、在 element-variables.scss 檔案裡修改 $–color-primary:#409eff，即你想要的主題顏色。然後，執行主題編譯命令生成主題(et)，根目錄會生成乙個theme資料夾。

四、封裝動態換膚色themepicker.vue元件。

<

template
>
<
el-color-picker
class
="theme-picker"
popper-class
="theme-picker-dropdown"
v-model
="theme"
:size
="size"
>
el-color-picker
>
template
>
<
script
>
const version 
=require(
'element-ui/package.json
').version 
//element-ui version from node_modules
const original_theme ='
#409eff'//
default color
export 
default
, size: 
},data() 
},mounted() 
},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
.$emit(
'onthemechange
', val)
//存入localstorage
localstorage.setitem(
'tremepackers
',val);
if(this
.showsuccess) )
} else}},
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
>
<
style
>
.theme-picker .el-color-picker__trigger 
.theme-picker-dropdown .el-color-dropdown__link-btn 
style
>

六、換膚效果測試。（關閉瀏覽器再次開啟依舊是你所選中的主題膚色）

vue專案中更改element主題色

全域性安裝element theme cnpm i element theme g專案中安裝element theme chalk cnpm i element theme chalk d生成初始化檔案element variables.scss et i注意 若專案中未使用scss需先安裝sass...

Vue之在vue中使用render

使用components進行渲染得到 建立 vue 例項，得到 viewmodel var vm newvue methods components script body html 使用render 這裡 return 的結果，會 替換頁面中 el 指定的那個 容器 建立 vue 例項，得到 vi...

Vue開發中Element元件的使用問題

1.日期選擇器限制可選的時間範圍 1.1 藍色區域可以通過在元件內新增引數 default value 並且傳值從而實現預設現實的年月，傳值格式如2020 04，同時還可以通過 value format引數 控制資料想要的日期格式。引數使用如圖 1.2 紅色區域的日期的禁止選擇的實現首先如上圖再新增...