一、背景
最近使用ng-alain做前端,sf的部件很丰富,但是做起来之后就会发现,多多少少会有一些不符合需求的东西,比如:
这是一个string的部件,后边跟上一个单位看着很不错,但是我们通常在使用number时会更需要这个单位,然而官方的部件并没有
再比如:
我想做一个编辑框,要求内容不可编辑,并且该内容要从别的列表进行选择,下拉选择可以满足需求,但是如果内容太多,有时就不方便使用下拉框了,那么这时候我们就需要自定义
二、自定义ng-alain部件的流程
1、组件的整体结构
2、首先,组件click-input.component.html
,自定义组件要包在sf-item-wrap
特殊标签里面
<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title"> <!-- 开始自定义控件区域 --> <div nz-row> <div nz-col nzSpan="16"><input type="text" [placeholder]="placeholder" nz-input [(ngModel)]="content" [disabled]="inputDisable" (ngModelChange)="onChange()"></div> <div nz-col nzSpan="2" nzPush="2"></div> <div nz-col nzSpan="6"><button nz-button type="button" nzType="primary" (click)="test()" >{{btnTitle}}</button></div> </div> <!-- 结束自定义控件区域 --> </sf-item-wrap>
3、写组件click-input.component
,继承ControlWidget
import {Component, OnInit} from '@angular/core'; import { ControlWidget } from '@delon/form'; @Component({ selector: 'app-product-widget-click-input', templateUrl: './click-input.component.html', }) export class ClickInputComponent extends ControlWidget implements OnInit { /* 用于注册小部件 KEY 值 */ static readonly KEY = 'click-input'; // 价格区间 content: any; // to: any; placeholder: string; // 使用的时候用来绑定 ui: {placeholder: '请选择业务系统' } inputDisable: boolean; // 使用的时候用来绑定 ui: {inputDisable: true, // input是否可用} btnTitle: string; // 使用的时候用来绑定 ui: {btnTitle: '选择数据',} 按钮名称 ngOnInit(): void { this.placeholder = this.ui.placeholder || '请输入'; // 使用的时候用来绑定 ui: {placeholder: '请选择业务系统' } this.inputDisable = this.ui.inputDisable || false; // 使用的时候用来绑定 ui: {inputDisable: true, // input是否可用} this.btnTitle = this.ui.btnTitle || '按钮'; // 使用的时候用来绑定 ui: {btnTitle: '选择数据',} } getData = () => { return this.content; } onChange() { const v = this.getData(); this.setValue(v); } // reset 可以更好的解决表单重置过程中所需要的新数据问题 reset(value: any) { if (value) { console.log(value); const content = value; this.content = content; // this.to = to; this.setValue(value); } } test(value"htmlcode">// 自定义 小部件 const WIDGETS = [ RangeInputComponent, ClickInputComponent ]; @NgModule({ declarations: [ // your components ...COMPONENTS, ...DIRECTIVES, ...WIDGETS ], }) export class SharedModule { constructor(widgetRegistry: WidgetRegistry) { // 注册 自定义的 widget for (const widget of WIDGETS){ widgetRegistry.register(widget.KEY /* 'range-input' */, widget); } } }5、使用自定义部件
channel-select.component.html
<sf [schema]="schema" (formSubmit)="submit($event)"> </sf>channel-select.component.ts
schema: SFSchema = { properties: { btn: { type: 'string', title: '编辑框+按钮', default: '1234', // 设默认值 ui: { widget: 'click-input', placeholder: '请选择业务系统', // inputDisable: true, // input是否可用 btnTitle: '选择数据', click: (value) => this.test(value), } }, } };总结
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7