問(wèn)題：

????????最近開(kāi)發(fā)一個(gè)后臺(tái)項(xiàng)目的時(shí)候用到了單選框，而客戶的要求是默認(rèn)選擇一個(gè)選項(xiàng)，然后點(diǎn)擊可以取消選中。不想自己在手寫(xiě)一個(gè)Radio組件，只能在elementui的單選框上修改一下下啦。

1.?.native的作用

.native的作用是在給組件添加修飾符時(shí)，將修飾符轉(zhuǎn)為原生的按鍵修飾符。在使用組件庫(kù)的時(shí)候，因?yàn)榻M件沒(méi)有自己定義一個(gè)@click事件，所以需要加一個(gè).native，這樣就調(diào)用了原生js的事件

解決方法：

第一種(不推薦)：

?????????思路：使用.native觸發(fā)原生js的點(diǎn)擊事件，然后在用prevent來(lái)阻止組建的默認(rèn)事件。但是這種方法會(huì)造成樣式缺失。

<!-- template-->
<el-radio-group v-model="checkRadio"  @click.native.prevent="pendingRes($event)">
    <el-radio :label="item.id" v-for="item in pendingItems" :key="item.id" >
        {{ item.label }}
    </el-radio>
</el-radio-group>

data() {
    checkRadio:0
}

//js
pendingRes(event) {
    if (event.target.tagName === "INPUT") {
         let id = event.target.value
         if (this.checkRadio != id) {
             console.log('選中')
        } else {
             console.log('取消選中')
          this.checkRadio = 0
        }
    }
},

?tips：點(diǎn)擊事件觸發(fā)了一次，但是造成了選中后的樣式丟失

第二種(推薦)：

????????思路：只使用native來(lái)觸發(fā)原生js事件，然后通過(guò)原生事件的作用域來(lái)區(qū)分是否點(diǎn)擊選擇按鈕。

<!-- template-->
<el-radio-group v-model="checkRadio"  @click.native.prevent="pendingRes($event)">
    <el-radio :label="item.id" v-for="item in pendingItems" :key="item.id" >
        {{ item.label }}
    </el-radio>
</el-radio-group>

data() {
    checkRadio:0
}

//js
pendingRes(event) {
    if (event.target.tagName === "INPUT") {
         let id = event.target.value
         if (this.checkRadio != id) {
             console.log('選中')
        } else {
             console.log('取消選中')
          this.checkRadio = 0
        }
    }
},

tips：事件觸發(fā)了兩次，樣式未丟失。

因?yàn)樵鷆lick事件會(huì)執(zhí)行兩次，第一次在label標(biāo)簽上，第二次在input標(biāo)簽，?這個(gè)時(shí)候我們就可以以這個(gè)來(lái)區(qū)分

總結(jié)：

1.兩種方法都可以達(dá)到取消選中的要求。

2.不在意樣式的選用第一種，要求樣式的選擇第二種?。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-784433.html

到了這里，關(guān)于Elementui Radio單選框取消選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！