Blazor 系列教程 - 以按钮组件为例的自定义控件开发

637 阅读2分钟

目的:

自定义控件是Blazor工程开发中重要的一环。本文将以最常用的按钮组件为例,讲解自定义控件组件的常规开发方法,供新手参考;

组件预览:

image.png

组件代码:

image.png

组件由上面的html标签和下面的C#代码组成;

C#部分

代码包含多个由[Parameter]修饰的接口变量,包括

  • BText:按钮文字
  • Height:高度
  • Width:宽度
  • Enable:是否可点击
  • Style:按钮父标签样式
  • clicked:无返回值无参数的函数指针(委托)

基本属性用来设置按钮组件相关的属性,函数委托用来从外部指定一个处理逻辑,以应对不同情况下的按钮点击响应;

html部分

该部分包含一个div标签和里边的一个按钮标签;

因为按钮标签需要支持可点击状态和不可点击状态,但是控制该效果的disable字段有点小病,它无论值是什么,只要有这个字段它就灰显。所以这边直接根据接口传递的Enable值,从两个按钮中选择性的绘制一个;

按钮的图形样式根据指定的css决定,这里有个小技巧是可以为单个组件定义专属的css文件,可以和其他组件相隔离,添加的方法是在组件目录添加一个和组件名称完全相同且包含后缀名的.css文件,如图:

image.png

这样VS会将该css文件移到组件下,可通过小三角号展开和隐藏。该方法指定的css样式无需单独link,只要直接写css名就行,如“button”就是一个自定义的css名。(当然该css是网上找的)

该按钮组件调用示例:

image.png

下方定义了四个分别用于这四个按钮的点击控制响应函数,符合按钮内函数委托的类型,直接以=“函数名”的形式传参;

image.png

以上就是我的按钮组件示例;