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

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

 更新時間:2022年10月27日 14:38:44   作者:張鑠洋  
這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設(shè)置默認(rèn)值的操作方法,代碼分為html部分和css修改樣式代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

效果

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的v-if使用方法

    圖文講解vue的v-if使用方法

    在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識點,有興趣的朋友們跟著學(xué)習(xí)下。
    2019-02-02
  • 前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片

    前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片

    在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • Vue3中引入、封裝和使用svg矢量圖的實現(xiàn)示例

    Vue3中引入、封裝和使用svg矢量圖的實現(xiàn)示例

    SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實現(xiàn)示例,需要的朋友可以參考下
    2024-07-07
  • vue項目中onscroll的坑及解決

    vue項目中onscroll的坑及解決

    這篇文章主要介紹了vue項目中onscroll的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue如何動態(tài)設(shè)置class、動態(tài)設(shè)置style

    vue如何動態(tài)設(shè)置class、動態(tài)設(shè)置style

    這篇文章主要介紹了vue如何動態(tài)設(shè)置class、動態(tài)設(shè)置style,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能(promise封裝)

    vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能(promise封裝)

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-01-01
  • Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼

    Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼

    本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • 原生javascript中檢查對象是否為空示例實現(xiàn)

    原生javascript中檢查對象是否為空示例實現(xiàn)

    這篇文章主要為大家介紹了原生javascript中檢查對象是否為空示例實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2021-11-11
  • vue如何動態(tài)修改meta的title

    vue如何動態(tài)修改meta的title

    這篇文章主要介紹了vue如何動態(tài)修改meta的title,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue清空數(shù)組的幾個方式(小結(jié))

    vue清空數(shù)組的幾個方式(小結(jié))

    本文主要介紹了vue清空數(shù)組的幾個方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12

最新評論