vue項(xiàng)目如何全局修改el-button樣式
更新時(shí)間：2022年07月20日 08:59:54 作者：公孫元二
這篇文章主要介紹了vue項(xiàng)目如何全局修改el-button樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue全局修改el-button樣式
修改前
效果圖：
代碼修改
在APP.vue文件，或者某個(gè).vue文件。
在沒有scoped的style標(biāo)簽里面修改：
<style lang="scss">
.el-button--primary{
color: #1686f5;
background-color: rgb(240, 248, 255);
border-color: rgb(148, 197, 238);
font-size: 14px;
&:hover {
color: rgb(240, 248, 255);
background-color: rgb(148, 197, 238);
border-color: rgb(148, 197, 238);
}
&:active {
color: rgb(240, 248, 255);
background-color: rgb(148, 197, 238);
border-color: rgb(148, 197, 238);
}
}
<style>樣式2
代碼：
.el-button--primary {
color: #1c242c;
background-color:#f2f6fc;
border: none;
font-size: 14px;
&:hover {
color: #2483ff;
background-color: rgb(242,246,252);
}
&:active {
color: #2483ff;
background-color: rgb(242,246,252);
}
}因?yàn)楸景咐薷牧藀rimary類型的el-button按鈕樣式，如果項(xiàng)目中使用了餓了么的this.$confirm，因?yàn)榇_定按鈕也是primary類型，所以需要調(diào)整primary類型按鈕的樣式，在App.vue文件(不帶scoped的style標(biāo)簽里寫入以下代碼)：
.confirmButton-reset{
// background: #fff !important;
// color: #606266 !important;
font-size: 12px;
// border-color: #DCDFE6;;
}在使用了confirm組件的地方，修改確定按鈕按鈕所使用的樣式class:
this.$confirm('確定要?jiǎng)h除？', '確認(rèn)信息', {
distinguishCancelAndClose: true,
confirmButtonText: '確定',
cancelButtonText: '取消',
confirmButtonClass: 'confirmButton-reset'
})
.then(() => {如果想給所有的el-button設(shè)置統(tǒng)一樣式，比如設(shè)置一樣的字體大小，代碼如下：
.el-button {
margin-top:3px;
font-size: 14px;
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3監(jiān)聽resize窗口事件(離開頁(yè)面要銷毀窗口事件)
這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽resize窗口事件(離開頁(yè)面要銷毀窗口事件)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-11-11
vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個(gè)標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)
本文主要介紹了element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
用electron 打包發(fā)布集成vue2.0項(xiàng)目的操作過程
這篇文章主要介紹了用electron 打包發(fā)布集成vue2.0項(xiàng)目的操作步驟,把electron 加入到自己項(xiàng)目中各種不兼容，升級(jí)版本踩坑無數(shù)個(gè)，今天通過本文給大家分享下詳細(xì)過程，需要的朋友可以參考下2022-10-10
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理2022-10-10
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下2017-12-12
如何刪除vue項(xiàng)目下的node_modules文件夾
這篇文章主要介紹了如何刪除vue項(xiàng)目下的node_modules文件夾，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧2023-05-05