element-ui tag 组件源码分享

今日简单分享一下 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 时触发的事件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts仪表盘特殊样式

const drawChartOption function (value, max) {const colorConfig {name: 测试,colorList: {text: #fff,line2: {type: linear,x: 0, // 右y: 0, // 下x2: 1, // 左y2: 0, // 上colorStops: [// {// offset: 0,// color: transparent// },{offset: 0.1,color: #031e…

服务器托管让服务器管理更轻松高效

在信息化飞速发展的今天&#xff0c;服务器作为企业数据处理和信息存储的核心设备&#xff0c;其管理的重要性日益凸显。服务器托管&#xff0c;作为一种高效、专业的服务器管理方式&#xff0c;正逐渐成为众多企业的首选。那么&#xff0c;服务器托管究竟是如何让服务器管理更…

AI版青花瓷

3月22日&#xff0c;Suno正式上线V3版本&#xff0c;很多人都称之为AI音乐的"ChatGPT"时刻&#xff0c;从此人人都可以是作曲家&#xff0c;先来听下最近霸榜的只因你太美baby来感受下它的厉害之处&#xff08;我已经被洗脑了哈哈&#xff09; 1. Suno 介绍 根据Sun…

便携式组件el测试仪讲解

TH-EL3便携式组件EL&#xff08;电致发光&#xff09;测试仪是一种专门用于检测光伏组件质量的设备。该设备基于电致发光的原理&#xff0c;通过非破坏性的方式快速准确地检测出光伏组件内部的各种缺陷和问题。 产品概述 便携式组件EL测试仪是一种轻便、易于携带的设备&#…

Mysql实战--为什么表数据删掉一半,表文件大小不变

经常会有同学来问我&#xff0c;我的数据库占用空间太大&#xff0c;我把一个最大的表删掉了一半的数据&#xff0c;怎么表文件的大小还是没变&#xff1f; 那么今天&#xff0c;我就和你聊聊数据库表的空间回收&#xff0c;看看如何解决这个问题。 这里&#xff0c;我们还是针…

云容器引擎CCE弹性伸缩

CCE弹性伸缩介绍 CCE的弹性伸缩能力分为如下两个维度&#xff1a; 工作负载弹性伸缩&#xff1a;即调度层弹性&#xff0c;主要是负责修改负载的调度容量变化。例如&#xff0c;HPA是典型的调度层弹性组件&#xff0c;通过HPA可以调整应用的副本数&#xff0c;调整的副本数会…

数据结构进阶篇 之 【堆的应用】(堆排序,TOP-K问题)详细讲解

所有人都关心我飞的高不高&#xff0c;只有我妈关心我翅膀硬不硬 一、堆的应用 1. 堆排序 1.1 建堆 1.2 利用堆删除思想来进行排序 2.TOP-K问题 二、完结撒❀ –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–❀–❀–…

如何快速有效地压缩图片大小?这款在线工具可保证图片质量

当你需要上传或发送大量图片时&#xff0c;大体积的图片文件往往会让我们感到困扰&#xff0c;如何快速有效的压缩图片大小成了比较关键的问题&#xff0c;在图片压缩时&#xff0c;我们还需要担心的就是会不会对图片质量有损害&#xff0c;想要做到图片无损压缩就需要用到一些…

go和Java该如何选择?

今天&#xff0c;每个企业都需要一个软件应用程序&#xff0c;从初创公司到大型公司如果你想以最有效的方式运行业务&#xff0c;你必须把它列在网上。竞争并没有就此结束 但重要的是您能够以多简单、多快速的方式创建软件应用程序-这是引领竞争的正确方式。 选择最适合您的软…

MegaSeg Pro for Mac v6.3.1 注册激活版 音视频DJ混音工具

MegaSeg Pro for Mac是一款专业的DJ和广播自动化软件&#xff0c;旨在为音乐专业人士提供强大的音乐播放和演播功能。这款软件具有多种功能&#xff0c;包括强大的音乐库管理&#xff0c;支持导入和组织大量音乐文件&#xff0c;可以轻松管理你的音乐收藏。它支持广泛的音频格式…

WPF学习笔记-FlowDocument流文档基础知识和基本操作

文章目录 概述一、块元素和内联元素1.1 块元素&#xff08;Block类&#xff09;1.2 内联元素&#xff08;Inline类&#xff09;二、Paragraph元素2.1 基本属性设置2.2 将内联元素Inline添加到Inlines中2.3 设置中西文字体不一样 三、Table元素3.1 添加新的Table3.2 添加列3.3 添…

深度学习系列-python实现-初步学习构建神经网络

深度学习系列-python实现-初步学习构建神经网络 前言1.在Keras中加载MNIST数据集2.构建简单的神经网络模型3.训练模型4.模型的预测和评估5.总结 前言 在数字时代&#xff0c;数据已经成为了一种无处不在的资源。从商业分析到科学研究&#xff0c;从人工智能到机器学习&#xf…

固态硬盘一年不通电数据就没了吗?丢失了怎么办

随着数字化时代的到来&#xff0c;数据的安全性和持久性变得尤为重要。作为现代电子设备中常见的存储设备&#xff0c;固态硬盘&#xff08;SSD&#xff09;以其高效、快速的特点受到广大用户的青睐。然而&#xff0c;有关固态硬盘长时间不通电后数据会丢失的担忧也时常困扰着用…

报错:AttributeError: module ‘numpy‘ has no attribute ‘unit8‘解决

错误问题&#xff1a; 解决方法&#xff1a; 哥们姐们仔细一点吧这个unit8是打错了&#xff0c;无非就是uint8写成了unit8 应该是【uint8】&#xff0c;以后敲代码仔细点哦

从零开始学数据分析之数据分析概述

当今世界对信息技术的依赖程度在不断加深&#xff0c;每天都会有大量的数据产生&#xff0c;我们经常会感到数据越来越多&#xff0c;但是要从中发现有价值的信息却越来越难。 这里所说的信息&#xff0c;可以理解为对数据集处理之后的结果&#xff0c;是从数据集中提炼出的可用…

【Leetcode】top 100 二分查找

35 搜索插入位置 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 基础写法&#xff01;&#xff01;&#xff01;牢记…

清华学霸引爆“长文本”大战,大模型的应用前景清晰了吗?

文 | 智能相对论 作者 | 沈浪 Long-LLM&#xff08;长文本大模型&#xff09;时代似乎来得有些突然&#xff0c;而引爆这场热潮的&#xff0c;竟是一家由清华学霸牵头的本土AI初创企业。 前不久&#xff0c;月之暗面&#xff08;Moonshot AI&#xff09;公司宣布旗下对话式 …

linux 环境安装配置

安装java17 1.下载安装包 wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 2.解压到自定义目录/usr/local/java mkdir /usr/local/java tar zxvf jdk-17_linux-x64_bin.tar.gz -C /usr/local/java 3.配置环境变量 echo export PATH$PATH:/…

金三银四面试题(十):Java基础问题(1)

这部分面试题多用于面试的热身运动&#xff0c;对很多找实习和准备毕业找工作的小伙伴至关重要。 访问修饰符 在 Java 中&#xff0c;提供了四种访问权限控制&#xff1a; public private protected 以及什么都不写&#xff08;default&#xff09; 修饰符当前类同包子包其他…

SSM学习——Spring AOP与AspectJ

Spring AOP与AspectJ 概念 AOP的全称为Aspect-Oriented Programming&#xff0c;即面向切面编程。 想象你是汉堡店的厨师&#xff0c;每一份汉堡都有好几层&#xff0c;这每一层都可以视作一个切面。现在有一位顾客想要品尝到不同风味肉馅的汉堡&#xff0c;如果按照传统的方…