vue中button標(biāo)簽樣式和功能禁用的寫法
更新時間：2022年04月01日 11:01:17 作者：前熱火球員LeBron?James
這篇文章主要介紹了vue中button標(biāo)簽樣式和功能禁用的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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)過*/
.el-button--primary:hover {
background-color: rgb(178, 253, 144) !important;
}
/*鼠標(biāo)按下*/
.el-button--primary:focus {
background-color: rgb(159, 230, 240) !important;
}
還可以添加背景圖片
但每一個樣式后面都要添加!important即可改變按鈕的默認(rèn)樣式
按鈕的其他樣式 和平時一樣添加就好了
.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
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了VUE中使用Vue-resource完成交互，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了淺談Vue入門需掌握的知識，感興趣的同學(xué)參考下2021-04-04
vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進(jìn)度條打點
這篇文章主要給大家介紹了關(guān)于vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進(jìn)度條打點的相關(guān)資料,video.js是一款基于HTML5的網(wǎng)絡(luò)視頻播放器,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue cli 3.x 項目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3中響應(yīng)式的一些特殊處理，文中的示例代碼講解詳細(xì)，對我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04
本文主要介紹了vue+vite項目部署會遇到的幾個問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue+video.js實現(xiàn)視頻播放列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09