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

vue3 TagInput 实现

article 2025/2/21 3:50:59

效果

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

大致原理

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

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

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

封装组件


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

相关文章：

  • 监控易监测对象及指标之：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荣获第九届“创客中国”智能机器人中小企业创新创业大赛三等奖