跳到主要内容
版本:4.x

Prime 组件

简介

在 Filament Schema 中,Prime 组件是最基本的构建块,可用于将任意内容(例如文本和图像)插入到 Schema 中。顾名思义,Prime 组件不可分割,且无法简化。Filament 提供了一组内置的 Prime 组件:

你也可以创建自己的自定义组件以将自己的任意内容添加到 Schema 中。

An example of using prime components to set up two-factor authentication.

本例中,Prime 组件用于向用户显示说明、用户可以扫描的二维码以及用户可以保存的恢复码列表:

use Filament\Actions\Action;
use Filament\Schemas\Components\Image;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Components\Text;
use Filament\Schemas\Components\UnorderedList;
use Filament\Support\Enums\FontWeight;
use Filament\Support\Enums\TextSize;

$schema
->components([
Text::make('Scan this QR code with your authenticator app:')
->color('neutral'),
Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->imageHeight('12rem')
->alignCenter(),
Section::make()
->schema([
Text::make('Please save the following recovery codes in a safe place. They will only be shown once, but you\'ll need them if you lose access to your authenticator app:')
->weight(FontWeight::Bold)
->color('neutral'),
UnorderedList::make(fn (): array => array_map(
fn (string $recoveryCode): Text => Text::make($recoveryCode)
->copyable()
->fontFamily(FontFamily::Mono)
->size(TextSize::ExtraSmall)
->color('neutral'),
['tYRnCqNLUx-3QOLNKyDiV', 'cKok2eImKc-oWHHH4VhNe', 'C0ZstEcSSB-nrbyk2pv8z', '49EXLRQ8MI-FpWywpSDHE', 'TXjHnvkUrr-KuiVJENPmJ', 'BB574ookll-uI20yxP6oa', 'BbgScF2egu-VOfHrMtsCl', 'cO0dJYqmee-S9ubJHpRFR'],
))
->size(TextSize::ExtraSmall),
])
->compact()
->secondary(),
])

虽然可以使用信息列表的文本条目 在 Schema 渲染文本,但条目旨在渲染实体的标签-值详细信息(例如 Eloquent 模型),而不是渲染任意文本。Prime 组件更适合此目的。信息可以被当作更类似于 HTML 中的 描述列表

Prime 组件类可以在 Filament\Schemas\Components 命名空间中找到。它们位于组件的 Schma 数组中。

文本组件

使用 Text 组件,可以将文本插入到 Schema。请将文本内容传入到 make() 方法中:

use Filament\Schemas\Components\Text;

Text::make('Modifying these permissions may give users access to sensitive information.')
Text

要渲染原始 HTML 内容,请将 HtmlString 对象传递给 make() 方法:

use Filament\Schemas\Components\Text;
use Illuminate\Support\HtmlString;

Text::make(new HtmlString('<strong>Warning:</strong> Modifying these permissions may give users access to sensitive information.'))

NOTE

请注意,你需要确保 HTML 渲染是安全的,否则应用可能会有 XSS 攻击漏洞。

Text with HTML

要渲染 Markdown,你可以使用 Laravel 的 str() 辅助函数将 Markdown 转换成 HTML,并将其转换成 HtmlString 对象:

use Filament\Schemas\Components\Text;

Text::make(
str('**Warning:** Modifying these permissions may give users access to sensitive information.')
->inlineMarkdown()
->toHtmlString(),
)
除了允许静态值之外,make() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.

自定义文本颜色

你可以为文本设置颜色

use Filament\Schemas\Components\Text;

Text::make('Information')
->color('info')
除了允许静态值之外,color() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Text in the info color

使用中性颜色

, 默认情况下,文本颜色设置为 gray,与背景相比通常相当暗淡。你可以使用 color('neutral') 方法将其变得更暗:

use Filament\Schemas\Components\Text;

Text::make('Modifying these permissions may give users access to sensitive information.')

Text::make('Modifying these permissions may give users access to sensitive information.')
->color('neutral')
Text in the neutral color

显示为徽章

默认情况下,文本非常简单,没有背景色。你可以使用 badge() 方法使其显示为“徽章”。一个很好的用例是状态,其中可能需要显示一个带有与状态匹配的颜色的徽章:

use Filament\Schemas\Components\Text;

Text::make('Warning')
->color('warning')
->badge()
Text as badge

或者,你可以传入一个布尔值控制文本是否显示为徽章:

use Filament\Schemas\Components\Text;

Text::make('Warning')
->color('warning')
->badge(FeatureFlag::active())
除了允许静态值之外,badge() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.

Adding an icon to the badge

You may add other things to the badge, like an icon:

use Filament\Schemas\Components\Text;
use Filament\Support\Icons\Heroicon;

Text::make('Warning')
->color('warning')
->badge()
->icon(Heroicon::ExclamationTriangle)
Text as badge with an icon

自定义文本大小

文本默认字体较小,但你可以将其更改为 TextSize::ExtraSmallTextSize::MediumTextSize::Large

例如,你可以使用 size(TextSize::Large) 放大文本:

use Filament\Schemas\Components\Text;
use Filament\Support\Enums\TextSize;

Text::make('Modifying these permissions may give users access to sensitive information.')
->size(TextSize::Large)
Text entry in a large font size

自定义字体粗细

文本条目默认使用常规字体粗细,但你可以将其更改为以下任意选项:FontWeight::ThinFontWeight::ExtraLightFontWeight::LightFontWeight::MediumFontWeight::SemiBoldFontWeight::BoldFontWeight::ExtraBoldFontWeight::Black

例如,你可以使用 weight(FontWeight::Bold) 将字体设置为粗体:

use Filament\Schemas\Components\Text;
use Filament\Support\Enums\FontWeight;

Text::make('Modifying these permissions may give users access to sensitive information.')
->weight(FontWeight::Bold)
除了允许静态值之外,weight() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Text entry in a bold font

自定义字体系列

你可以将文本字体系列更改为以下任意选项:FontFamily::SansFontFamily::SerifFontFamily::Mono

例如,你可以使用 fontFamily(FontFamily::Mono) 将字体设置为等宽字体:

use Filament\Support\Enums\FontFamily;
use Filament\Schemas\Components\Text;

Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
->fontFamily(FontFamily::Mono)
除了允许静态值之外,fontFamily() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Text entry in a monospaced font

Adding a tooltip to the text

你可以使用 tooltip() 方法向文本组件添加工具提示:

use Filament\Schemas\Components\Text;

Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
->tooltip('Your secret recovery code')
除了允许静态值之外,tooltip() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Text with a tooltip

使用 JavaScript 确定文本内容

你可以使用 JavaScript 确定文本内容。如果你想根据 表单字段 的状态显示不同的消息,而无需向服务器发出重新渲染 Schema 的请求,这将非常有用。为此,你可以使用 js() 方法:

use Filament\Schemas\Components\Text;

Text::make(<<<'JS'
$get('name') ? `Hello, ${$get('name')}` : 'Please enter your name.'
JS)
->js()

$state$get() utility 可以在 JavaScript 上下文中使用,因此你可以使用它们来获取 Schema 中字段的状态。

图标组件

使用 Icon 组件,你可以将图标插入到 Schema 中。请将图标 传入到 make() 方法中:

use Filament\Schemas\Components\Icon;
use Filament\Support\Icons\Heroicon;

Icon::make(Heroicon::Star)
除了允许静态值之外,make() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Icon

自定义图标颜色

你可以为图标设置颜色

use Filament\Schemas\Components\Icon;
use Filament\Support\Icons\Heroicon;

Icon::make(Heroicon::ExclamationCircle)
->color('danger')
除了允许静态值之外,color() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Icon in the danger color

Adding a tooltip to the icon

你可以使用 tooltip() 方法将 Tooltip 添加到图标组件中:

use Filament\Schemas\Components\Icon;
use Filament\Support\Icons\Heroicon;

Icon::make(Heroicon::ExclamationTriangle)
->tooltip('Warning')
除了允许静态值之外,tooltip() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Icon with a tooltip

图像组件

使用 Image 组件可以将图像插入到 Schema 中。请将图片 URL 及 alt 文本传入到 make() 方法中:

use Filament\Schemas\Components\Image;

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
除了允许静态值之外,make() 方法的参数也接受函数动态计算它们的值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Image

自定义图像大小

你可以将图像的尺寸传入到 imageWidth()imageHeight() 或者 imageSize() 中自定义图像大小:

use Filament\Schemas\Components\Image;

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->imageWidth('12rem')

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->imageHeight('12rem')

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->imageSize('12rem')
除了允许静态值之外,imageWidth()imageHeight()imageSize() 方法也可以接受函数来动态计算它们的值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Image with a custom size

对齐图像

你可以使用 alignStart()alignCenter()alignEnd() 方法将图像对齐到开始位置(在从左到右的界面中为左侧,在从右到左的界面中为右侧)、中心或结束位置(在从左到右的界面中为右侧,在从右到左的界面中为左侧):

use Filament\Schemas\Components\Image;

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->alignStart() // This is the default alignment.

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->alignCenter()

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->alignEnd()

或者,你可以将 Alignment 枚举传递给 alignment() 方法:

use Filament\Schemas\Components\Image;
use Filament\Support\Enums\Alignment;

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->alignment(Alignment::Center)
除了允许静态值之外,alignment() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Image with a custom alignment

Adding a tooltip to the image

你可以使用 tooltip() 方法将 Tooltip 添加到图像组件中:

use Filament\Schemas\Components\Image;

Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->tooltip('Scan this QR code with your authenticator app')
->alignCenter()
除了允许静态值之外,tooltip() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Image with a tooltip

无序列表组件

使用 UnorderedList 组件可以将无序列表插入到 Schema 中。列表项(包括纯文本或 文本组件)将传递给 make() 方法:

use Filament\Schemas\Components\UnorderedList;

UnorderedList::make([
'Tables',
'Schemas',
'Actions',
'Notifications',
])
除了允许静态值之外,make() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Unordered list

文本组件可以用作列表项,这样你就可以自定义每个项的格式:

use Filament\Schemas\Components\Text;
use Filament\Schemas\Components\UnorderedList;
use Filament\Support\Enums\FontFamily;

UnorderedList::make([
Text::make('Tables')->fontFamily(FontFamily::Mono),
Text::make('Schemas')->fontFamily(FontFamily::Mono),
Text::make('Actions')->fontFamily(FontFamily::Mono),
Text::make('Notifications')->fontFamily(FontFamily::Mono),
])

自定义列表项大小

如果要修改列表内容的文本大小,你可能需要调整项目的大小以匹配。为此,你可以使用 size() 方法。列表项默认字体较小,但你可以将其更改为 TextSize::ExtraSmallTextSize::MediumTextSize::Large

例如,你可以使用 size(TextSize::Large) 放大列表项:

use Filament\Schemas\Components\Text;
use Filament\Schemas\Components\UnorderedList;

UnorderedList::make([
Text::make('Tables')->size(TextSize::Large),
Text::make('Schemas')->size(TextSize::Large),
Text::make('Actions')->size(TextSize::Large),
Text::make('Notifications')->size(TextSize::Large),
])
->size(TextSize::Large)
除了允许静态值之外,size() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.
Unordered list with large bullets

Adding extra HTML attributes to a prime component

你可以通过 extraAttributes() 方法向组件传递额外的 HTML 属性,这些属性将被合并到其外部 HTML 元素上。这些属性应该用一个数组表示,其中键是属性名称,值是属性值:

use Filament\Schemas\Components\Text;

Text::make('Modifying these permissions may give users access to sensitive information.')
->extraAttributes(['class' => 'custom-text-style'])
除了允许静态值之外,extraAttributes() 方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。Learn more about utility injection.
UtilityTypeParameterDescription
ComponentFilament\Schemas\Components\Component$componentThe current component instance.
Get functionFilament\Schemas\Components\Utilities\Get$getA function for retrieving values from the current schema data. Validation is not run on form fields.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent model FQN?string<Illuminate\Database\Eloquent\Model>$modelThe Eloquent model FQN for the current schema.
Operationstring$operationThe current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current schema.

默认情况下,多次调用 extraAttributes() 将覆盖之前的属性。如果你希望合并属性,可以向该方法传递 merge: true