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 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue调用语音播放的方法
Sep 27 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php 邮件发送问题解决
2014/03/22 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python中的作用域规则详解
2015/01/30 Python
在Python中使用HTML模版的教程
2015/04/29 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
Linux的主要特性
2016/09/03 面试题
机电专业个人求职信范文
2013/12/30 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
商场收银员岗位职责
2015/04/07 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
无线电通信名词解释
2022/02/18 无线电