欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element?el-tag標(biāo)簽圖文實(shí)例詳解

 更新時(shí)間：2022年04月07日 11:53:42   作者：程序員大陽(yáng)  
現(xiàn)在好多應(yīng)用場(chǎng)景里會(huì)有一些需要給文章打標(biāo)簽等類(lèi)似的操作,下面這篇文章主要給大家介紹了關(guān)于Element?el-tag標(biāo)簽的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 前言

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

例如描述用戶的愛(à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)文章

最新評(píng)論