亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Element?el-tag標簽圖文實例詳解

 更新時間:2022年04月07日 11:53:42   作者:程序員大陽  
現(xiàn)在好多應用場景里會有一些需要給文章打標簽等類似的操作,下面這篇文章主要給大家介紹了關于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中如何更改element-ui主題色

    vue中如何更改element-ui主題色

    這篇文章主要介紹了vue中如何更改element-ui主題色,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue中使用JsonView來展示Json樹的實例代碼

    Vue中使用JsonView來展示Json樹的實例代碼

    這篇文章主要介紹了Vue之使用JsonView來展示Json樹的實例代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-11
  • vue時間格式總結以及轉換方法詳解

    vue時間格式總結以及轉換方法詳解

    項目中后臺返回的時間有多種形式,時間戳、ISO標準時間格式等,我們需要轉化展示成能看的懂得時間格式,下面這篇文章主要給大家介紹了關于vue時間格式總結以及轉換方法的相關資料,需要的朋友可以參考下
    2022-12-12
  • 在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例

    在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例

    今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能示例

    vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能示例

    這篇文章主要介紹了vue數(shù)據(jù)操作之點擊事件實現(xiàn)num加減功能,結合實例形式分析了vue.js事件響應及數(shù)值運算相關操作技巧,需要的朋友可以參考下
    2019-01-01
  • vue實現(xiàn)記事本案例

    vue實現(xiàn)記事本案例

    這篇文章主要為大家詳細介紹了vue實現(xiàn)記事本案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue中使用require.context自動引入組件的操作方法

    Vue中使用require.context自動引入組件的操作方法

    require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧
    2024-01-01
  • 利用vue-i18n實現(xiàn)多語言切換效果的方法

    利用vue-i18n實現(xiàn)多語言切換效果的方法

    這篇文章主要給大家介紹了關于利用vue-i18n實現(xiàn)多語言切換效果的方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue-i18n具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-06-06
  • VueJs單頁應用實現(xiàn)微信網(wǎng)頁授權及微信分享功能示例

    VueJs單頁應用實現(xiàn)微信網(wǎng)頁授權及微信分享功能示例

    本篇文章主要介紹了VueJs單頁應用實現(xiàn)微信網(wǎng)頁授權及微信分享功能示例,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • 在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作

    在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作

    這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論