Element?el-tag標(biāo)簽怎么用

本篇內(nèi)容介紹了“Element el-tag標(biāo)簽怎么用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1. 前言

標(biāo)簽經(jīng)常用來描述對(duì)象的一個(gè)、或者多個(gè)同類屬性。

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

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)整顏色

通過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)整尺寸

通過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)格的主題，通過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)移除

通過設(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)新增

通過@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)輸入您的愛好', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        _this.hobbies.push(value);
      })
    }

點(diǎn)擊新增標(biāo)簽，即可彈窗，點(diǎn)擊確定后，即可添加新標(biāo)簽：

9. 小結(jié)

標(biāo)簽在日常開發(fā)工作中，還是比較常用的。el-tag封裝的非常簡(jiǎn)單利索，推薦！

補(bǔ)充：Vue對(duì)Element中的el-tag添加@click事件無效

在做評(píng)論模塊的時(shí)候，想著對(duì)el-tag元素添加點(diǎn)擊事件，發(fā)現(xiàn)無法觸發(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í)候，無法觸發(fā)其點(diǎn)擊事件

解決方法

通過查閱資料發(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>

“Element el-tag標(biāo)簽怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！