当前位置: 首页 > news >正文

ElementUI浅尝辄止16:Tag 标签

用于标记和选择。

1.如何使用?

由type属性来选择tag的类型,也可以通过color属性来自定义背景色。<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>

2.可移除标签

//设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画,如果不想使用,可以设置disable-transitions属性,它接受一个Boolean,true 为关闭。<el-tagv-for="tag in tags":key="tag.name"closable:type="tag.type">{{tag.name}}
</el-tag><script>export default {data() {return {tags: [{ name: '标签一', type: '' },{ name: '标签二', type: 'success' },{ name: '标签三', type: 'info' },{ name: '标签四', type: 'warning' },{ name: '标签五', type: 'danger' }]};}}
</script>

3. 动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现

<el-tag:key="tag"v-for="tag in dynamicTags"closable:disable-transitions="false"@close="handleClose(tag)">{{tag}}
</el-tag>
<el-inputclass="input-new-tag"v-if="inputVisible"v-model="inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm"@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button><style>.el-tag + .el-tag {margin-left: 10px;}.button-new-tag {margin-left: 10px;height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;}.input-new-tag {width: 90px;margin-left: 10px;vertical-align: bottom;}
</style><script>export default {data() {return {dynamicTags: ['标签一', '标签二', '标签三'],inputVisible: false,inputValue: ''};},methods: {handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);},showInput() {this.inputVisible = true;this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus();});},handleInputConfirm() {let inputValue = this.inputValue;if (inputValue) {this.dynamicTags.push(inputValue);}this.inputVisible = false;this.inputValue = '';}}}
</script>

4.不同尺寸

Tag 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。

额外的尺寸:medium、small、mini,通过设置size属性来配置它们。<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<el-tag size="small" closable>小型标签</el-tag>
<el-tag size="mini" closable>超小标签</el-tag>

5.不同主题

Tag 组件提供了三个不同的主题:darklight 和 plain

通过设置effect属性来改变主题,默认为 light<div class="tag-group"><span class="tag-group__title">Dark</span><el-tagv-for="item in items":key="item.label":type="item.type"effect="dark">{{ item.label }}</el-tag>
</div>
<div class="tag-group"><span class="tag-group__title">Plain</span><el-tagv-for="item in items":key="item.label":type="item.type"effect="plain">{{ item.label }}</el-tag>
</div><script>export default {data() {return {items: [{ type: '', label: '标签一' },{ type: 'success', label: '标签二' },{ type: 'info', label: '标签三' },{ type: 'danger', label: '标签四' },{ type: 'warning', label: '标签五' }]}}}
</script>

 

相关文章:

ElementUI浅尝辄止16:Tag 标签

用于标记和选择。 1.如何使用&#xff1f; 由type属性来选择tag的类型&#xff0c;也可以通过color属性来自定义背景色。<el-tag>标签一</el-tag> <el-tag type"success">标签二</el-tag> <el-tag type"info">标签三</e…...

Java虚拟机(JVM)框架

见&#xff1a;GitHub - eHackyd/Java_JVM: Java虚拟机(JVM)框架的学习笔记...

配置Publisher 的编译规则

步骤 1&#xff1a;创建ROS Package 使用以下命令创建一个新的ROS软件包&#xff1a; catkin_create_pkg my_publisher_package roscpp std_msgs步骤 2&#xff1a;编辑 CMakeLists.txt 文件 打开您的ROS软件包的 CMakeLists.txt 文件&#xff0c;通常位于软件包的根目录。您…...

【SpringBoot】接口实现:SpringBoot实现博客系统的文章列表页接口代码

以下是一个简单的Spring Boot博客系统的文章列表页接口代码示例&#xff1a; java RestController RequestMapping("/articles") public class ArticleController {Autowiredprivate ArticleService articleService;GetMapping("/")public List<Artic…...

如何使用SQL系列 之 如何在SQL中插入数据

简介 结构化查询语言&#xff0c;通常被称为SQL&#xff0c;在允许您将数据插入表中方面提供了极大的灵活性。例如&#xff0c;你可以使用VALUES关键字指定单独的行数据&#xff0c;使用SELECT查询从现有表中复制整组数据&#xff0c;以及以使SQL自动插入数据的方式定义列。 …...

【LeetCode题目详解】1281题 整数的各位积和之差 面试题 01.01. 判定字符是否唯一 python题解(作业一二)

本文章以python为例! 一、力扣第1281题&#xff1a;整数的各位积和之差 问题描述&#xff1a; 1281. 整数的各位积和之差 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1&#xff1a; 输入&#xff1a;n 234 输出…...

1.12 进程注入ShellCode套接字

在笔者前几篇文章中我们一直在探讨如何利用Metasploit这个渗透工具生成ShellCode以及如何将ShellCode注入到特定进程内&#xff0c;本章我们将自己实现一个正向ShellCodeShell&#xff0c;当进程被注入后&#xff0c;则我们可以通过利用NC等工具连接到被注入进程内&#xff0c;…...

MySQL 日志系统

重要日志模块 日志文件bin logredo log**关于循环写入和擦除的checkpoint 规则**redo log 怎么刷入磁盘的 binlog 和 redo log 有什么区别&#xff1f;undo log 日志文件 错误日志&#xff08;error log&#xff09;&#xff1a; 错误日志文件对 MySQL 的启动、运行、关闭过程进…...

LeetCode刷题---Two Sum(一)

文章目录 &#x1f340;题目&#x1f340;解法一&#x1f340;解法二&#x1f340;哈希表 &#x1f340;题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每…...

算法通关村第十七关——插入区间

LeetCode435,给定一个区间的集合&#xff0c;找到需要移除区间的最小数量&#xff0c;使剩余区间互不重叠。 示例1&#xff1a; 输入&#xff1a;interva1s[[1,3],[6,9]],newInterva1[2,5] 输出&#xff1a;[[1,5]&#xff0c;[6,9]] 解释&#xff1a;新区间[2,5]与[1,3]重…...

Jenkins java8安装版本安装

一、首先准备Jenkins、Jdk8、Tomcat9安装包 根据Jenkins官网介绍&#xff0c;Jenkins支持Java8的版本如下&#xff1a; 我们选择2.164版本进行安装&#xff0c;根据版本号支持输入下载地址&#xff1a;https://archives.jenkins.io/war/2.164/jenkins.war&#xff0c;进行下载…...

线上问诊:数仓开发(二)

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 线上问诊&#xff1a;数仓开发(一) 线上问诊&#xff1a;数仓开发(二) 文章目录 系列文章目录前言一、DWS1.最近1日汇总表1.交易域医院患者性别年龄段粒度问诊最近1日汇总表2.交易域医院患者…...

Ansible自动化运维工具(三)

目录 Ansible 的脚本 --- playbook 剧本 ​编辑2.vars模块实战实例 3.指定远程主机sudo切换用户 4.when模块实战实例 5.with_items迭代模块实战实例 6.Templates 模块实战实例 &#xff08;1&#xff09;先准备一个以 .j2 为后缀的 template 模板文件&#xff0c;设置引用…...

ChatGPT在创新和创业中的应用如何?

ChatGPT是一种基于大规模预训练的语言模型&#xff0c;它在创新和创业中有着广泛的应用。作为一种具备自然语言处理能力的模型&#xff0c;ChatGPT可以与用户进行对话&#xff0c;并提供相关的信息、建议和创意。以下是ChatGPT在创新和创业中的一些应用&#xff1a; 创意生成和…...

Log4j2 配置日志记录发送到 kafka 中

前言 log4j2 在 2.11.0 之后的版本&#xff0c;已经内置了 KafkaAppender 支持可以将打印的日志直接发送到 kafka 中&#xff0c;在这之前如果想要集中收集应用的日志&#xff0c;就需要自定义一个 Layout 来实现&#xff0c;相对来说还是比较麻烦的。 官网文档&#xff1a;L…...

Linux用户与组管理(03)(八)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、组管理 1、概述 2、用户信息查看 总结 前言 今天是学习用户与组管理的最后一节课&#xff0c;这节课主要是组管理的内容&#xff0c;希望能一起学习&#xff…...

Java自定义异常

Java标准库定义的常用异常包括&#xff1a; 当我们在代码中需要抛出异常时&#xff0c;尽量使用JDK已定义的异常类型。例如&#xff0c;参数检查不合法&#xff0c;应该抛出IllegalArgumentException&#xff1a; static void process1(int age) {if (age < 0) {throw new…...

vscode远程调试php

使用vscode远程调试php的方法 1.安装remote ssh插件 2.连接服务器 可以点击左下角的绿色按钮&#xff0c;或者ctrlshiftp打开命令框输入remote ssh应该也有。 3.在服务器端vscode安装php debug插件 4.安装xdebug xdebug是用来调试php的软件&#xff0c;原本和vscode没什么关…...

C语言:截断+整型提升练习

详情关于整型提升与截断见文章&#xff1a;《C语言&#xff1a;整型提升》 一、代码一 int main() { char a -1; signed char b -1; unsigned char c -1; printf("%d %d %d", a, b, c); return 0; } 求输出结果 解析如下代码&#xff1a; int mai…...

Kubernetes技术--k8s核心技术kubectl命令行工具

(1).概述 kubectl是Kubernetes集群的命令行工具,通过 kubectl 能够对集群本身进行管理,并能够在集群上进行容器化应用的安装部署。 (2).语法 Kubectl [command] [type] [name] [flags] 语法参数说明: command: 指定要对资源执行的操作,例如 create、get、describe 和 delet…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...