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

vue3 TagInput 实现

效果

要实现类似于下面这种效果

大致原理

其实是很简单的,我们可以利用 element-plus 组件库里的 el-tag 组件来实现

这里我们可以将其抽离成一个公共的组件,那么现在有一个问题就是通讯问题

这里我们可以利用父子组件之间的通讯,利用 v-model 来实现,父组件传值,子组件负责展示,同时在子组件里可以更改该值,那么这个时候就需要在更改后通知父组件进行对应的改变,就需要用到 defineProps 和 defineEmits,主要利用update:modelValue实现

封装组件

http://www.lryc.cn/news/445421.html

相关文章:

  • mysql中的json查询
  • Etcd权限认证管理
  • 图文组合商标部分驳回后优化后初审通过!
  • 【最新华为OD机试E卷-支持在线评测】爱吃蟠桃的孙悟空(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)
  • BUUCTF [SCTF2019]电单车详解两种方法(python实现绝对原创)
  • Apache James配置连接达梦数据库
  • Java实现栈
  • 数据结构—栈
  • 服务设计原则介绍
  • 【Qualcomm】高通SNPE框架的使用 | 原始模型转换为量化的DLC文件 | 在Android的DSP端运行模型
  • 爬虫的流程
  • Git之如何删除Untracked文件(六十八)
  • k8s集群自动化管理
  • yum库 docker的小白安装教程(附部分问题及其解决方案)
  • python如何实现日期加减
  • springboot实战学习笔记(4)(Spring Validation参数校验框架、全局异常处理器)
  • 网络七层协议
  • 从 Oracle 集群到单节点环境(详细记录一次数据迁移过程)之一:生产环境与目标服务器详情
  • 【软件测试】详解测试中常用的几种测试方法
  • 开始学习深度学习-前言
  • Liveweb视频汇聚平台支持GB28181转RTMP、HLS、RTSP、FLV格式播放方案
  • 详解c++:new和delete
  • 【深度学习】(5)--搭建卷积神经网络
  • 边学英语边学 Java|Synchronization in java
  • k8s StorageClass 存储类
  • 3D Slicer医学图像全自动AI分割组合拳-MONAIAuto3DSeg扩展
  • 分布式光伏的发电监控
  • 微信小程序----日期时间选择器(自定义时间精确到分秒)
  • 3D生成技术再创新高:VAST发布Tripo 2.0,提升AI 3D生成新高度
  • ONNX Runtime学习之InferenceSession模块