Element el-tag標籤圖文範例詳解

2022-04-07 13:00:05

1. 前言

標籤經常用來描述物件的一個、或者多個同類屬性。

例如描述使用者的愛好，描述使用者擁有的角色。

el-tag提供了動態刪除、新增標籤的功能，所以非常適合使用在動態處理使用者屬性的場景。

2. 基本用法

程式碼如下：

基本用法<br>
<el-tag>籃球</el-tag>

使用el-tag即可建立一個標籤，效果如下：

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屬性可以調整標籤的尺寸大小：

	調整尺寸<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. 資料繫結

可以使用v-for動態繫結一個陣列：

	資料繫結<br>
    <el-tag v-for="item in hobbies">{{item}}</el-tag>

資料區域定義如下：

  data() {
    return {
      hobbies: ['籃球', '足球', '排球'],
    }
  },

效果如下：

7. 動態移除

通過設定屬性closable，可以在標籤右側顯示一個刪除圖示，點選該圖示後，會觸發@close繫結的方法。

	動態移除<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;
        }
      }
    },

點選刪除後，會從陣列移除相應的元素，所以介面上對應的標籤也會消失。

8. 動態新增

通過@click指定一個方法，點選方法後彈窗輸入新標籤項的內容，確定後將輸入內容加入標籤繫結的陣列，就可以實現動態新增了：

	動態新增<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. 小結

標籤在日常開發工作中，還是比較常用的。el-tag封裝的非常簡單利索，推薦！

補充：Vue對Element中的el-tag新增@click事件無效

在做評論模組的時候，想著對el-tag元素新增點選事件，發現無法觸發，程式碼如下所示

<el-tag type="error" @click="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>

我們在點選el-tag標籤的時候，無法觸發其點選事件

解決方法

通過查閱資料發現官方給定了解答

也就是所，必須使用@click.native才能夠觸發點選行為，而對於button，直接使用@click即可，修改後的程式碼如下所示，能夠正常完成點選事件了~

<el-tag type="error" @click.native="onClick(scope.row.blog)">scope.row.blog.title}}</el-tag>

到此這篇關於Element el-tag標籤的文章就介紹到這了,更多相關Element el-tag標籤內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Element el-tag標籤圖文範例詳解

目錄

1. 前言

2. 基本用法

3. 調整顏色

4. 調整尺寸

5. 調整主題

6. 資料繫結

7. 動態移除

8. 動態新增

9. 小結

補充：Vue對Element中的el-tag新增@click事件無效

熱門文章