Element?el-tag標簽圖文實例詳解
1. 前言
標簽經(jīng)常用來描述對象的一個、或者多個同類屬性。
例如描述用戶的愛好,描述用戶擁有的角色。
el-tag提供了動態(tài)刪除、新增標簽的功能,所以非常適合使用在動態(tài)處理用戶屬性的場景。
2. 基本用法
代碼如下:
基本用法<br>
<el-tag>籃球</el-tag>
使用el-tag即可創(chuàng)建一個標簽,效果如下:
3. 調整顏色
通過type屬性可以調整標簽顏色:
調整顏色<br> <el-tag>默認色</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. 調整尺寸
通過size屬性可以調整標簽的尺寸大?。?/p>
調整尺寸<br> <el-tag>默認</el-tag> | <el-tag size="medium">中等</el-tag> | <el-tag size="small">小型</el-tag> | <el-tag size="mini">超小</el-tag>
效果如下:
5. 調整主題
el-tag還支持不同風格的主題,通過effect屬性即可調整,其中dark表示深色主題、light表示淺色主題、plain表示樸素主題:
調整主題<br> <el-tag type="success">默認主題</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動態(tài)綁定一個數(shù)組:
數(shù)據(jù)綁定<br> <el-tag v-for="item in hobbies">{{item}}</el-tag>
數(shù)據(jù)區(qū)域定義如下:
data() { return { hobbies: ['籃球', '足球', '排球'], } },
效果如下:
7. 動態(tài)移除
通過設置屬性closable,可以在標簽右側顯示一個刪除圖標,點擊該圖標后,會觸發(fā)@close綁定的方法。
動態(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; } } },
點擊刪除后,會從數(shù)組移除相應的元素,所以界面上對應的標簽也會消失。
8. 動態(tài)新增
通過@click指定一個方法,點擊方法后彈窗輸入新標簽項的內容,確定后將輸入內容加入標簽綁定的數(shù)組,就可以實現(xiàn)動態(tài)新增了:
動態(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('請輸入您的愛好', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', }).then(({ value }) => { _this.hobbies.push(value); }) }
點擊新增標簽,即可彈窗,點擊確定后,即可添加新標簽:
9. 小結
標簽在日常開發(fā)工作中,還是比較常用的。el-tag封裝的非常簡單利索,推薦!
補充:Vue對Element中的el-tag添加@click事件無效
在做評論模塊的時候,想著對el-tag元素添加點擊事件,發(fā)現(xiàn)無法觸發(fā),代碼如下所示
<el-tag type="error" @click="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
我們在點擊el-tag標簽的時候,無法觸發(fā)其點擊事件
解決方法
通過查閱資料發(fā)現(xiàn)官方給定了解答
也就是所,必須使用@click.native才能夠觸發(fā)點擊行為,而對于button,直接使用@click即可,修改后的代碼如下所示,能夠正常完成點擊事件了~
<el-tag type="error" @click.native="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>
到此這篇關于Element el-tag標簽的文章就介紹到這了,更多相關Element el-tag標簽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能示例
這篇文章主要介紹了vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能,結合實例形式分析了vue.js事件響應及數(shù)值運算相關操作技巧,需要的朋友可以參考下2019-01-01Vue中使用require.context自動引入組件的操作方法
require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧2024-01-01VueJs單頁應用實現(xiàn)微信網(wǎng)頁授權及微信分享功能示例
本篇文章主要介紹了VueJs單頁應用實現(xiàn)微信網(wǎng)頁授權及微信分享功能示例,具有一定的參考價值,有興趣的可以了解一下2017-07-07在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作
這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07