一种基于Angular的多功能配置型输入方法及系统技术方案

本发明专利技术公开了一种基于Angular的多功能配置型输入方法及系统，属于UI设计领域和前端交互领域；所述的方法具体步骤包括：S1在brk‑input选择器内创建BrkInputComponent组件；S2设定BrkInputComponent组件交互动画功能；S3设定BrkInputComponent组件对输入框值做合法性检查；S4利用配置后的BrkInputComponent组件进行配置开发；通过图标配置、动画交互、输入反馈和限制策略等配置方式为开发者提供方便，提高可用性和易用性。

【技术实现步骤摘要】
一种基于Angular的多功能配置型输入方法及系统
本专利技术公开一种基于Angular的多功能配置型输入方法及系统，涉及UI设计领域和前端交互

技术介绍
基于Angular框架开发的前端组件库非常有限，开发者在进行框架选择时没有多样选项，该专利技术对输入框进行了全面的设计，主要特点包括：提供图标配置，可将图标自定义配置到输入框的指定位置；提供交互动画，输入框在聚焦、输入和失去焦点的时刻都有适当的动画予以反馈；提供输入提示和错误反馈机制，全程保障用户填写表单的成功率；提供输入内容的限制策略，例如仅限文本、数字、或者对输入的数字大小进行限制等。目前基于Angular开发的前端组件库最常用的就是ng-zorro-antd，开发者对组件库的选择缺乏多样性，导致前端项目开发中的一些需求可能无法匹配到合适的组件库。针对前端领域的组件库匮乏问题，特开发一套输入组件填充空白，先专利技术一种基于Angular的多功能配置型输入方法及系统，以解决上述问题。
技术实现思路
本专利技术针对现有技术的问题，提供一种基于Angular的多功能配置型输入方法及系统，所采用的技术方案为：一种基于Angular的多功能配置型输入方法，所述的方法具体步骤包括：S1在brk-input选择器内创建BrkInputComponent组件；S2设定BrkInputComponent组件交互动画功能；S3设定BrkInputComponent组件对输入框值做合法性检查；S4利用配置后的BrkInputComponent组件进行配置开发。所述S1中的BrkInputComponent组件创建在根目录brk的input文件夹下。所述S2引入@angular/animations模块设定BrkInputComponent组件交互动画功能，具体设定步骤如下：S201判断输入框是否聚焦；S202输入框失去焦点时，BrkInputComponent组件在输入框顶层放置DIV；S203输入框聚焦时，BrkInputComponent组件对DIV进行调整编辑；所述S3引入FormsModule模块和ReactiveModule模块设定BrkInputComponent组件对输入框值做合法性检查，具体设定步骤如下：S301创建响应式表单；S302BrkInputComponent组件利用支持Angular的内置验证器Validators检查输入框值合法性；S303BrkInputComponent组件利用自定义校验正则表达式对输入框内容进行判断。一种基于Angular的多功能配置型输入系统，所述的系统具体包括组件创建模块、交互设定模块、检查设定模块和组件应用模块：组件创建模块：在brk-input选择器内创建BrkInputComponent组件；交互设定模块：设定BrkInputComponent组件交互动画功能；检查设定模块：设定BrkInputComponent组件对输入框值做合法性检查；组件应用模块：利用配置后的BrkInputComponent组件进行配置开发。所述组件创建模块中的BrkInputComponent组件创建在根目录brk的input文件夹下。所述交互设定模块引入@angular/animations模块设定BrkInputComponent组件交互动画功能，交互设定模块具体包括判断模块、失焦处理模块和聚焦处理模块：判断模块：判断输入框是否聚焦；失焦处理模块：输入框失去焦点时，BrkInputComponent组件在输入框顶层放置DIV；聚焦处理模块：输入框聚焦时，BrkInputComponent组件对DIV进行调整编辑；所述检查设定模块引入FormsModule模块和ReactiveModule模块设定BrkInputComponent组件对输入框值做合法性检查，检查设定模块具体包括响应创建模块、合法验证模块和自定义校验模块：响应创建模块：创建响应式表单；合法验证模块：BrkInputComponent组件利用支持Angular的内置验证器Validators检查输入框值合法性；自定义校验模块：BrkInputComponent组件利用自定义校验正则表达式对输入框内容进行判断。本专利技术的有益效果为：直接对原生HTML元素Input进行封装，以模块的方式导出，开发者直接导入模块即可使用，简洁、快捷。提供图标配置。图标可使用模块默认的iconfont字体库，也可以自行选择字体库进行下载，然后进行相关配置后方可使用。配置选项包括图标的位置、大小、颜色等，可根据开发需要进行适当的配置使用。提供交互动画。良好的交互动画可以使用户的输入行为变得生动有趣，减少枯燥感，使用户体验自然、简洁，快捷。该组件通过控制提示文字的显示和隐藏、颜色的变化、文字位置的变化等方式为用户的输入提供良好的反馈机制。提供错误反馈机制。糟糕的组件总是让用户在输入一大串的表单之后才给出不合格的输入提示，增加用户填写成本，极大有损体验。该组件尽可能的在输入之时即给出反馈，最大限度的提高用户体验。内容输入的限制策略。开发者可能面临多种多样的输入场景：只限文本、只限某一个范围内的数字，限制输入字符串长度等，为减少开发者额外的逻辑编写，组建提供一些内置的合法性检查规则，开发者可以属性的方式引入使其生效。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术方法的流程图；图2是本专利技术系统的结构示意图。具体实施方式下面结合附图和具体实施例对本专利技术作进一步说明，以使本领域的技术人员可以更好地理解本专利技术并能予以实施，但所举实施例不作为对本专利技术的限定。实施例一：一种基于Angular的多功能配置型输入方法，所述的方法具体步骤包括：S1在brk-input选择器内创建BrkInputComponent组件；S2设定BrkInputComponent组件交互动画功能；S3设定BrkInputComponent组件对输入框值做合法性检查；S4利用配置后的BrkInputComponent组件进行配置开发；在使用本专利技术方法进行多功能配置型输入时，首先引入Angular基础模块，然后使用装饰器@Component按照S1在brk-input选择器内创建BrkInputComponent组件：然后创建brk-input.component.html文件，增加相关配置属性，按照S2BrkInputComponent组件交互本文档来自技高网...

【技术保护点】
1.一种基于Angular的多功能配置型输入方法，其特征是所述的方法具体步骤包括：/nS1在brk-input选择器内创建BrkInputComponent组件；/nS2设定BrkInputComponent组件交互动画功能；/nS3设定BrkInputComponent组件对输入框值做合法性检查；/nS4利用配置后的BrkInputComponent组件进行配置开发。/n

【技术特征摘要】
1.一种基于Angular的多功能配置型输入方法，其特征是所述的方法具体步骤包括：
S1在brk-input选择器内创建BrkInputComponent组件；
S2设定BrkInputComponent组件交互动画功能；
S3设定BrkInputComponent组件对输入框值做合法性检查；
S4利用配置后的BrkInputComponent组件进行配置开发。


2.根据权利要求1所述的方法，其特征是所述S1中的BrkInputComponent组件创建在根目录brk的input文件夹下。


3.根据权利要求2所述的方法，其特征是所述S2引入@angular/animations模块设定BrkInputComponent组件交互动画功能，具体设定步骤如下：
S201判断输入框是否聚焦；
S202输入框失去焦点时，BrkInputComponent组件在输入框顶层放置DIV；
S203输入框聚焦时，BrkInputComponent组件对DIV进行调整编辑。


4.根据权利要求2或3所述的方法，其特征是所述S3引入FormsModule模块和ReactiveModule模块设定BrkInputComponent组件对输入框值做合法性检查，具体设定步骤如下：
S301创建响应式表单；
S302BrkInputComponent组件利用支持Angular的内置验证器Validators检查输入框值合法性；
S303BrkInputComponent组件利用自定义校验正则表达式对输入框内容进行判断。


5.一种基于Angular的多功能配置型输入系统，其特征是所述的系统具体包括组件创建模块、交互设定模块、...

【专利技术属性】
技术研发人员：颜冬冬，寇立强，陶金铸，孙思清，高传集，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：山东;37