網(wǎng)站首頁 編程語言 正文
想達(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
- 上一篇:沒有了
- 下一篇:沒有了
相關(guān)推薦
- 2022-01-16 ES6新增聲明格式、變量解構(gòu)賦值及模板字符串
- 2022-01-27 laravel6.2多用戶認(rèn)證分不同用戶表進(jìn)行驗(yàn)證登錄認(rèn)證
- 2022-03-16 .Net?6簡介并和之前版本寫法做對比_基礎(chǔ)應(yīng)用
- 2023-01-19 GO的基礎(chǔ)知識掃盲注意事項(xiàng)_Golang
- 2022-06-12 Python裝飾器的定義和使用詳情_python
- 2023-03-22 Python利用模糊哈希實(shí)現(xiàn)對比文件相似度_python
- 2022-09-15 Pycharm虛擬環(huán)境創(chuàng)建并使用命令行指定庫的版本進(jìn)行安裝_python
- 2023-07-18 獲取Linux和windows的MAC地址
- 欄目分類
-
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支