element-ui tag 组件源码分享

news/2024/6/23 18:31:30

今日简单分享一下 tag 组件的源码实现,主要从以下三个方面来分享:

1、tag 组件页面结构

2、tag 组件属性

3、tag 组件方法

一、tag 组件页面结构

vue2 中使用 jsx 语法小结:

1.1 需要安装 babel-plugin-transform-vue-jsx 和 @vue/babel-helper-vue-jsx-merge-props 依赖

npm install --save-dev babel-plugin-transform-vue-jsx @vue/babel-helper-vue-jsx-merge-props

2、需要配置 babel 文件

{  "plugins": [  ["transform-vue-jsx", {  "functional": false  }]  ]  
}

3、使用 jsx

export default {  name: 'MyComponent',  props: {  msg: String  },  render(h) {  return (  <div>  <h1>{this.msg}</h1>  <button onClick={() => alert('Hello World!')}>Click Me</button>  </div>  );  }  
}

二、tag 组件方法

2.1 type 属性,类型,类型 string,success/info/warning/danger,无默认值。

2.2 closable 属性,是否可关闭,类型 boolean,默认 false。

组件使用部分:

展示效果:

2.3 disable-transitions 属性,是否禁用渐变动画,类型 boolean,默认 false。

组件使用:

<template><el-tagv-for="(item) in tag":key="item.id"type="success":disable-transitions="item.id == 0"closable@close="handleClose(item)">disable-transitions:{{item.id == 0}}</el-tag>
</template><script>export default {data() {return {tag: [{id: 0,title: 'tag 1',},{id: 1,title: 'tag 2',},],};},methods: {handleClose({ id }) {const index = this.tag.findIndex((item) => item.id == id);this.tag.splice(index, 1);},},};
</script>

展示效果:

2.4 hit 属性,是否有边框描边,类型 boolean,默认 false。

组件使用:

<template><el-tagv-for="(item) in tag":key="item.id"type="success":hit="item.id==0">hit:{{item.id == 0}}</el-tag>
</template><script>export default {data() {return {tag: [{id: 0,title: 'tag 1',},{id: 1,title: 'tag 2',},],};},};
</script>

展示效果:

2.5 color 属性,背景色,类型 string,无默认值。

组件使用:

展示效果:

2.6 size 属性,尺寸,类型 string,medium / small / mini,无默认值。

2.7 effect 属性,主题,类型 string,dark / light / plain,默认 light。

三、tag 组件方法

3.1 click 事件,点击 tag 时触发的事件。

3.2 close 事件,关闭 tag 时触发的事件。


https://www.xjx100.cn/news/3365580.html

相关文章

对个人任务完成时间预估偏差的探讨

在日常学习、工作和生活中&#xff0c;我们时常会遇到这样的情况&#xff1a;预估完成一项任务所需的时间与实际所花费的时间存在出入&#xff0c;且往往预估时间较长。这种现象并非个例&#xff0c;而是普遍存在于多数人的行为模式中。本文旨在深入剖析为何人们在估算任务完成…

【嵌入式开发 Linux 常用命令系列 4.3 -- git add 不 add untracked file】

请阅读【嵌入式开发学习必备专栏 】 文章目录 git add 不add untracked file git add 不add untracked file 如果你想要Git在执行git add .时不添加未跟踪的文件&#xff08;untracked files&#xff09;&#xff0c;你可以使用以下命令&#xff1a; git add -u这个命令只会加…

集创赛分析(图像处理部分)

四月份进度 1.分析多少个资源单元 图像采集和存储数据&#xff1a;先驱动摄像头进行数据采集&#xff08;ov5640&#xff09;&#xff0c;再驱动存储器&#xff08;SDRAM&#xff09;&#xff0c;将数据存到存储器 数据处理&#xff1a;简单的滤波&#xff08;中值/均值&…

浅谈物联网高速公路智慧配电室系统构建方案

关键词&#xff1a;高速公路&#xff1b;智慧供配电&#xff1b;电力监控&#xff1b;配电室智能运维托管&#xff1b;安全隐患 0、引言 随着高速公路事业的不断发展和路网的不断延伸&#xff0c;传统的管理方式已难以满足日益增长的需求&#xff0c;动态管理和安全隐患预警成…

大话设计模式之适配器模式

适配器模式是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户端所期望的另一个接口。这种模式通常用于使原本由于接口不兼容而不能一起工作的类能够协同工作。 适配器模式涉及以下几个关键角色&#xff1a; 1. 目标接口&#xff08;Target&#xff09;&#x…

chromium源码学习-调试日志 LOG

在学习 chromium 源码时&#xff0c;我们经常需要增加调试日志&#xff0c;常见的用法一般是 // TurboNet.mm133134 LOG(INFO) << "TurboNet Engine started.";其中 INFO 代表当前这条日志的级别&#xff0c;使用的时候就是输入 INFO 就行。接下来我们在探索…

css预编译sass,css也可以变得优雅

1. 嵌套选择器 #content {article {h1 { color: #333 }p { margin-bottom: 1.4em }}aside { background-color: #EEE } }编译后 #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }2. 变量声明和使…

【Java+Springboot】----- 通过Idea快速创建SpringBoot项目操作方法

一、第一步&#xff1a; 点击选择【File】->【New】-> 【Project】 最后弹出[new Project]界面。 二、第二步&#xff1a; 1. 选择【Spring Initializr】 2. 然后选择【Project SDK】的版本 3. 然后 Choose Initializr Service URL 选择默认&#xff08;Default&#x…