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

vue3中标签form插件

想写一个系统,对八字进行标注,比如格局,有些八字就有很多格局,于是就想着使用el-tag但是,form表单中如何处理呢?
1
这个时候,就需要自己写一个,modelValue是表单的默认属性

<template><div><el-tag v-for="(item,index) in keywordTags" :key="index" closable @close="handleClose(tag)"size="small" class="mx-1">{{item}}</el-tag><el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm"></el-input><el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">+ 新增</el-button></div>
</template>
<script lang="ts" setup>
const inputVisible = ref(false)
import { nextTick,ref,watch,getCurrentInstance } from 'vue'
import type { FormInstance, FormRules,ElInput  } from 'element-plus'
const { proxy }: any = getCurrentInstance();
const emits = defineEmits(['update:modelValue'])
const props = defineProps<{modelValue:String,}>()
const keywordTags = ref([])
const inputValue = ref('')
const InputRef = ref<InstanceType<typeof ElInput>>()
const showInput  = () =>{inputVisible.value = truenextTick(() => {InputRef.value!.input!.focus()})
}
const handleClose = (tag:String) => {keywordTags.value.splice(keywordTags.value.indexOf(tag),1)
}
const handleInputConfirm = () => {if (inputValue.value) {keywordTags.value.push(inputValue.value)}inputVisible.value = falseinputValue.value = ''
}   
watch(()=>keywordTags,(newVal,oldVal)=>{if (!proxy.$_.isEmpty(newVal.value)){console.log(newVal.value.join(','))emits('update:modelValue',newVal.value.join(','))}
},{immediate:true,deep:true})
watch(()=>props.modelValue,(newVal,oldVal)=>{if (!proxy.$_.isEmpty(newVal)){keywordTags.value = newVal.split(',')}
},{immediate:true,deep:true})
</script>
<style lang="less" scoped>
.w-20{width: 50px;
}
.mx-1{margin-right: 10px;
}
</style>
</style>

使用的话参见,这样保存和编辑就很容易了。

<el-form-item label="标签" prop="tags"><udf-tags v-model="form.tags"></udf-tags>
</el-form-item>

相关文章:

vue3中标签form插件

想写一个系统&#xff0c;对八字进行标注&#xff0c;比如格局&#xff0c;有些八字就有很多格局&#xff0c;于是就想着使用el-tag但是&#xff0c;form表单中如何处理呢&#xff1f; 这个时候&#xff0c;就需要自己写一个,modelValue是表单的默认属性 <template><…...

企业数字化转型:1个核心、2种力量、3个关键点、4大转型、5大平台

引言 企业数字化转型源于当今数字化时代的巨大变革。随着科技的飞速发展和全球市场的日益竞争&#xff0c;企业们正面临着前所未有的挑战和机遇。这些挑战包括消费者行为的变化、新技术的涌现以及市场竞争的加剧。在这种环境下&#xff0c;传统的商业模式和运营方式已经不再适…...

Agilent安捷伦E4990A阻抗分析仪20Hz

Agilent安捷伦E4990A阻抗分析仪性能卓越&#xff0c;适用于元器件、半导体和材料测量。它具有宽广的频率范围&#xff0c;从20Hz到120MHz&#xff0c;能够适应各种不同的阻抗测量需求。在宽阻抗范围内&#xff0c;该仪器能够提供出色的0.045%&#xff08;典型值&#xff09;基本…...

性能优化-OpenMP概述(一)-宏观全面理解OpenMP

本文旨在从宏观角度来介绍OpenMP的原理、编程模型、以及在各个领域的应用、使用、希望读者能够从本文整体上了解OpenMP。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础…...

Prometheus实战篇:Prometheus监控nginx

准备环境 在此专栏的前几篇文章中已经准备了一台服务器作为我们进行环境的准备.大家也可以通过虚拟机创建俩台服务器,一台作为Prometheus的安装另外一台进行其他软件安装并且进行监控的服务器. 这里我就不赘述nginx的安装教程,相信大家都可以搜到,使用docker或者直接通过安装包…...

JVM加载class文件的原理机制

1、JVM 简介 JVM 是我们Javaer 的最基本功底了&#xff0c;刚开始学Java 的时候&#xff0c;一般都是从“Hello World ”开始的&#xff0c;然后会写个复杂点class &#xff0c;然后再找一些开源框架&#xff0c;比如Spring &#xff0c;Hibernate 等等&#xff0c;再然后就开发…...

如何使用CapSolver解决Web爬虫中遇到的CAPTCHA问题

Web爬取是一种强大的技术&#xff0c;用于从网站中提取数据&#xff0c;但经常会遇到一个常见障碍&#xff0c;即CAPTCHA。CAPTCHA是“Completely Automated Public Turing test to tell Computers and Humans Apart”的缩写&#xff0c;旨在防止自动机器人访问网站。然而&…...

杰发科技AC7801——IO模拟IIC注意事项

7801的参考手册没有说清楚 7840说明了用开漏 使用办法...

展台搭建与设计都有哪些思路

1、现代简约 设计理念强调简洁、线条清晰和空间布局&#xff0c;突出产品本身&#xff0c;使展台干净整洁&#xff0c;适合展示高科技、现代化的产品。 2、自然生态 利用植物、木材等自然元素&#xff0c;营造与自然和谐共处的氛围&#xff0c;适合健康、环保、生态产品。 3、品…...

解决mock单元测试中 无法获取实体类xxx对应的表名

错误描述&#xff1a;在执行单元测试时&#xff0c;执行到new Example时抛出异常&#xff0c;提示无法获取实体类xxx对应的表名 Example example new Example(ServeSubscribeRecord.class);Example.Criteria criteria example.createCriteria();criteria.andEqualTo("se…...

arm64虚拟化技术与kvm实现原理分享

文章目录 1 简介2 arm64 虚拟化相关硬件支持2.1 arm64 cpu 虚拟化基本原理及硬件支持2.2 系统寄存器捕获和虚拟寄存器支持2.3 VHE 特性支持2.4 内存虚拟化支持2.5 IO 虚拟化支持2.6 DMA 虚拟化支持2.7 中断虚拟化支持2.8 定时器虚拟化支持 3 arm64 kvm 初始化流程3.1 初始化总体…...

选择 省市区 组件数据 基于vue3 + elment-plus

h5 <el-cascader v-model"form.area" :props"{value: label,label: label }" :options"jsonData" change"handleChange" style"width: 100%;" /> script import jsonData from /utils/city.json; 选完省市区 数据是一…...

了解 nextTick

一. 什么是 nextTick 简单的说&#xff0c;nextTick 方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。 它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。…...

C++精进之路(十六)string类和标准模板库

C提供了一组功能强大的库&#xff0c;这些库提供了很多常⻅编程问题的解决方案以及简化其他问题的工具。 string 类为将字符串作为对象来处理提供了一种方便的方法。string 类提供了自动内存管理功能以及众多处 理字符串的方法和函数。例如&#xff0c;这些方法和函数让您能够合…...

【23.12.29期--Redis缓存篇】谈一谈Redis的集群模式

谈一谈Redis的集群模式 ✔️ 谈一谈Redis的集群模式✔️主从模式✔️ 特点✔️Redis主从模式Demo ✔️哨兵模式✔️Redis哨兵模式Demo✔️特点 ✔️Cluster模式✔️Redis Cluster模式Demo✔️特点 ✔️ 谈一谈Redis的集群模式 Redis有三种主要的集群模式&#xff0c;用于在分布…...

【算法挨揍日记】day34——647. 回文子串、5. 最长回文子串

647. 回文子串 647. 回文子串 题目描述&#xff1a; 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串&am…...

欧科云链研究院:奔赴2024,Web3与AI共振引爆数字时代潘多拉魔盒

出品&#xff5c;欧科云链研究院 2024年&#xff0c;Web3与AI两个数字科技的巅峰碰撞&#xff0c;欧科云链研究院探索AI与Web3的技术融合&#xff0c;与澎湃科技联合发布2024年展望&#xff0c;原标题为《2024年展望&#xff1a;Web3与AI共振引爆可信数字社会》&#xff0c;共…...

【Py/Java/C++三种语言OD2023C卷真题】20天拿下华为OD笔试之【数学】2023C-素数之积【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例输入输出说明 解题思路暴力解质数筛 代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 RSA加密算法在网络安全世界中无处不在&#xff0c;它利用了极大些数因数分解的闲难…...

uniapp路由

1、路由登记 uni-app页面路由为框架统一管理&#xff0c;开发者需要在pages.json里配置每个路由页面的路径及页面样式。 类似小程序在 app.json 中配置页面路由一样。 所以 uni-app 的路由用法与 Vue Router 不同&#xff0c;如仍希望采用 Vue Router 方式管理路由&#xff0c;…...

湖南大学-数据库系统-2023期末考试【原题】

前言 早上11&#xff1a;00考完的考试&#xff0c;下午回来打了三把LOL之后&#xff0c;凭着回忆把题目重现出来了。 在复习的时候刷了15&#xff0c;16&#xff0c;17&#xff0c;18&#xff0c;19&#xff0c;21六年的卷子&#xff0c;感觉题目都差不多&#xff0c;但是难度…...

【Java EE初阶九】多线程案例(线程池)

一、线程池的引入 引入池---->主要是为了提高效率&#xff1b; 最开始&#xff0c;进程可以解决并发编程的问题&#xff0c;但是代价有点大了&#xff0c;于是引入了 “轻量级进程” ---->线程 线程也能解决并发编程的问题&#xff0c;而且线程的开销比进程要小的多&…...

理解 Node.js 中的事件循环

你已经使用 Node.js 一段时间了&#xff0c;构建了一些应用程序&#xff0c;尝试了不同的模块&#xff0c;甚至对异步编程感到很舒适。但是有些事情一直在困扰着你——事件循环&#xff08;Event Loop&#xff09;。 如果你像我一样&#xff0c;花费了无数个小时阅读文档和观看…...

Mac 软件出现「意外退出」及「打不开」解决方法

Mac 软件出现「意外退出」及「打不开」解决方法 软件出现意外退出及软件损坏的情况&#xff0c;这是因为苹果删除了TNT的证书&#xff0c;所以大部分TNT破解的Mac软件会出现无法打开&#xff0c;提示意外退出。 终端需先安装Xcode或Apple命令行工具 如未装Xcode可以使用下列命…...

随机森林 3(代码)

通过随机森林 1和随机森林 2 的介绍&#xff0c;相信大家对理论已经了解的很透彻&#xff0c;接下来带大家敲一下代码&#xff0c;不懂得可以加我入群讨论。 第一份代码是比较原始的代码&#xff0c;第二份代码是第一段代码中引用的primitive_plot&#xff0c;第三份代码是使用…...

勒索事件急剧增长,亚信安全发布《勒索家族和勒索事件监控报告》

近期(12.15-12.21)态势快速感知 近期全球共发生了247起攻击和勒索事件&#xff0c;勒索事件数量急剧增长。 近期需要重点关注的除了仍然流行的勒索家族lockbit3以外&#xff0c;还有本周top1勒索组织toufan。toufan是一个新兴勒索组织&#xff0c;本周共发起了108起勒索攻击&a…...

LeetCode1523. Count Odd Numbers in an Interval Range

文章目录 一、题目二、题解 一、题目 Given two non-negative integers low and high. Return the count of odd numbers between low and high (inclusive). Example 1: Input: low 3, high 7 Output: 3 Explanation: The odd numbers between 3 and 7 are [3,5,7]. Exam…...

E中国铜金属行业需求前景及未来发展机遇分析报告2024-2030年

E中国铜金属行业需求前景及未来发展机遇分析报告2024-2030年 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 《报告编号》: BG471816 《出…...

python SVM 保存和加载模型参数

在 Python 中&#xff0c;你可以使用 scikit-learn 库中的 joblib 或 pickle 模块来保存和加载 SVM 模型的参数。以下是一个简单的示例代码&#xff0c;演示了如何使用 joblib 模块保存和加载 SVM 模型的参数&#xff1a; 保存模型参数&#xff1a; from sklearn import svm …...

JAVA进化史: JDK12特性及说明

JDK 12于2019年3月发布。这个版本相对于之前的版本来说规模较小&#xff0c;主要集中在一些改进和实验性的特性上。以下是JDK 12的一些主要特性&#xff1a; 引入了实验性的Shenandoah垃圾收集器 JDK 12引入了实验性的Shenandoah垃圾收集器&#xff0c;旨在实现极低的暂停时间…...

Databend 的算力可扩展性

作者&#xff1a;尚卓燃&#xff08;PsiACE&#xff09; 澳门科技大学在读硕士&#xff0c;Databend 研发工程师实习生 Apache OpenDAL(Incubating) Committer PsiACE (Chojan Shang) GitHub 对于大规模分布式数据处理系统&#xff0c;为了更好应对数据、流量、和复杂性的增长…...

新疆模板网站建设/网站推广外贸

https://www.cnblogs.com/hyl8218/p/5088287.html转载于:https://www.cnblogs.com/xt-Corrine/p/10685869.html...

网页制作实践 做网站/互联网营销师培训内容

借鉴php安装错误 2013-01-04 19:16:49分类&#xff1a;系统运维环境&#xff1a;centos X64 最小化安装php版本&#xff1a;php-5.4.3安装前.先安装些软件和库文件yum install -y gcc gcc-c make zlib zlib-devel pcre pcre-devel libjpeg libjpeg-devel libpng libpng-devel…...

videopro wordpress/百度如何发布作品

Q:我用outlook下载了邮箱里所有的邮件&#xff0c;现在想刻盘保存&#xff0c;我应该保存哪些文件呢&#xff0c;以保证我把光盘内的数据放到其他电脑上还可以用outlook查看我的这些邮件&#xff1f; A:找到你outlook的按装文件&#xff0c;你可以全部刻下来&#xff0c;到后期…...

网站页面一般做多大/爱站网综合查询

在Android SDK Manager 中安装Android 8.1.0 SDK Platform时报错导致无法安装。错误信息&#xff1a;Downloading SDK Platform Android 8.1.0, API 27, revision 1 Download finished with wrong size. Expected 65606517 bytes, got 65738431 bytes.1、如图在SDK Manager中选…...

北京产品设计公司/seo常用工具网站

c3中的弹性盒子 一&#xff1a;display:box /display:box-flex/display:flex都是弹性盒子模型的父元素属性&#xff0c;只不过前两个是以前的老属性&#xff0c;浏览器在更新&#xff0c;规范也在更新&#xff0c;老属性也就被留了下来&#xff0c;现在主要使用第三种样式。 首…...

网站开发的外文文献/拓客渠道有哪些

入门案例测试数据表结构介绍导入测试数据按照日期统计订单总额/总数量&#xff08;Hive方式&#xff09;按照日期统计订单总额/总数量&#xff08;Kylin方式&#xff09;创建项目&#xff08;Project&#xff09;创建数据源&#xff08;DataSource&#xff09;创建模型&#xf…...