欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)過*/
.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)文章

最新評(píng)論