Element?el-tag標(biāo)簽圖文實(shí)例詳解
1. 前言
標(biāo)簽經(jīng)常用來(lái)描述對(duì)象的一個(gè)、或者多個(gè)同類屬性。
例如描述用戶的愛(ài)好，描述用戶擁有的角色。
el-tag提供了動(dòng)態(tài)刪除、新增標(biāo)簽的功能，所以非常適合使用在動(dòng)態(tài)處理用戶屬性的場(chǎng)景。
2. 基本用法
代碼如下：
基本用法<br>
<el-tag>籃球</el-tag>
使用el-tag即可創(chuàng)建一個(gè)標(biāo)簽，效果如下：
3. 調(diào)整顏色
通過(guò)type屬性可以調(diào)整標(biāo)簽顏色：
調(diào)整顏色<br>
<el-tag>默認(rèn)色</el-tag> |
<el-tag type="success">success色</el-tag> |
<el-tag type="info">info色</el-tag> |
<el-tag type="warning">warning色</el-tag> |
<el-tag type="danger">dange色</el-tag>
效果如下：
4. 調(diào)整尺寸
通過(guò)size屬性可以調(diào)整標(biāo)簽的尺寸大?。?/p>
調(diào)整尺寸<br>
<el-tag>默認(rèn)</el-tag> |
<el-tag size="medium">中等</el-tag> |
<el-tag size="small">小型</el-tag> |
<el-tag size="mini">超小</el-tag>
效果如下：
5. 調(diào)整主題
el-tag還支持不同風(fēng)格的主題，通過(guò)effect屬性即可調(diào)整，其中dark表示深色主題、light表示淺色主題、plain表示樸素主題：
調(diào)整主題<br>
<el-tag type="success">默認(rèn)主題</el-tag> |
<el-tag type="success" effect="dark">dark主題</el-tag> |
<el-tag type="success" effect="light">light主題</el-tag> |
<el-tag type="success" effect="plain">plain主題</el-tag>
效果如下：
6. 數(shù)據(jù)綁定
可以使用v-for動(dòng)態(tài)綁定一個(gè)數(shù)組：
數(shù)據(jù)綁定<br>
<el-tag v-for="item in hobbies">{{item}}</el-tag>
數(shù)據(jù)區(qū)域定義如下：
data() {
return {
hobbies: ['籃球', '足球', '排球'],
}
},
效果如下：
7. 動(dòng)態(tài)移除
通過(guò)設(shè)置屬性closable，可以在標(biāo)簽右側(cè)顯示一個(gè)刪除圖標(biāo)，點(diǎn)擊該圖標(biāo)后，會(huì)觸發(fā)@close綁定的方法。
動(dòng)態(tài)移除<br>
<el-tag v-for="item in hobbies" closable @close="handleClose(item)">{{item}}</el-tag>
方法代碼：
handleClose(item) {
let _this = this;
for (let i = 0; i < _this.hobbies.length; i++) {
if (_this.hobbies[i] == item) {
_this.hobbies.splice(i, 1);
break;
}
}
},
點(diǎn)擊刪除后，會(huì)從數(shù)組移除相應(yīng)的元素，所以界面上對(duì)應(yīng)的標(biāo)簽也會(huì)消失。
8. 動(dòng)態(tài)新增
通過(guò)@click指定一個(gè)方法，點(diǎn)擊方法后彈窗輸入新標(biāo)簽項(xiàng)的內(nèi)容，確定后將輸入內(nèi)容加入標(biāo)簽綁定的數(shù)組，就可以實(shí)現(xiàn)動(dòng)態(tài)新增了：
動(dòng)態(tài)新增<br>
<el-tag v-for="item in hobbies">{{item}}</el-tag> |
<el-tag type="success" @click="btnAdd">新增</el-tag>
方法代碼：
btnAdd() {
let _this = this;
_this.$prompt('請(qǐng)輸入您的愛(ài)好', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
}).then(({ value }) => {
_this.hobbies.push(value);
})
}
點(diǎn)擊新增標(biāo)簽，即可彈窗，點(diǎn)擊確定后，即可添加新標(biāo)簽：
9. 小結(jié)
標(biāo)簽在日常開(kāi)發(fā)工作中，還是比較常用的。el-tag封裝的非常簡(jiǎn)單利索，推薦！
補(bǔ)充：Vue對(duì)Element中的el-tag添加@click事件無(wú)效
在做評(píng)論模塊的時(shí)候，想著對(duì)el-tag元素添加點(diǎn)擊事件，發(fā)現(xiàn)無(wú)法觸發(fā)，代碼如下所示
<el-tag type="error" @click="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
我們?cè)邳c(diǎn)擊el-tag標(biāo)簽的時(shí)候，無(wú)法觸發(fā)其點(diǎn)擊事件
解決方法
通過(guò)查閱資料發(fā)現(xiàn)官方給定了解答
也就是所，必須使用@click.native才能夠觸發(fā)點(diǎn)擊行為，而對(duì)于button，直接使用@click即可，修改后的代碼如下所示，能夠正常完成點(diǎn)擊事件了~
<el-tag type="error" @click.native="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
到此這篇關(guān)于Element el-tag標(biāo)簽的文章就介紹到這了,更多相關(guān)Element el-tag標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 避免變量賦值后雙向綁定的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue數(shù)據(jù)監(jiān)聽(tīng)解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽(tīng)解析Object.defineProperty Proxy源碼示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3封裝實(shí)現(xiàn)一個(gè)圖片查看器,可以點(diǎn)擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下2025-02-02
這篇文章主要介紹了Vue3組件的開(kāi)發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)，今天繼續(xù)上篇內(nèi)容展開(kāi)組件的開(kāi)發(fā),需要的朋友可以參考一下2021-11-11
Vue-DPlayer是一個(gè)易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細(xì)使用,本文將從四個(gè)方面對(duì)Vue-DPlayer進(jìn)行詳細(xì)的闡述,感興趣的朋友一起看看吧2023-10-10
快速解決Vue、element-ui的resetFields()方法重置表單無(wú)效的問(wèn)題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11