vue3 Element Plus按鈕點擊之後顏色不會還原的解決方案

来源:https://www.cnblogs.com/cn-zjb/archive/2022/08/03/16547304.html
-Advertisement-
Play Games

vuex狀態管理 概述 vuex主要由state,mutations,actions,getters四部分構成(modules本文暫不闡述) state 全局狀態,只讀 組件讀取state方式 根組件上引入並掛載store對象,其他組件在計算屬性通過$store獲取狀態 可以在計算屬性上使用mapS ...


思路:Element Plus提供了樣式變數,我的解決思路就是修改其樣式變數。

新建外部樣式 xxx.css

加入內容:

.el-button--primary {
--el-button-bg-color: #409eff;
--el-button-hover-bg-color: #409eff;
}
.el-button--primary:hover {
--el-button-hover-bg-color: #79bbff;
}

.el-button--warning.is-plain {
--el-button-bg-color: #fdf6ec;
--el-button-hover-text-color: #e6a23c;
--el-button-hover-bg-color: #fdf6ec;
}
.el-button--warning.is-plain:hover {
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: #e6a23c;
}
.el-button--danger.is-plain {
--el-button-bg-color: #fef0f0;
--el-button-hover-text-color: #f56c6c;
--el-button-hover-bg-color: #fef0f0;
}
.el-button--danger.is-plain:hover {
--el-button-hover-text-color: #fff;
--el-button-hover-bg-color: #f56c6c;
}


然後將xxx.css 引入到頁面中。註:不知道怎麼滴,全局引入頁面的按鈕不起作用,需要的單個頁面中引入。
以上內容只修改部分按鈕的點擊效果,如需修改多個按鈕,依次添加。

如有更好的解決思路和方案歡迎回覆,
如有更好的解決思路和方案歡迎回覆,
如有更好的解決思路和方案歡迎回覆
如有更好的解決思路和方案歡迎回覆,

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 七夕情人節到了,各種App都要忙著上新,抓住互聯網產品的節日熱點,結合應用的類別進行活動營銷。比如購物類App會在節日進行大促;旅游類App會推出各種優惠活動;短視頻和拍照App會推出各種節日限定特效、專屬貼紙等。 尤其是游戲類App,具有較強的社交屬性,在節日熱點一般都會進行版本更新,上線新皮膚新 ...
  • 接上一篇 V8 中的快慢屬性,本篇分析V8 中的快慢數組,瞭解數組全填充還是帶孔、快慢數組、快慢轉化、動態擴縮容等等。 ...
  • BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) window 概述: window是頂層對象 屬於golbal對象。他是 ...
  • 對象及日期定時器 Date日期 日期對象的定義(使用new關鍵詞) 1.獲取當前的時間(本地的時間)!!! var date = new Date() //不傳參就是獲取當前時間 2.獲取指定的時間 var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的 ...
  • 1、Element簡介 Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫,用於快速構建網頁 Element提供了很多組件(組成網頁的部件)供我們使用。 官方網站 https://element.eleme.cn/#/zh-CN 2、快速入門 2.1、將相關的element-ui ...
  • Ajax&Vue 1、Ajax 1.1、概述 AJAX(Asynchronous JavaScript And XML):非同步的JavaScript和XML 作用 1.與伺服器進行數據交換:通過ajax可以給伺服器發送請求,伺服器將數據直接響應回給瀏覽器。 如圖是沒使用Ajax的時候,各個請求之間的 ...
  • svg中有一個標簽path,主要表示路徑的意思,當我們畫一個半圓的時候,如圖: <svg> <!-- 背景布 --> <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="black" stroke-width="1" /> <!-- 半圓對象 ...
一周排行
    -Advertisement-
    Play Games
  • 一、openKylin簡介 openKylin(開放麒麟) 社區是在開源、自願、平等和協作的基礎上,由基礎軟硬體企業、非營利性組織、社團組織、高等院校、科研機構和個人開發者共同創立的一個開源社區,致力於通過開源、開放的社區合作,構建桌面操作系統開源社區,推動Linux開源技術及其軟硬體生態繁榮發展。 ...
  • 簡介 Flurl是一個用於構建基於HTTP請求的C#代碼的庫。它的主要目的是簡化和優雅地處理網路請求(只用很少的代碼完成請求)。Flurl提供了一種簡單的方法來構建GET、POST、PUT等類型的請求,以及處理響應和異常。它還提供了一些高級功能,如鏈式調用、緩存請求結果、自動重定向等。本文將介紹Fl ...
  • 一:背景 1. 講故事 最近也挺奇怪,看到了兩起 CPU 爆高的案例,且誘因也是一致的,覺得有一些代表性,合併分享出來幫助大家來避坑吧,閑話不多說,直接上 windbg 分析。 二:WinDbg 分析 1. CPU 真的爆高嗎 這裡要提醒一下,別人說爆高不一定真的就是爆高,我們一定要拿數據說話,可以 ...
  • 剛開始寫文章,封裝Base基類的時候,添加了trycatch異常塊,不過當時沒有去記錄日誌,直接return了。有小伙伴勸我不要吃了Exception 其實沒有啦,項目剛開始,我覺得先做好整體結構比較好。像是蓋樓一樣。先把樓體建造出來,然後再一步一步的美化完善。 基礎的倉儲模式已經ok,Autofa ...
  • 框架目標 什麼是框架,框架能做到什麼? 把一個方向的技術研發做封裝,具備通用性,讓使用框架的開發者用起來很輕鬆。 屬性: 通用性 健壯性 穩定性 擴展性 高性能 組件化 跨平臺 從零開始-搭建框架 建立項目 主鍵查詢功能開發 綁定實體 一步一步的給大家推導: 一邊寫一邊測試 從零開始--搭建框架 1 ...
  • 大家好,我是沙漠盡頭的狼。 本方首發於Dotnet9,介紹使用dnSpy調試第三方.NET庫源碼,行文目錄: 安裝dnSpy 編寫示常式序 調試示常式序 調試.NET庫原生方法 總結 1. 安裝dnSpy dnSpy是一款功能強大的.NET程式反編譯工具,可以對.NET程式進行反編譯,代替庫文檔的功 ...
  • 在`Windows`操作系統中,每個進程的虛擬地址空間都被劃分為若幹記憶體塊,每個記憶體塊都具有一些屬性,如記憶體大小、保護模式、類型等。這些屬性可以通過`VirtualQueryEx`函數查詢得到。該函數可用於查詢進程虛擬地址空間中的記憶體信息的函數。它的作用類似於`Windows`操作系統中的`Task... ...
  • 背景介紹 1,最近有一個大數據量插入的操作入庫的業務場景,需要先做一些其他修改操作,然後在執行插入操作,由於插入數據可能會很多,用到多線程去拆分數據並行處理來提高響應時間,如果有一個線程執行失敗,則全部回滾。 2,在spring中可以使用@Transactional註解去控制事務,使出現異常時會進行 ...
  • 線程(thread)是操作系統能夠進行運算調度的最小單位。它被包含在進程之中,是進程中的實際 運作單位。一條線程指的是進程中一個單一順序的控制流,一個進程中可以併發多個線程,每條線 程並行執行不同的任務。 ...
  • 發現Java 21的StringBuilder和StringBuffer中多了repeat方法: /** * @throws IllegalArgumentException {@inheritDoc} * * @since 21 */ @Override public StringBuilder ...