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实现计算代码行数的简单方法附代码
Aug 13 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
javascript的内存管理详解
Aug 07 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
理解Javascript图片预加载
Feb 23 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 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框架的优缺点对比分析
2014/12/25 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python合并字符串的3种方法
2015/05/21 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python对文件操作知识汇总
2016/05/15 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Django中使用Celery的教程详解
2018/08/24 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
超级实用的8个Python列表技巧
2020/08/24 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
电子商务专业学生的学习自我评价
2013/10/27 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
校园文化建设方案
2014/02/03 职场文书
民族团结先进个人材料
2014/02/05 职场文书
书法大赛策划方案
2014/06/04 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python