WalkingTec MVVM框架改造笔记——为表单lable控件添加自定义css

上帝也发愁

已于 2023-02-24 20:33:18 修改

阅读量588

点赞数 3

文章标签： css 前端 javascript c#

于 2023-02-24 20:30:32 首次发布

本文链接：https://blog.csdn.net/u012633388/article/details/129206858

版权

本文介绍了如何在WalkingTec MVVM框架中为表单的Lable控件添加自定义CSS样式，以实现界面美化。通过修改BaseFieldTag.cs文件，实现了在特定页面上为Lable添加自定义CSS属性的功能。

摘要由CSDN通过智能技术生成

WalkingTec MVVM框架改造笔记——为表单lable控件添加自定义css

WTM框架，全称WalkingTec MVVM（不是“我特么”的拼音首字母）

WTM是一个快速开发框架，有多快？至少目前dotnetcore的开源项目中，我还没有见到更接地气，开发速度更快的框架。WTM的设计理念就是最大程度的加快开发速度，降低开发成本。

闲话少说，进入正题

WTM框架前后端不分离模式使用Layui前端，作者对大部分常用组件进行了封装（TagHelper），在页面使用时只需要书写<wt:xxx />标签即可。
　　在使用中我们会遇到给Form表单中的全部或部分Lable标签添加一个背景的需求，来完成界面美化，虽然我们可以通过修改Layui中的定义，但是这会导致所有使用给CSS定义的元素全部改变；
　　我曾尝试使用js对指定元素应用自定义的CSS式样，但是由于框架本身对所有Lable都是用相同的css，而且Lable元素也没有ID等全局唯一的属性可供js准确选择，于是想到何不修改框架的相关TagHelper的定义，使其可以单独为某个或者某些页面上的Lable提供可供用户自定义的CSS式样属性，于是有了这篇文档。
　　主要修改BaseFieldTag.cs这个文件：

- 第一步

在WalkingTec.Mvvm.TagHelpers.LayUI项目中，在Abstraction文件夹下找到BaseFieldTag.cs这个文件，修改如下：

public abstract class BaseFieldTag : BaseElementTag
    {
   
        protected const string REQUIRED_ATTR_NAME = "field";
        /// <summary>
        /// 绑定的字段 必填
        /// </summary>
        public ModelExpression Field {
    get; set; }
        public string ItemUrl {
    get; set