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

简介

el-tag是基于Element UI框架下的标签组件，用于展示标签或标记并进行分类，常用于项目中的文章标签或商品类别标签等。

布局样式

通过样式控制可以实现不同样式的标签展示，包括标签颜色、大小、形状等。以下是一些常用的样式：

• 标签颜色：el-tag默认颜色为灰色，可以通过type属性设置标签的颜色，可选值为success（绿色）、info（浅蓝色）、warning（橙色）和danger（红色）等。

<!--示例1:使用不同颜色的标签展示不同类别-->
<el-tag type="success">生活</el-tag>
<el-tag type="warning">科技</el-tag>
<el-tag type="info">旅游</el-tag>
<el-tag type="danger">美食</el-tag>

• 标签大小：可以调整标签的大小，通过size属性设置标签的大小，可选值为medium（默认中等大小）和small。

<!--示例2:控制标签大小-->
<el-tag size="medium">普通标签</el-tag>
<el-tag size="small">小标签</el-tag>

• 标签形状：el-tab标签默认为圆角矩形，通过round属性可以将标签的四个角变成圆形；通过plain属性可以将标签变成镂空样式，也可结合type属性实现镂空样式的不同颜色。

<!--示例3:控制标签形状-->
<el-tag round>默认圆角矩形</el-tag>
<el-tag round plain>圆角镂空</el-tag>
<el-tag plain type="warning">镂空橙色标签</el-tag>

事件绑定

el-tag组件还支持一些常用的事件绑定，如点击事件（click）、关闭事件（close）等，可以根据需要进行扩展。

• 点击事件：el-tag组件支持点击事件，可以在标签被点击时触发指定的事件。

<!--示例4:绑定标签点击事件-->
<el-tag @click="handleClick">标签1</el-tag>

//示例4中的处理函数
methods: {
  handleClick() {
    console.log("标签被点击了！");
  },
}

• 关闭事件：如果将closable属性设置为true，则el-tab组件将带有关闭按钮，点击该按钮可以触发关闭事件。

<!--示例5:绑定标签关闭事件-->
<el-tag closable @close="handleClose">标签2</el-tag>

//示例5中的处理函数
methods: {
  handleClose() {
    console.log("标签被关闭了！");
  },
}

小结

以上就是Element el-tag标签图文实例的详细讲解，是前端开发中常用的组件之一，具有良好的可扩展性和易用性，希望可以对大家的开发工作有所帮助。