hqz行情站网页设计免费模板代码下载

hqz行情站,网页设计免费模板代码下载,著名的淘宝客网站,网站开发后端用什么DevUI 是一款面向企业中后台产品的开源前端解决方案#xff0c;源自华为内部多年的业务沉淀#xff0c;致力于通过组件库和设计体系提升开发效率与体验一致性。核心定位与技术基础#xff1a;基于 Angular 框架构建#xff0c;提供开箱即用的 UI 组件库#xff0c;强调“高…DevUI 是一款面向企业中后台产品的开源前端解决方案源自华为内部多年的业务沉淀致力于通过组件库和设计体系提升开发效率与体验一致性。核心定位与技术基础基于 Angular 框架构建提供开箱即用的 UI 组件库强调“高效、开放、可信、乐趣”的设计价值观适用于复杂的企业级应用开发。关键特性组件库丰富性涵盖表格DTable、表单、弹窗等高频组件支持虚拟滚动、行展开、列拖拽等高级功能优化大数据量场景下的性能。自定义与扩展能力允许开发者基于 DevUI 规范创建自定义组件集成外部库如 D3.js并通过依赖注入确保可维护性。主题定制化通过 CSS 变量和 SCSS mixin 实现品牌主题与暗黑模式动态切换支持多品牌系统响应式布局。应用场景与实践在云控制台、风控系统等大型项目中通过模块化加载、组件复用复用率达 85%及性能监控工具将页面加载时间优化至 800ms 以内。生态整合与创新与 AI 工具如 MateChat结合实现智能交互并探索低代码化方向通过可视化拖拽生成代码骨架。DevUI 通过完整的开发工具链如环境搭建指南和教程降低上手门槛适合需要快速构建高一致性企业应用的团队。接下来我们可以通过表单的校验规则来验证表单是否输入在前端的需求中常常会使用到。dValidateRules 表单验证DevUI 表单验证基于Angular Form完全兼容响应式表单与模板驱动表单。旨在封装与简化表单校验逻辑你只需配置简单规则验证消息与验证状态管理全交由 DevUI Form 自动完成。如何使用表单校验当你使用了响应式表单或模板驱动表单均需在你的模块中引入Angular FormsModule:import { FormsModule } from angular/forms;在你的元素上绑定dValidateRules并传入你需要配置的规则即可虽在模板中可直接使用字面量传入规则但考虑了变更检测我们推荐你在组件控制器中声明规则再绑定到模板中。如input [(ngModel)]name [dValidateRules]yourRules /dActiveFormControl给业务的自定义容器添加该 directive可以获得与其他组件表单如 text-input, select, cascader同样的点击交互效果。封装的校验规则// 在 xxx.component.ts 中引入import{DValidators}fromng-devui/form/validator-directive/validators;import{DValidateRules}fromng-devui/form/validator-directive/validate.type;construles:DValidateRules{validators:[{contains:DValidators.contains(abc),message:自定义提示信息,isNgValidator:true},{alphabet:DValidators.alphabet,message:自定义提示信息,isNgValidator:true},{whitespace:true}// 因为 whitespace 已经注册到 Angular 中...],};// 自定义校验器的写法可以参考下方代码publicstaticcontains(contain:string|number):ValidatorFn{return(control:AbstractControl):ValidationErrors|null{if(DValidators.isEmptyInput(control.value)||DValidators.isEmptyInput(contain)){returnnull;}returncontrol.value.indexOf(contain)-1?{contains:{requiredContains:contain,actualValue:control.value}}:null;};}publicstaticalphabet(control:AbstractControl):ValidationErrors|null{if(DValidators.isEmptyInput(control.value)){returnnull;}returnDValidators.AlphabetPattern.test(control.value)?null:{alphabet:true};}验证单个元素使用内置校验器配置error message我们还内置了诸多校验器可以前往 API 中查看更多信息。当前DevUI支持的内置校验器有required、minlength、maxlength、min、max、requiredTrue、email、pattern、whitespace。若需限制用户输入不能全为空格可使用whitespace内置校验器若需限制用户输入长度将最大限制设置为实际校验值1是一个好的办法。除pattern外其他内置校验器我们也提供了内置的错误提示信息在你未自定义提示消息时我们将使用默认的提示信息。message配置支持string与object两种形式支持国际化词条配置如’zh-cn’默认将取’default’。验证单个元素自定义校验器一个校验器需要一个唯一的id标识你可显式声明此id也可声明一个与保留字不冲突的key此key将被识别为id 其value作为校验器。自定义校验器你可以简单返回true | false 来标识当前校验是否通过 也可以返回string | null来标识当前是否错误并返回错误消息适用于动态错误提示。如果是异步校验器你需要将你的值以Observable对象方式返回。更多地DevUI兼容原生angular校验器 你可将isNgValidator设置为true。验证单个元素配置错误更新策略errorStrategy、校验时机updateOn设置errorStrategy元素初始化时若校验不通过错误是否会进行提示 默认配置为dirty若需要在初始化时将错误抛出可配置为pristine。errorStrategy可继承。设置updateOn指定校验的时机。 校验器updateOn基于你绑定的模型的updateOn设置 在模板中你可以通过ngModelOptions来指定 默认为change可选值还有blur、submit 设置为submit则当元素所在表单进行提交时将触发校验。验证单个元素自定义管理消息提示配置messageShowType可选择消息自动提示的方式默认为popover。设置为popover错误信息将在元素聚焦时以popover形式呈现。设置为text错误信息将自动以文本方式显示在元素下方(需要与表单控件容器配合使用)。设置为none错误信息将不会自动呈现到视图 可在模板中获取message或通过监听messageChange事件获取错误message 或在模板中直接通过引用获取。此配置可继承。配置popPosition可在消息提示方式为popover时自定义popover内容弹出方向。 默认为[‘right’, ‘bottom’]。此配置可继承。sectionclassdemo-sectionstylewidth: 400pxdivform dForm ngForm[dValidateRules]{ message: The form verification failed, please check. }[layout]layoutDirection#planFormdValidateRules(dSubmit)submitPlanForm($event)div[ngModelGroup]textGroupd-form-itemd-form-label[required]true[hasHelp]true[helpTips]This is the plan name.Name/d-form-labeld-form-controlinput dTextInput autocompleteoffnameplanNameplaceholderName[(ngModel)]planFormData.planName[dValidateRules]{validators:[{required:true}],asyncValidators:[{nameCheck:this.checkName.bind(this),message:temp}]}[dValidatePopConfig]{popMaxWidth:400}//d-form-control/d-form-itemd-form-itemd-form-labelDescription/d-form-labeld-form-controltextarea dTextarea autocompleteoffnameplanDescriptionplaceholderDescription[(ngModel)]planFormData.planDescription[dValidateRules][{ maxlength: 256 }]styleheight: 80px/textarea/d-form-control/d-form-item/divd-form-itemd-form-label[required]true[hasHelp]true[helpTips]Reviewer of each task execution.Reviewer/d-form-labeld-form-controld-select[options]verifierOptions[(ngModel)]planFormData.planVerifier[name]planVerifier[placeholder]Select Verifier[filterKey]name[allowClear]true[dValidateRules][{ required: true }]/d-select/d-form-control/d-form-itemd-form-item[dHasFeedback]trued-form-label[required]trueExecution day/d-form-labeld-form-control[extraInfo]customTemplated-checkbox-group[options]checkboxOptions[(ngModel)]planFormData.planExerciseDate[name]planExerciseDate[direction]row[filterKey]label[isShowTitle]true[dValidateRules]{validators:[{required:true}],asyncValidators:[{canChoose:validateDate}]}/d-checkbox-group/d-form-control/d-form-itemd-form-operationd-buttonclassmr-element-spacing[title]planForm.errorMessage || circledtruestylemargin-right: 8px[showLoading]planForm.pendingdFormSubmit[dFormSubmitData]submit-buttonSubmit/d-button/d-form-operation/form/divng-template #customTemplatespanChoose your execution cycle,it is recommended to choose Monday,Wednesday,Friday./span/ng-template/sectionng-template #tempdivclasscustom-tippclasstip-item[ngClass]{ is-error: !nameValid.same }iclassicon-error*ngIf!nameValid.same/iiclassicon-right*ngIfnameValid.same/ispanNo duplicate Name/span/ppclasstip-item[ngClass]{ is-error: !nameValid.length }iclassicon-error*ngIf!nameValid.length/iiclassicon-right*ngIfnameValid.length/ispanName should has4-9characters/span/p/div/ng-template摘要DevUI 提供基于 Angular 的表单验证方案 dValidateRules支持响应式与模板驱动表单简化校验逻辑。通过内置校验器如 required、whitespace和自定义校验器支持同步/异步校验结合动态错误提示popover 或文本显示实现高效验证。特性包括规则配置通过 DValidators 快速定义校验规则如内容包含、格式限制。灵活提示支持自定义错误消息字符串或对象及国际化配置。校验控制可设置校验时机change/blur/submit和错误显示策略dirty/pristine。集成扩展兼容 Angular 原生校验器支持表单容器交互指令 dActiveFormControl。适用于企业级应用中复杂表单场景如云控制台显著提升开发效率与用户体验一致性。参考链接MateChathttps://gitcode.com/DevCloudFE/MateChatMateChat官网https://matechat.gitcode.comDevUI官网https://devui.design/home