ng-alain的sf如何自定义部件的流程


Posted in Javascript onJune 12, 2020

一、背景

最近使用ng-alain做前端,sf的部件很丰富,但是做起来之后就会发现,多多少少会有一些不符合需求的东西,比如:

ng-alain的sf如何自定义部件的流程

这是一个string的部件,后边跟上一个单位看着很不错,但是我们通常在使用number时会更需要这个单位,然而官方的部件并没有
再比如:

ng-alain的sf如何自定义部件的流程

我想做一个编辑框,要求内容不可编辑,并且该内容要从别的列表进行选择,下拉选择可以满足需求,但是如果内容太多,有时就不方便使用下拉框了,那么这时候我们就需要自定义

二、自定义ng-alain部件的流程

1、组件的整体结构

ng-alain的sf如何自定义部件的流程

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?: string){
  if (this.ui.click) {
   this.ui.click(value);  // 可以在组件里直接调用使用ui的配置那里的方法 ui: {click: (value) => this.test(value),}
  }
 }

}

4、在shared.module.ts中注册部件

涉及到项目内容,以下只展示注册部件的住要内容

// 自定义 小部件
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、使用自定义部件

ng-alain的sf如何自定义部件的流程

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),
    }
   },
  }
 };

总结

到此这篇关于ng-alain的sf如何自定义部件的文章就介绍到这了,更多相关ng-alain的sf如何自定义部件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 #Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
jQuery操作input值的各种方法总结
2013/11/21 Javascript
js opener的使用详解
2014/01/11 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
ExpressJS入门实例
2015/01/14 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
基于python实现坦克大战游戏
2020/10/27 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
竞选演讲稿范文大全
2014/05/12 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年政教处工作总结
2014/12/20 职场文书
民间借贷借条如何写
2015/05/26 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang