vue2组件封装实战系列之tag组件

作为本系列的第一篇文章,不会过于的繁杂,并且前期的组件都会是比较简单的基础组件!但是不要忽视这些基础组件,因为纵观elementui、elementplus还是其他的流行组件库,组件库的封装都是套娃式的,很多复杂组件会用到基础组件,所以我们要打好基础,做好基础组件的封装,才能为后期的难度大的组件做好准备。

组件之GfTag

tag组件,类似于按钮组件,功能比按钮的少,可以说是精简版的按钮

效果预览

在这里插入图片描述

属性

参数类型说明可选值默认值
textString标签的内容--
closableBoolean是否可关闭true/falsefalse
hitBoolean是否有边框描边true/falsefalse
disableTransitionsBoolean是否禁用渐变动画true/falsefalse
colorString背景色any
sizeString标签的内容medium / small / mini
effectString标签的内容dark / light / plainlight

代码实现

这里我们使用了function组件来实现tag组件,比较简洁灵活

<script>
export default {//组件的名字,我们在注册的时候使用name: "GfTag",props: {text: String,closable: Boolean,type: String,hit: Boolean,disableTransitions: {type: Boolean,default: true,},color: String,size: String,effect: {type: String,default: "light",validator(val) {return ["dark", "light", "plain"].indexOf(val) !== -1;},},},computed: {tagSize() {//this.$ELEMENT是挂在在Vue.prototype.$ELEMENT上的属性return this.size || (this.$ELEMENT || {}).size;},},methods: {//点击标签抛出的回调事件handleClick(e) {this.$emit("click", e);},//关闭标签抛出的回调事件handleClose(e) {e.stopPropagation();this.$emit("close", e);},},render(h) {const { type, tagSize, hit, effect } = this;const classes = ["el-tag",type ? `el-tag--${type}` : "",tagSize ? `el-tag--${tagSize}` : "",hit && "is-hit",effect && `el-tag--${effect}`,];const tagEle = (<spanclass={classes}style={{ backgroundColor: this.color }}onClick={this.handleClick}>{this.$slots.default ? this.$slots.default : this.text}{this.closable && (<i class="el-tag__close el-icon-close" onClick={this.handleClose}></i>)}</span>);return this.disableTransitions ? (tagEle) : (<transitions name="el-zoom-in-center">{tagEle}</transitions>);},
};
</script>

样式文件可以参考elementui的实现,后面会写一篇文章详细分析组件库的样式怎么去写的文章,敬请关注

使用

    <Gf-space flex gap="10"><gf-tagclosable@close="handleTagClose"v-for="item in tags":key="item.name":type="item.type">{{ item.name }}</gf-tag></Gf-space><Gf-space flex gap="10" direction="column"><gf-tagclosableeffect="dark"@close="handleTagClose"v-for="item in tags":key="item.name":type="item.type">{{ item.name }}</gf-tag></Gf-space>

在这里插入图片描述
这样,我们就实现了自己的tag组件

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

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

相关文章

关于python中的关键字参数

在python语言中存在两种传参方式&#xff1a; 第一种是按照先后顺序来传参&#xff0c;这种传参风格&#xff0c;称为“位置参数”这是各个编程语言中最普遍的方式。 关键字传参~按照形参的名字来进行传参&#xff01; 如上图所示&#xff0c;在函数中使用关键字传参的最大作…

【Java数据结构】—— 一维数组

一维数组 在计算机语言中数组是非常重要的集合类型&#xff0c;大部分计算机语言中数组具有如下三个基本特性&#xff1a; 一致性&#xff1a;数组只能保存相同数据类型元素&#xff0c;元素的数据类型可以是任何相同的数据类型。有序性&#xff1a;数组中的元素是有序的&…

Python中的函数式编程概念

Python中的函数式编程&#xff08;Functional Programming&#xff09;是一种编程范式&#xff0c;它强调使用函数作为主要的编程构建块&#xff0c;并且避免改变状态&#xff08;即避免使用可变的数据结构和变量&#xff09;和可变数据。虽然Python本身是一种多范式编程语言&a…

计算机网络 ——网络层(IPv4地址)

计算机网络 ——网络层&#xff08;IPv4地址&#xff09; 什么是IPv4地址IP地址的分类特殊的IP地址 查看自己的IPv4地址 我们今天来看IPv4地址&#xff1a; 什么是IPv4地址 IPv4&#xff08;Internet Protocol version 4&#xff09;是第四版互联网协议&#xff0c;是第一个被…

使用CodeGen进行程序综合推理

Program Synthesis with CodeGen — ROCm Blogs (amd.com) CodeGen是基于标准Transformer的自回归语言模型家族&#xff0c;用于程序合成&#xff0c;正如作者所定义的&#xff0c;它是一种利用输入-输出示例或自然语言描述生成解决指定问题的计算机程序的方法。 我们将测试的…

mqtt-emqx:paho.mqttv5的简单例子

# 安装emqx 请参考【https://blog.csdn.net/chenhz2284/article/details/139551293?spm1001.2014.3001.5502】 # 下面是示例代码 【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</…

[office] excel做曲线图的方法步骤详解 #经验分享#知识分享#其他

excel做曲线图的方法步骤详解 Excel是当今社会最流行用的办公软件之一&#xff0c;Excel可以用于数据的整理、分析、对比。可以更直观的看到数据的变化情况&#xff0c;而有很多时候需要制作曲线图表进行数据比较&#xff0c;因此&#xff0c;下面是小编整理的如何用excel做曲线…

spark-3.5.1+Hadoop 3.4.0+Hive4.0 分布式集群 安装配置

Hadoop安装参考: Hadoop 3.4.0HBase2.5.8ZooKeeper3.8.4Hive4.0Sqoop 分布式高可用集群部署安装 大数据系列二-CSDN博客 一 下载:Downloads | Apache Spark 1 下载Maven – Welcome to Apache Maven # maven安装及配置教程 wget https://dlcdn.apache.org/maven/maven-3/3.8…

二叉树的右视图-力扣

这道题目是二叉树的层序遍历的扩展&#xff0c;对二叉树进行层序遍历&#xff0c;判断节点是否为该层的最后一个节点&#xff0c;如果是&#xff0c;则将其的数值添加到返回数组中。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode…

mqtt-emqx:简单安装emqx

安装依赖 yum install -y epel-release libatomic下载 cd /chz/install/emqx wget https://www.emqx.com/en/downloads/broker/5.7.0/emqx-5.7.0-el7-amd64.tar.gz解压 mkdir -p emqx && tar -zxvf emqx-5.7.0-el7-amd64.tar.gz -C emqx后台运行 cd /chz/install/e…

10、有条件提前退出关键字Return From Keyword If【robot framework】

在 Robot Framework 中&#xff0c;Return From Keyword If 是一个有用的关键字&#xff0c;它允许你在特定条件下从关键字中返回。这在需要在满足某个条件时提前退出关键字的情况下特别有用。 以下是 Return From Keyword If 的语法和使用示例&#xff1a; 语法 Return From…

分布式事务Seata中XA和AT模式介绍

Seata中XA和AT模式介绍 分布式事务介绍分布式解决方案解决分布式事务的思路Seata的架构Seata中的XA模式Seata的XA模型流程XA模式优缺点实现XA模式 Seata中的AT模式Seata中的AT模式流程实现AT模式AT模式优缺点 AT模式与XA模式的区别 分布式事务介绍 分布式事务&#xff0c;就是…

Hbase中Rowkey的设计方法

Hbase中Rowkey的设计方法 过去对于Rowkey设计方法缺乏理解&#xff0c;最近结合多篇博主的文章&#xff0c;进行了学习。有不少心得体会。总结下来供后续学习和回顾。 ##一、设计Rowkey的三个原则 1.长度原则&#xff1a;长度不能太长&#xff0c;小于100个字节。可以偏端一…

TypeScript是前端语言吗:一场深入而复杂的探讨

TypeScript是前端语言吗&#xff1a;一场深入而复杂的探讨 在编程的世界里&#xff0c;TypeScript是否属于前端语言&#xff0c;似乎是一个简单而又复杂的问题。它似乎简单得可以直接回答“是”或“否”&#xff0c;然而&#xff0c;深入其背后&#xff0c;我们却会发现这个问…

代码随想录算法训练营第36期DAY50

DAY50 如果写累了就去写套磁信吧。 198打家劫舍 class Solution {public: int rob(vector<int>& nums) { vector<int> dp(nums.size()); dp[0]nums[0]; if(nums.size()1) return nums[0]; dp[1]max(nums[0],nums[1]); …

【中颖】SH79F9202 串口通信

头文件 uart.h #ifndef UART_H #define UART_H#include "SH79F9202.h" #include "LCD.h" #include "timer2.h" #include "timer5.h" #include "cpu.h" #include "key.h" #include "io.h" #include &qu…

Meta Llama 3 RMSNorm(Root Mean Square Layer Normalization)

Meta Llama 3 RMSNorm&#xff08;Root Mean Square Layer Normalization&#xff09; flyfish 目录 Meta Llama 3 RMSNorm&#xff08;Root Mean Square Layer Normalization&#xff09;先看LayerNorm和BatchNorm举个例子计算 LayerNormRMSNorm 的整个计算过程实际代码实现结…

OpenCV的核心数据结构

Mat类 Mat类是OpenCV中最重要的数据结构之一&#xff0c;用于表示图像和矩阵数据。Mat类封装了多维数组&#xff0c;并提供了多种操作图像数据的方法和函数。 Mat类的主要属性和方法 构造函数&#xff1a; Mat()&#xff1a;创建一个空的Mat对象。Mat(int rows, int cols, int…

Linux内核epoll

Linux网络IO模型 同步和异步&#xff0c;阻塞和非阻塞 Linux下的五种IO模型 同步和异步&#xff0c;阻塞和非阻塞 Linux 下的五种I/O模型&#xff1a; 阻塞IO&#xff08;Blocking IO&#xff09; BIO 非阻塞IO&#xff08;No Blocking IO&#xff09; IO复用&#xff08;se…

Linux系统管理磁盘管理004

本章主要讲述详细lvm扩容。 操作系统&#xff1a; CentOS Stream 9 扩容目标&#xff1a; jianglv扩容到600MB 扩容前 [rootlocalhost ~]# lvdisplay lgb--- Logical volume ---LV Path /dev/lgb/nginx_lvmLV Name nginx_lvmVG Name …