文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Element el-tag标签图文实例详解

2024-04-02 19:55

关注

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标签内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯