日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

el-radio-group選中后再次點(diǎn)擊取消,及el-radio-button具有邊框懸浮問題解決

作者:ChangYan. 更新時間: 2023-07-08 編程語言

想達(dá)到的效果是:當(dāng)前el-radio已經(jīng)選中,然后再次點(diǎn)擊這個el-radio會取消選中。
直接看代碼

HTML

<el-radio-group v-model="search_overall_fdi_type">
   <el-radio-button label="cfdi" @click.native.prevent="overall_fdi_type_click('cfdi')">CFDI</el-radio-button>
   <el-radio-button label="dfdi" @click.native.prevent="overall_fdi_type_click('dfdi')">DFDI</el-radio-button>
</el-radio-group>

JS

    overall_fdi_type_click(value) {
      this.search_overall_fdi_type = value === this.search_overall_fdi_type ? '' : value
    },

然后就可以實(shí)現(xiàn)邏輯上的選中后再次點(diǎn)擊會取消選中。
但是在樣式上,選中和取消選中在外圍會有一個懸浮框的感覺,很影響美觀。所以要額外設(shè)置css
在這里插入圖片描述

CSS

::v-deep .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

然后就可以去掉懸浮框啦!
如圖,大功告成!
在這里插入圖片描述

原文鏈接:https://blog.csdn.net/changyana/article/details/128672782

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新