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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue3中引入、封裝和使用svg矢量圖的實現(xiàn)示例
SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實現(xiàn)示例,需要的朋友可以參考下2024-07-07vue如何動態(tài)設(shè)置class、動態(tài)設(shè)置style
這篇文章主要介紹了vue如何動態(tài)設(shè)置class、動態(tài)設(shè)置style,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能(promise封裝)
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06原生javascript中檢查對象是否為空示例實現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對象是否為空示例實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-11-11