vue中button標(biāo)簽樣式和功能禁用的寫法
更新時(shí)間：2022年04月01日 11:01:17 作者：前熱火球員LeBron?James
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
button標(biāo)簽樣式和功能禁用
需求：常用的表格編輯功能，都是只有選中某行數(shù)據(jù)才能顯示樣式編輯和內(nèi)容編輯，不選中為灰度且不能編輯（次編輯一般為彈框修改內(nèi)容）
1.不選中情況下
2.選中情況下
3.代碼
樣式禁用：
:class="{disable: selections.length == 0}"功能禁用：
:disabled="selections.length == 0"
“selections.length == 0”為滿足條件
vue el-button樣式自定義
按鈕的三種狀態(tài)
/* 更改elememt-ui地固定樣式 */
/*按鈕的背景顏色樣式*/
.el-button--primary {
background-color: rgb(247, 146, 146) !important;
}
/*鼠標(biāo)經(jīng)過(guò)*/
.el-button--primary:hover {
background-color: rgb(178, 253, 144) !important;
}
/*鼠標(biāo)按下*/
.el-button--primary:focus {
background-color: rgb(159, 230, 240) !important;
}
還可以添加背景圖片
但每一個(gè)樣式后面都要添加!important即可改變按鈕的默認(rèn)樣式
按鈕的其他樣式 和平時(shí)一樣添加就好了
.el-button--primary {
background-color: #105EED !important;
color: white !important;
font-size: 20px;
height: 66px;
}
用按鈕切換界面
<el-button type="info" data-id="2" plain :style="{'background-color': tab == 2 ? '#839DB9' : '','color': tab == 2 ? 'white' : 'black'} " @click="tabChange">11111</el-button>
<el-button type="info" data-id="3" plain :style="{'background-color': tab == 3 ? '#839DB9' : '','color': tab == 3 ? 'white' : 'black'} " @click="tabChange">2222</el-button>
<div v-show="tab==2" class="width48"></div>
<div v-show="tab==3" class="width48"></div>
tabChange(e) {
let tabid = e.currentTarget.dataset.id
this.tab = tabid
},
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點(diǎn)介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下2023-02-02
手把手教你如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目
Vue可以直接集成html,Vue就是前端框架,使用Vue做前端開發(fā)效率非常高,下面這篇文章主要給大家介紹了關(guān)于如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue中EpicEditor和vue-quill-editor的使用詳解
EpicEditor和Vue-quill-editor都是基于Quill.js的富文本編輯器,并且都提供了許多強(qiáng)大的功能,下面我們就來(lái)介紹一下二者的具體使用,感興趣的小伙伴可以了解一下2023-11-11
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場(chǎng)景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價(jià)值，希望對(duì)2022-09-09
詳解如何在vue項(xiàng)目中設(shè)置首頁(yè)
這篇文章主要給大家介紹如何在vue項(xiàng)目中設(shè)置首頁(yè),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue3如何直接修改reactive定義的變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05