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

已于 2024-06-07 15:40:01 修改
阅读量221 收藏
点赞数
分类专栏： vue2组件的封装实战 文章标签： 前端 vue.js
于 2024-06-07 15:39:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/139527591
版权
本文是vue2组件封装实战系列的第一篇，主要介绍如何封装基础的GfTag组件。通过组件的属性和代码实现，阐述基础组件在组件库中的重要性，为后续复杂组件的封装打下基础。
摘要由CSDN通过智能技术生成

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

组件之GfTag

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

效果预览

在这里插入图片描述

属性

参数 类型 说明 可选值 默认值
text String 标签的内容
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
使用VUE自定义组件封装数据字典实战
03-07
本文主要探讨的是如何使用Vue自定义组件来封装数据字典，以下拉列表为例。 首先，使用Element UI的`el-select`组件可以直接创建下拉列表，但这种方式在处理多个字典数据时会变得复杂。因为每个字典都需要单独请求...
vue中实现tag标签
07-09 1万+
1，安装scss插件 cnpm i node-sasssass-loader -S 2，安装element-ui cnpm i element-ui -S main.js中引入element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Ele...
vue3 组件篇 tag
秋来九月八
11-30 2601
tag组件，是前端开发常用组件之一，无论是移动端，还是pc端，我们都能经常看到。tag组件的交互也比较简单，需要实现的功能如下能删除能自定义背景，颜色，甚至提供部分形状可供选择tag的内容能够完全自定义删除或者点击的回调，（如果是点击的回调，更像一个button）
017、Vue动态tag标签
最新发布
༺ bestcxx的专栏 ༻
07-22 448
【代码】017、Vue动态tag标签。
Vue自定义Tag标签
ljw的博客
06-01 4238
1、需求：项目中有好几处用到标签组，有单行、多行、单行显示不下省略（鼠标放上去提示）等等需求，为了方便使用提取为组件。单行样式如下： 2、在项目的components文件下新建文件夹
Vue3标签（Tag）
Mr Dear的博客
07-25 1648
进行标记和分类的小标签，支持：多彩标签；预设状态的标签；动态添加和删除；三种尺寸；自定义动态标签排列；无边框；总之，功能丰富，简单易用😁😁
vue动态菜单及tag切换
xy19950125的博客
11-12 6039
刚刚接触项目的小伙伴 几乎都接触不到这一块的 因为入职 公司要么有骨干 要么是现有项目维护 所以 对于动态菜单 很好奇 今天带着小伙伴们一起来看看吧 可能有些人接触过 只是看看别人写的代码 觉得都没有问题没有实际动手去做过 这就应对了那句 “看花容易绣花难” 其实我开始的时候 也是这种心理 直到我自己动手的时候 发现里面有很多坑 如果不涉及到tag的切换 估计看看element官网就知道了 关键就是带有tag切换 导致很多小伙伴无从下手 现在很多公司的项目都是基...
Vue简单使用Element Plus Tag标签组件
lfyyyyy的博客
03-23 961
在开发中我们可能会使用到标签用于设置属性，怎么动态有趣的设置呢？我们可以使用Tag标签组件来实现像我下面这样的效果怎么做呢？提示：以下是本篇文章正文内容，下面案例可供参考Tag标签中还有其他各种api，感兴趣的可以去查看一下文档。
vue2简单封装轮播图组件
03-20
轮播图组件，实现左右滑动，自动无限无缝轮播，点击事件
vue3 表格组件封装复用
02-27
在Vue3中，组件封装是提高代码复用性和效率的关键技术。本项目专注于实现一个可编辑的表格组件，旨在帮助开发者更好地理解和应用Vue3的组件化思想，提升面试竞争力，并优化开发流程。以下是对这个表格组件封装过程的...
Vue开发之封装分页组件与使用示例
10-17
在Vue.js应用中，封装分页组件是一种常见的做法，它能提高代码的可复用性和模块化程度。这里我们将深入探讨如何在Vue中封装一个基于Element UI库的分页组件，并展示其使用方法。 首先，Element UI是一个流行的前端...
vue 封装的 echarts 组件
03-05
vue 封装的 echarts 组件，主要传递四个参数到组件中，title、legend、series、xAxis，分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用，数据被覆盖问题解决办法。
vue结合elementUI实现tag多标签页
热门推荐
q1ngqingsky的博客
12-26 1万+
vue结合elementUI实现tag多标签页 点击左侧菜单栏，会打开一个相应的tag标签页 点击tag标签可以在不同tag之间切换 如图： 以上图片的布局如下： <el-container> <BaseAside /> <el-main> <el-header> <AppTag /> </el-header> <el-mai
vue 自定义tag封装组件，可左右切换直接调用可用
weixin_39277183的博客
08-30 1211
自定义封装tabs实现左右切换
Vue实现TagView标签导航栏缓存，解决重新进去页面不刷新问题
weixin_42343966的博客
10-11 6286
Vue实现tag标签导航栏缓存，重新进去页面不刷新
vue+element 实现input内添加tag+tag的自定义变色
qq_44426236的博客
06-02 6405
vue+element 实现input内添加tag+tag的自定义变色
vue3实现tags
a1831511974的博客
11-20 2406
首先先用el-tag搭好架子 <template> <div class="tags"> <!-- tags标签页 --> <el-tag :key="tag.name" v-for="(tag,index) in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClos
vue使用Ant design的a-tag事件@close的问题
m0_52948787的博客
02-10 1729
<a-tag v-for="val in item.childs" :key="val.id" color="blue" closable @close="deleteLabelOrGroup(val.id)" > {{val.name}} </a-tag> a-tag在v-for的时候:key不能使用index 否则会出现一次删除两个标签的情况 ...
vue3+ Element-Plus 点击勾选框往input中动态添加多个tag
u010797364的博客
06-13 863
主要是这一块代码：v-for 遍历 uniqueArray数组 显示一个个tag，每一个tag后面有一个清除图标和removeTag事件。
Vue组件封装与NPM发布实战指南
"Vue组件封装并使用NPM发布的教程，介绍如何将Vue组件打包成可发布的npm库，供他人在项目中引用。" 在 Vue 开发中，组件封装是提高代码复用性和组织效率的关键步骤。这篇教程主要指导开发者如何将自定义的Vue组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值