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

vue3 TagInput 实现

效果

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

大致原理

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

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

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

封装组件


http://www.mrgr.cn/news/31846.html

相关文章:

  • .NET 9 中 IFormFile 的详细使用讲解
  • UE5材质篇 4 材质表面雨滴打落
  • Rust开发一个命令行工具(一,简单版持续更新)
  • 微信小程序内嵌h5页面(uniapp写的),使用uni.openLocation无法打开页面问题
  • 随手记:简单实现纯前端文件导出(XLSX)
  • 操作系统——进程调度
  • 如何把python(.py或.ipynb)文件打包成可运行的.exe文件?
  • 毕业季,论文的开题报告对大学生来说意味着什么?
  • ESP32调用本地部署的ChatTTS
  • C++第1课——输出、变量和输入(含视频讲解)
  • 我与Linux的爱恋:命令行参数|环境变量
  • 2024CSP-J初赛
  • string类(C++)
  • LeetCode 滑动窗口 最少交换次数来组合所有的 1 II
  • 湖北师范大学-Java入门 - 分支结构
  • 基于单片机汽车驾驶防瞌睡防疲劳报警器自动熄火设计
  • 浅谈Python之协程
  • 以STM32CubeMX创建DSP库工程方法二
  • 与姜妍同款冰箱,容声516WILL养鲜冰箱领“鲜”上市
  • Tomcat 乱码问题彻底解决
  • Go语言笔记
  • 计算机网络:物理层 --- 基本概念、编码与调制
  • mac新手入门(快捷键)
  • 电脑是否有问题?检测软件别再乱下载了,只要用这一款工具箱,就可以满足你的需求!
  • FLUX.1+ComfyUI部署与使用:图像合成技术的新高度
  • 大数据实验一: Linux系统安装和使用