如何配置SharePoint Framework web part （三）自定义一个属性控件

最新推荐文章于 2020-11-16 14:59:19 发布

计算机器

最新推荐文章于 2020-11-16 14:59:19 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/shrenk/article/details/88568732

版权

本文档介绍了在SharePoint Framework中自定义属性控件的步骤，以带标签文本框为例，详细阐述如何创建并实现IPropertyPaneField接口，包括定义接口、构造控件及处理用户输入变化。此外，还提到了微软提供的其他属性控件如人员选择器、颜色选择器等。

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

如果SharePoint Framework提供的开箱即用的属性控件无法满足需要怎么办？这个时候我们可以自定义一个属性控件来满足自己的需要。下面通过自定义一个带有标签的文本框作为例子，看一下如何自定义属性控件：

在webpart项目中创建一个文件夹以及四个文件如下：

首先我们定义这个属性控件的属性，就是在“getPropertyPaneConfiguration”添加属性控件时，需要指定的一些属性。

这个控件有一个label，需要用户指定label的文本（例如“New Field”），另外还需要绑定一个方法来处理textbox里文本的改变。

还有一个属性来表示是否禁用这个textbox。

创建文件"IPropertyPaneNewFieldProps.ts"，定义如下接口：

export interface IPropertyPaneNewFieldProps {
    label: string;
    onPropertyChange: (propertyPath: string, oldValue: any, newValue: any) => void;
    disabled?: boolean;
}

这里定义了三个属性，一个是label，就是这个文本框的标题，一个是onPropertyChange的方法，在文本更改的时候执行，最后一个是disabled，是否禁用这个文本框。

除了上面自定义的属性之外，每一个自定义的属性控件都需要继承“IPropertyPaneCustomFieldProps"这个接口，才可以在webpart中使用，这个接口定义了例如key，onRender等必须实现的成员。

为了同时使用自定义接口和webpart规定的接口，我们创建文件”IPropertyPaneNewFieldInternalProps.ts"，定义如下接口：

import { IPropertyPaneCustomFieldProps } from "@microsoft/sp-webpart-base";
import { IPropertyPaneNewFieldProps } from "./IPropertyPaneNewFieldProps";

export interface IPropertyPaneNewFieldInternalProps extends IPropertyPaneNewFieldProps, IPropertyPaneCustomFieldP