vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的方法
效果

HTML
<el-radio-group v-model="form.radio">
<el-radio-button label="0">指定</el-radio-button>
<el-radio-button label="1">認(rèn)領(lǐng)</el-radio-button>
<el-radio-button label="2">自薦</el-radio-button>
</el-radio-group>CSS 修改樣式
::v-deep .el-radio-button__inner {
width: 100px;
height: 36px;
border: 0 !important;
font-size: 14px;
font-weight: 400;
color: #696969;
line-height: 14px;
outline: none;
box-shadow: none;
}
// 修改激活后的樣式
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
background: #f2f2f2;
border: 0 !important;
color: #696969;
line-height: 14px;
outline: none;
box-shadow: none;
}設(shè)置默認(rèn)值
data () {
return {
taskForm: {
taskTypeRadio: 0
},
}
}el-radio-button自定義樣式和激活樣式
需求是這樣的

用的是el-radio-button
<el-radio-group v-model="staffInfo.sex">
<el-radio-button label="1">男</el-radio-button>
<el-radio-button label="2">女</el-radio-button>
</el-radio-group>樣式修改
::v-deep.el-radio-button{
margin-right: 15px;
border-radius:4px;
.el-radio-button__inner {//修改按鈕樣式
width: 120px;
height: 42px;
background: #F7F8FA;
color:#333;
border: 0 !important;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {// 修改按鈕激活樣式
color: #fff;
background-color: #f63;
border-color: #f63;
box-shadow: -1px 0 0 0 #f63;
}
}到此這篇關(guān)于vue2 自定義 el-radio-button 的樣式, 并設(shè)置默認(rèn)值的文章就介紹到這了,更多相關(guān)vue2自定義 el-radio-button樣式,內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例
SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項(xiàng)目開發(fā)過程中,我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例,需要的朋友可以參考下2024-07-07
vue如何動(dòng)態(tài)設(shè)置class、動(dòng)態(tài)設(shè)置style
這篇文章主要介紹了vue如何動(dòng)態(tài)設(shè)置class、動(dòng)態(tài)設(shè)置style,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能(promise封裝)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)壓縮圖片預(yù)覽并上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-11-11
vue如何動(dòng)態(tài)修改meta的title
這篇文章主要介紹了vue如何動(dòng)態(tài)修改meta的title,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue清空數(shù)組的幾個(gè)方式(小結(jié))
本文主要介紹了vue清空數(shù)組的幾個(gè)方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12

