Element?el-tag標簽怎么用

本篇內容介紹了“Element el-tag標簽怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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標簽怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！