CN116893813A - 一种基于ElementUI封装标签输入框组件的方法、系统、装置及存储介质 - Google Patents

Abstract

本发明公开了一种基于ElementUI封装标签输入框组件的方法、系统、装置及存储介质，基于Vue.js技术栈，在Element UI已有el‑tag组件的基础上，封装一个新的组件，用以实现Element UI无法满足的标签输入、标签校验、拖拽等功能。各个业务线只需要进行简单的配置，就可以使用这个新组件，提升前端人员开发效率的同时，也降低了代码维护的成本。

Description

一种基于ElementUI封装标签输入框组件的方法、系统、装置 及存储介质

技术领域

本发明涉及web前端组件开发领域，尤其涉及一种基于ElementUI封装标签输入框组件的方法、系统、装置及存储介质。

背景技术

Element UI是一个提供了丰富基础组件的UI库，使用简单便捷，上手成本低。但是，Element UI自身的el-tag组件功能单一，只提供了简单的标签展示、删除和新增功能，没有提供标签字段合法性校验、错误提示、拖拽等复杂能力。

Element UI自身的el-input输入框组件，只能满足用户输入和回显的需求，无法实现用户在输入完成按回车键后，在输入框中自动生成标签的功能，也没有根据用户自定义分隔符自动解析为多标签的能力。业务中需要让用户自己输入tag名称、以逗号分隔多个tag，这种纯输入框的形式无法对用户的输入进行准确的判断，也无法对有错误的tag进行错误标记，也无法完成对字段位置的调整。

另外，如果让每个业务线都单独去封装新的标签输入框组件，一方面会使得相同的能力在不同的业务代码里重复书写，造成代码的冗余。另一方面，由于每个前端开发人员的书写习惯、代码逻辑等不同，会导致代码风格的不统一，使得后续维护困难。

综上所述，本发明设计了一种基于ElementUI封装标签输入框组件的方法，用于解决上述问题。

发明内容

针对Elemenet UI现有功能的不足、不同业务线单独开发标签输入框组件可能带来的问题，本发明设计了一种基于Element UI封装标签输入框组件的方法，基于Vue.js技术栈，在Element UI已有el-tag组件的基础上，封装一个新的组件，用以实现Element UI无法满足的标签输入、标签校验、拖拽等功能。各个业务线只需要进行简单的配置，就可以使用这个新组件，提升前端人员开发效率的同时，也降低了代码维护的成本。

本发明的目的是通过以下技术方案来实现的：第一方面，本发明提供了一种基于ElementUI封装标签输入框组件的方法，该方法包括以下步骤：

(1)新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

(2)在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；

(3)tag-input组件内部维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；

(4)tag-input组件能够抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

(5)tag-input组件内部提供以下公共方法，通过组件实例进行调用：

clear方法，用于清空所有tag；

validate方法，用于结合validateMethod，对全部节点进行校验；

validateTag方法，用于结合validateMethod，对单个节点进行校验，其参数为需要校验的tag；

removeValidate方法，用于移除所有tag的校验信息；

removeValidateTag方法，用于移除单个tag的校验信息，其参数为需要校验的tag。

进一步地，对tag-input组件的配置具体如下：

基于props传入的参数value，在created生命周期中，对数据进行初始化处理，参数类型是字符串数组，数组的个数即为要显示的标签数；

基于props传入的参数mincollapsedNum控制超出几个标签后进行折叠；

基于props传入的参数max用于控制用户最多可以添加几个标签，超出后则无法添加；

基于props传入的参数draggable用于配置标签是否可拖拽更换位置；

基于props传入的参数disabled用于配置标签是否置灰；

基于props传入的参数readonly用于配置标签是否只读；

基于props传入的参数type用于控制标签的类型，展示不同颜色的标签；

基于props传入的参数separator用于判断是否需要根据指定分隔符对用户的输入进行切分，实现一次输入生成多个tag；

基于props传入的参数validateMethod，对tag值进行校验，参数类型是一个方法；

基于props传参beforeTagAdd，在tag添加前调用，参数类型是一个方法，返回值如果是false，则无法添加；

基于props传参beforeTagDel，在tag删除前调用，参数类型是一个方法，返回值如果是false，则无法删除。

第二方面，本发明还提供了一种基于ElementUI封装标签输入框组件的系统；该系统包括Vue组件建立模块、tag-input组件配置模块、tag-input组件事件抛出模块和tag-input组件方法调用模块；

所述Vue组件建立模块用于新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

所述tag-input组件配置模块用于在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；并维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；

所述tag-input组件事件抛出模块用于抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

所述tag-input组件方法调用模块用于提供以下调用方法：

clear方法，用于清空所有tag；

validate方法，用于结合validateMethod，对全部节点进行校验；

validateTag方法，用于结合validateMethod，对单个节点进行校验，其参数为需要校验的tag；

removeValidate方法，用于移除所有tag的校验信息；

removeValidateTag方法，用于移除单个tag的校验信息，其参数为需要校验的tag。

第三方面，本发明还提供了一种基于ElementUI封装标签输入框组件的装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现所述的一种基于ElementUI封装标签输入框组件的方法。

第四方面，本发明还提供了一种计算机可读存储介质，其上存储有程序，所述程序被处理器执行时，实现所述的一种基于ElementUI封装标签输入框组件的方法。

本发明的有益效果：

1.本发明基于Element UI封装了一个标签输入框的组件，提供了事前和事后多场景下的校验能力，用户通过简单的配置，就可以实现对输入tag的合法性校验，提高了输入tag的正确性；

2.提供拖拽tag调整顺序、一次输入生成多tag等复杂能力，提高了用户的输入效率；

3.减轻了各业务线上前端研发人员的工作量，以前要写在业务工程里的代码，现在只要引入封装的tag-input组件，通过简单的配置就可以实现想要的功能，代码量大大减少，维护成本也大大降低。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动前提下，还可以根据这些附图获得其他附图。

图1是本发明提供的一种基于ElementUI封装标签输入框组件的方法的流程图。

图2是本发明提供的一种基于ElementUI封装标签输入框组件的系统的结构图。

图3是本发明提供的一种基于ElementUI封装标签输入框组件的装置的结构图。

具体实施方式

为使本发明使用的技术手段、达成的目的和功效易于了解，下面结合具体实施方式，进一步阐明本发明。

如图1所示，本发明提供了一种基于ElementUI封装标签输入框组件的方法，具体步骤如下：

1.新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击组件外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

2.配置tag-input的props参数：在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；具体配置如下：

a.value：字符串数组，用于接收用户输入的tag列表，数组的个数即为要显示的标签数；在组件created生命周期中处理内部响应式数据，渲染在页面上；

b.disabled：是否禁用，表现为配置标签是否置灰；

c.readonly：原生属性，配置标签是否只读；

d.draggable：配置标签是否可拖拽更换位置，绑定在el-ag组件的draggable属性上，当该属性为true时，可触发和其配套的dragstart、dragover、drop拖拽方法；

e.mincollapsedNum：最小折叠个数，用于控制tag个数超出几个时进行折叠展示，折叠后，最后一个tag显示【+n】，悬浮在上面显示所有折叠的tag；

f.max：用户最多可以输入多少个tag，超过后不可输入；

g.placeholder：输入框占位符；

h.type：el-tag自身属性，对应不同的标签类型，用法和el-tag一致，展示不同颜色的标签；

i.autoTrim：是否自动去除tag前后的空格；

j.separator：根据【separator】分隔符对用户输入进行切割，实现一次输入生成多个tag的功能；

k.validateMethod：校验tag的方法；

l.beforeTagAdd：在tag添加前执行的方法，返回值如果是false，则无法完成添加动作；

m.beforeTagDel：在tag删除前执行的方法，返回值如果是false，则无法完成删除动作。

3.tag-input组件内部维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；在created的生命周期中处理响应式数据时，将用户输入的value转化为内部使用的响应式数据tagList，记录每个组件的值和状态；

4.tag-input组件能够抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

5.tag-input组件对外提供了多个方法，可以通过组件实例调用下列方法：

a.clear方法：用于清空所有的tag；

b.validate方法：校验每个tag是否合法，该方法内部会遍历所有的tag，根据用户传入的validateMethod方法，依次对tag进行校验，校验完毕后，执行tag的setStatus方法，修改tag状态，0代表正常，1代表报错，校验不通过则将标签标红；

c.validateTag方法：校验单个tag的合法性，该方法接收一个参数，即需要校验的tag。该方法内部首先会遍历tagList数组，找到指定的tag，然后根据用户传入的validateMethod方法，对tag进行校验，校验完毕后，执行tag的setStatus方法，修改tag状态，0代表正常，1代表报错，如果校验不通过则将标签标红；

d.removeValidate方法：用于移除所有的tag的校验信息；

e.removeValidateTag方法：该方法接收一个参数，用于移除单个tag的校验信息；本发明的tag-input组件内部还维护有多个计算属性：

a.collapseTags用于计算多tag时是否进行折叠显示，当外部传入的最小折叠个数mincollapsedNum大于0时，则进行折叠显示，否则，直接用上面处理的响应式数据tagList进行组件的渲染；

b.nonCollapsedTags是在最小折叠个数mincollapsedNum大于0时，计算不需要折叠的tag列表，直接将nonCollapsedTags循环出来，平铺在tag-input组件里；

c.collapsedTags是在最小折叠个数mincollapsedNum大于0时，计算需要折叠的tag列表，当tagList的长度大于最小折叠个数mincollapsedNum时展示【+n】的tag，鼠标悬浮在该tag上时在悬浮框中显示所有需要折叠的tag；

d.closable用于判断tag是否可关闭，当用户传入的props是readonly或disabled时，不可关闭；

e.validateState用于处理表单校验的情况，el-form-item校验状态为‘error’时，tag-input组件的外边框标红；

f.overflowStyle用于处理tag是否可关闭时的宽度，如果tag可关闭，则tag的宽度为calc(100％-15px)，否则为100％，其中15px是关闭图标所占的宽度；

本发明的tag-input组件内部维护有多个data：

a.innerValue数组，用于返回内部处理后的tag数组，和value双向数据绑定；

b.newTagValue绑定在组件内部的input输入框上，用于记录用户输入的新tag值；

c.tagList用于接收用于传入的value，将value数组处理成组件内部需要使用的tag列表数据；

d.isFocus用于处理是否聚焦，获得焦点时抛出focus事件，失去焦点时抛出blur事件，回调参数均为(event:Event)，聚焦时tag-input外边框高亮；

e.dragStartIndex用于记录拖拽开始的索引；

本发明的tag-input组件在watch里监听外部传入的value值的变化，实时更新组件内部维护的响应式数据tagList；

本发明的tag-input组件内部封装addTag方法，用于在enter事件后往tagList数组里添加新tag：

a.添加新tag之前，先调用组件内部封装的getVal方法，处理用户输入的tag值，根据autoTrim来判断是否需要去除tag前后的空格，同时将input输入框的组件的值置为空，该方法返回一个初步处理过后的值val；

b.如果val为空或者tagList的长度大于用户传入的最大个数max，则直接return；

c.在方法内部封装doAdd方法，用于真正往tagList里添加新tag，该方法首先会判断是否有separator分隔符，如果有则根据分隔符，对getVal方法的返回值进行解析，解析出多个tag，将这些tag依次添加到tagList数组中；如果没有，则直接将getVal方法的返回值添加到tagList数组中；

d.执行添加tag前的方法-用户传入的beforeTagAdd，该方法如果返回的是false则不会执行添加操作，如果该方法不存在或者类型不是function，则直接执行doAdd方法；

e.抛出add-tag、change事件，并更新外部value的值；

本发明的tag-input组件内部封装removeTag方法，当用户点击删除时，删除指定tag：

a.在方法内部封装doDel方法，用于真正删除tagList里的数组；

b.执行删除tag前的方法-用户传入的beforeTagDel，该方法如果返回的是false则不会执行删除操作，如果该方法不存在或者类型不是function，则直接执行doDel方法；

c.抛出remove-tag、change事件，并更新外部value的值；

本发明的tag-input组件内部封装用于处理拖拽的方法，当draggable为true时可触发：

a.handleDragStart：dragstart绑定的方法，元素开始拖动时触发，该方法内部会记录拖动元素的索引dragStartIndex；

b.handleDragOver：dragover绑定的方法，被拖动的元素hover到目标元素上时触发，为了能触发drop事件，需要在该方法中阻止默认事件；

c.handleDrop：drop绑定的方法，在元素拖动结束时触发，该方法用于更换元素位置，抛出change事件，并更新外部value的值；

如图2所示，本发明还提供了一种基于ElementUI封装标签输入框组件的系统，该系统包括Vue组件建立模块、tag-input组件配置模块、tag-input组件事件抛出模块和tag-input组件方法调用模块；

所述Vue组件建立模块用于新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

所述tag-input组件配置模块用于在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；并维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；

所述tag-input组件事件抛出模块用于抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

所述tag-input组件方法调用模块用于提供以下调用方法：

clear方法，用于清空所有tag；

validate方法，用于结合validateMethod，对全部节点进行校验；

validateTag方法，用于结合validateMethod，对单个节点进行校验，其参数为需要校验的tag；

removeValidate方法，用于移除所有tag的校验信息；

removeValidateTag方法，用于移除单个tag的校验信息，其参数为需要校验的tag。

与前述一种基于ElementUI封装标签输入框组件的方法的实施例相对应，本发明还提供了一种基于ElementUI封装标签输入框组件的装置的实施例。

参见图3，本发明实施例提供的一种基于ElementUI封装标签输入框组件的装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，用于实现上述实施例中的一种基于ElementUI封装标签输入框组件的方法。

本发明提供的一种基于ElementUI封装标签输入框组件的装置的实施例可以应用在任意具备数据处理能力的设备上，该任意具备数据处理能力的设备可以为诸如计算机等设备或装置。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在任意具备数据处理能力的设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图3所示，为本发明提供的一种基于ElementUI封装标签输入框组件的装置所在任意具备数据处理能力的设备的一种硬件结构图，除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的任意具备数据处理能力的设备通常根据该任意具备数据处理能力的设备的实际功能，还可以包括其他硬件，对此不再赘述。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本发明实施例还提供一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时，实现上述实施例中的一种基于ElementUI封装标签输入框组件的方法。

所述计算机可读存储介质可以是前述任一实施例所述的任意具备数据处理能力的设备的内部存储单元，例如硬盘或内存。所述计算机可读存储介质也可以是任意具备数据处理能力的设备的外部存储设备，例如所述设备上配备的插接式硬盘、智能存储卡(Smart Media Card，SMC)、SD卡、闪存卡(Flash Card)等。进一步的，所述计算机可读存储介质还可以既包括任意具备数据处理能力的设备的内部存储单元也包括外部存储设备。所述计算机可读存储介质用于存储所述计算机程序以及所述任意具备数据处理能力的设备所需的其他程序和数据，还可以用于暂时地存储已经输出或者将要输出的数据。

上述实施例用来解释说明本发明，而不是对本发明进行限制，在本发明的精神和权利要求的保护范围内，对本发明作出的任何修改和改变，都落入本发明的保护范围。

Claims (5)

1.一种基于ElementUI封装标签输入框组件的方法，其特征在于，该方法包括以下步骤：

(1)新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

(2)在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；

(3)tag-input组件内部维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；

(4)tag-input组件能够抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

(5)tag-input组件内部提供以下公共方法，通过组件实例进行调用：

clear方法，用于清空所有tag；

validate方法，用于结合validateMethod，对全部节点进行校验；

validateTag方法，用于结合validateMethod，对单个节点进行校验，其参数为需要校验的tag；

removeValidate方法，用于移除所有tag的校验信息；

removeValidateTag方法，用于移除单个tag的校验信息，其参数为需要校验的tag。

2.根据权利要求1所述的一种基于ElementUI封装标签输入框组件的方法，其特征在于，对tag-input组件的配置具体如下：

基于props传入的参数value，在created生命周期中，对数据进行初始化处理，参数类型是字符串数组，数组的个数即为要显示的标签数；

基于props传入的参数mincollapsedNum控制超出几个标签后进行折叠；

基于props传入的参数max用于控制用户最多可以添加几个标签，超出后则无法添加；

基于props传入的参数draggable用于配置标签是否可拖拽更换位置；

基于props传入的参数disabled用于配置标签是否置灰；

基于props传入的参数readonly用于配置标签是否只读；

基于props传入的参数type用于控制标签的类型，展示不同颜色的标签；

基于props传入的参数separator用于判断是否需要根据指定分隔符对用户的输入进行切分，实现一次输入生成多个tag；

基于props传入的参数validateMethod，对tag值进行校验，参数类型是一个方法；

基于props传参beforeTagAdd，在tag添加前调用，参数类型是一个方法，返回值如果是false，则无法添加；

基于props传参beforeTagDel，在tag删除前调用，参数类型是一个方法，返回值如果是false，则无法删除。

3.一种实现权利要求1-2任一项所述基于ElementUI封装标签输入框组件的方法的基于ElementUI封装标签输入框组件的系统，其特征在于，该系统包括Vue组件建立模块、tag-input组件配置模块、tag-input组件事件抛出模块和tag-input组件方法调用模块；

所述Vue组件建立模块用于新建一个Vue组件，命名为tag-input，引入Element UI提供的el-tag组件，用于在输入框中展示用户输入的tag；注入Element UI提供的el-form-item组件，用于捕捉表单的校验信息；引入Element UI的工具类Clickoutside，用于在点击外部时，让tag-input组件失焦，移除组件聚焦时高亮的样式；

所述tag-input组件配置模块用于在props中定义外部传入的参数名称和数据类型，使用时通过props传参，完成对tag-input组件的配置；并维护一个Tag类，该类定义了tag的唯一key、值value和状态status，并提供了setStatus方法，用于将有问题的标签标红；

所述tag-input组件事件抛出模块用于抛出以下事件：

blur事件，在组件失去焦点时触发，其回调参数为(event:Event)；

focus事件，在组件获得焦点时触发，其回调参数为(event:Event)；

add-tag事件，在添加tag时触发，其回调参数为添加的tag值；

remove-tag事件，在移除tag时触发，其回调参数为移除的tag值；

change事件，在值改变时触发，其回调参数为改变后的tag值组成的数组；

所述tag-input组件方法调用模块用于提供以下调用方法：

clear方法，用于清空所有tag；

validate方法，用于结合validateMethod，对全部节点进行校验；

validateTag方法，用于结合validateMethod，对单个节点进行校验，其参数为需要校验的tag；

removeValidate方法，用于移除所有tag的校验信息；

removeValidateTag方法，用于移除单个tag的校验信息，其参数为需要校验的tag。

4.一种基于ElementUI封装标签输入框组件的装置，包括存储器和一个或多个处理器，所述存储器中存储有可执行代码，其特征在于，所述处理器执行所述可执行代码时，实现如权利要求1-2中任一项所述的一种基于ElementUI封装标签输入框组件的方法。

5.一种计算机可读存储介质，其上存储有程序，其特征在于，所述程序被处理器执行时，实现如权利要求1-2中任一项所述的一种基于ElementUI封装标签输入框组件的方法。