当前位置： 首页 > article >正文

vue3 TagInput 实现

article 2024/11/20 11:24:06

效果

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

大致原理

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

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

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

封装组件


http://www.kler.cn/a/322391.html

相关文章：

  • 生成式语言模型 三范式 预训练、微调、强化反馈学习
  • ### 哋它亢在5G基站中的应用：新兴技术与未来通信的融合
  • Python | Leetcode Python题解之第564题数组嵌套
  • 多线程4：线程池、并发、并行、综合案例-抢红包游戏
  • 亿咖通科技应邀出席微软汽车行业智享会，分享ECARX AutoGPT全新实践
  • 【售前方案】工业园区整体解决方案，智慧园区方案，智慧城市方案，智慧各类信息化方案（ppt原件）
  • 监控易监测对象及指标之：Kubernetes（K8s）集群的全方位监控策略
  • webpack与vite读取base64图片
  • django开发流程1
  • manim中实现文字换行和设置字体格式
  • MySQL篇（日志）
  • blender设置背景图怎么添加？blender云渲染选择
  • 学Python再学C++是走弯路？
  • centos7 yum 更新 nginx 到最新版本 1.26
  • 【Kotlin 集合概述】可变参数vararg、中缀函数infix以及解构声明(二十)
  • MySQL record 07 part
  • 自动化办公-Python-os模块的使用
  • 标准 I/O
  • 西门子6ES7414-4HM14-0AB0 CPU模块的优缺点
  • 最佳植树距离 - 华为OD统一考试(E卷)
  • 记录Mac编译Android源码踩过的坑
  • offset、client 和 scroll【JavaScript】
  • 这些主流的财务管理软件，你用过哪款？
  • 计算机网络中的VLAN详解
  • ASCII Unicode UTF-8 字符集 字符编码
  • 喜报丨INDEMIND荣获第九届“创客中国”智能机器人中小企业创新创业大赛三等奖