vue3 TagInput 实现

最新推荐文章于 2025-03-09 23:00:40 发布
最新推荐文章于 2025-03-09 23:00:40 发布
阅读量858 收藏
点赞数 5
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43285360/article/details/142420598
版权

效果

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

大致原理

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

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

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

封装组件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
DeepSeek 助力 Vue3 开发：打造丝滑的时间选择器（Time Picker）
宝码香车的博客
03-03 953
在当今这个科技飞速发展的时代，人工智能（AI）无疑是最为耀眼的领域之一。从智能语音助手到自动驾驶汽车，从图像识别技术到自然语言处理，AI 正以前所未有的速度渗透到我们生活的方方面面，深刻地改变着我们的生活方式和工作模式。而在这波澜壮阔的 AI 浪潮中，DeepSeek 宛如一颗璀璨的新星，迅速崛起，吸引了全球的目光。
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加导出数据功能
最新发布
宝码香车的博客
03-17 1187
DeepSeek，作为先进的人工智能技术，正逐渐崭露头角，为 Vue3 开发注入了新的活力。它凭借强大的自然语言处理能力和智能算法，能够理解开发者的需求，并提供精准的代码生成、智能提示和问题解答等功能，极大地提升了开发效率和代码质量。
vue组件系列之TagsInput详解
12-28
简介 TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。用 vue 来实现还是比较简单的。 先看效果图，下面会一步一步实现他。 注：以下代码需要vue-cli环境才能执行 （一）伪造一个输入框 因为单行的文本框只能展示纯文本，所以图里面的标签实际上都是 html元素,用vue模板来写的话，是这样的: <template> <div class=muli-tags click=&#39;focus&#39;> <button class=&#39;btn&#39; v-for=&#39;(tag, index) in tags&#39; :key=&#39;index&#39;> {{tag}}
vue3+ Element-Plus 点击勾选框往input中动态添加多个tag
u010797364的博客
06-13 1479
主要是这一块代码：v-for 遍历 uniqueArray数组 显示一个个tag，每一个tag后面有一个清除图标和removeTag事件。
vue tags-input组件封装
xingbipai5492的博客
01-21 2860
1、新建一个tagsInput.vue组件 代码如下： <template> <div class="tags_input"> <el-tag v-for="(tag,index) in list" :key="index" closable :di...
Vue3输入框（Input）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
07-25 9373
通过鼠标或键盘输入内容，是最基础的表单域的包装，支持：前缀和后缀；前置和后置标签；三种大小；带清除图标；密码框；带数字提示；禁用；自定义主题色等；总之，功能丰富，简单易用😁😁
Vue-input-tag 使用指南
gitblog_01253的博客
10-18 859
Vue-input-tag 使用指南 vue-input-tag :bookmark: Vue.js 2.0 Input Tag Component 项目地址: https://gitcode.com/gh_mirrors/vu/...
DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之功能优化，添加列宽调整功能Table12
宝码香车的博客
03-09 931
DeepSeek 大模型在医疗领域的推理、分析能力进行病情分析、报告解读、诊疗方案推荐等。在门诊电子病历和住院电子病历界面增加了 “DeepSeek 智能应用” 菜单，医务人员可快速、安全地调用大模型。
推荐开源项目：Vue Tags Input - 灵活高效的Vue标签输入组件
gitblog_00045的博客
05-16 666
推荐开源项目：Vue Tags Input - 灵活高效的Vue标签输入组件 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 在前端开发中，高效便捷的标签输入组件常常是提升用户体验的关键之一。vue-tags-input 是一款为VueJS量身定制的标签输入组件，它提供了自动补全、自定义验证、模板定制等多项高级特性，让您的应用中的标签输入功能更加智能和友好。 2、项...
vue-tags-input组件使用指南(推荐)
10-15
主要介绍了vue-tags-input组件使用指南,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue-tags-input:VueJS的标签输入组件
04-28
Vue标签输入 VueJS的标签输入组件，具有自动补全，自定义验证，模板化等功能 特征 没有依赖关系 自定义验证规则 挂钩：添加之前，删除之前... 创建后编辑标签 快速设置 与Vuex一起使用 小尺寸：最小34kb（包括CSS）| 压缩9kb 自动补全 许多定制选项 自己的模板 删除退格上的标签 在粘贴上添加标签 范例与文件 安装 NPM npm install @johmun/vue-tags-input CDN [removed][removed] 用法 < template> < div> < vue-tags-input v-model =" tag " :tags =" tags "
vue-tag-input
05-18
Vue标签输入 可自定义的组件，用于标签输入，支持自动完成功能。 入门 安装 从CLI推荐intall： npm install --save vue-tag-input // OR yarn add vue-tag-input 如果要直接包含脚本： <!-- Load Script --> < script src =" https://cdn.jsdelivr.net/npm/vue-tag-input/dist/umd/vue-tag-input.js " > </ script > <!-- Load Style --> < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/vue-tag-input/dist/umd/vue-tag-input.css "
vue-tagsinput：使用Vue.js构建的带有预输入（自动完成）的简单标签输入2
02-06
Voerro Vue标签输入v2 使用Vue.js内置的typeahead输入的简单标签2。 通过NPM安装 npm i @voerro/vue-tagsinput --save-dev 要么 npm i @voerro/vue-tagsinput --save 然后向Vue注册组件： import VoerroTagsInput from &#39;@voerro/vue-tagsinput&#39; ; Vue . component ( &#39;tags-input&#39; , VoerroTagsInput ) ; 在页面上包含dist/style.css文件以应用样式。 您可以使用CDN，在JS代码中使用
vue-input-tag：Vue.js 2.0输入标签组件
02-06
Vue输入标签 一个受启发的Vue.js 2.0输入标签组件 安装 NPM /纱线 npm install vue-input-tag --save yarn add vue-input-tag 然后，您需要导入并注册它： import InputTag from &#39;vue-input-tag&#39; Vue . component ( &#39;input-tag&#39; , InputTag ) CDN < script src =" https://unpkg.com/vue " > </ script > < script src =" https://unpkg.com/vue-input-ta
vue-tagsinput一个简单的标签输入Vue.js 2组件，具有typeahead / autocomplete-Vue.js开发
05-27
Voerro Vue标签输入v2使用Vue.js内置的typeahead输入简单标签2.通过NPM npm i @ voerro / vue-tagsinput --save-dev Voerro Vue标签输入v2进行现场演示安装通过Vue构建的typeahead输入简单标签.js 2.通过NPM npm i @ voerro / vue-tagsinput --save-dev或npm i @ voerro / vue-tagsinput --save进行现场演示安装然后向Vue注册该组件：从&#39;@ voerro / vue-中导入VoerroTagsInput标签输入&#39;; Vue.component（&#39;tags-input&#39;，VoerroTagsInput）; 在页面上包含dist / style.css文件以应用样式。 您可以使用CDN，在JS代码中使用require（）或在（S）CSS资产中@include它。 [R
vue项目中封装一个el-input支持输入标签tag类
2301_76285550的博客
05-11 1678
el-input支持输入标签tag类参照el-select组件源码进行修改！
自定义在input生成tag标签样式，标签可删除。组件封装
Sunny_lxm的博客
11-02 1381
自定义在input生成tag标签样式，标签可删除
好用的组件Vue Tags Input 输入框标签
与世无争的小垃圾
09-01 5143
分享一个好用的输入框标签 找了好久input tags的标签这个算是比较好看并且文档比较全的组件必须分享❤️ 文档地址：http://www.vue-tags-input.com/#/ 然后说一下我根据项目改动的地方和我觉得会比较常用的参数 allow-edit-tags：允许编辑标签，定义标签在创建后是否可编辑。 max-tags：标签数组允许容纳的最大数量 maxlength：允许输入的最大字符数。 placeholder：placeholder v-model：无需解释 <template&g
【Vue3 Element UI - Plus + Tyscript 实现Tags标签输入及回显】
qq_45973421的博客
03-06 1284
是一个常见的功能需求。用户可以通过输入框添加标签，并通过关闭按钮删除标签，同时还需要支持标签数据的提交和回显。本文将详细介绍如何使用。通过以上实现，我们完成了动态标签的添加、删除、提交和回显功能。用户可以通过输入框添加新标签，并通过关闭按钮删除标签。希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区留言讨论~在编辑表单时，需要从接口获取已保存的标签数据并回显到页面上。在开发后台管理系统或表单页面时，渲染标签列表，并使用。动态标签的核心是通过。字段随表单一起提交。
Vue3结合tinyMCE实现富文本编辑器教程
本知识点将详细探讨在 Vue 3 中集成 tinyMCE 的方法，以及如何利用 Vue 3 的新特性来优化开发体验。 ### Vue 3 中使用 tinyMCE 的基础知识 Vue 3 是 Vue.js 的最新主要版本，其官方文档提供了在 Vue 3 项目中集成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值