external-classes Array - 组件类名,分别用于设置加载组件外层元素,中间内容等元素类名。['t-class', 't-class-load']自定义组件开发中如何使用
时间: 2024-03-19 16:45:05 浏览: 119
merge-class-names:合并给定类名的函数,无论其格式如何
在自定义组件开发中,可以通过 `externalClasses` 属性来获取 `external-classes` 中定义的类名,并在组件的 `wxml` 文件中使用这些类名来设置组件的样式。
具体的使用方法如下:
1. 在组件的 `json` 文件中,定义 `external-classes` 属性,如下所示:
```json
{
"component": true,
"externalClasses": [
"t-class",
"t-class-load"
]
}
```
2. 在组件的 `wxml` 文件中,通过 `class` 属性来引用 `externalClasses` 中定义的类名,如下所示:
```html
<template name="custom-component">
<view class="{{ externalClasses['t-class'] }}">
<view class="{{ externalClasses['t-class-load'] }}">
<!-- 中间内容 -->
</view>
</view>
</template>
```
3. 在组件的使用位置,设置 `external-classes` 属性,如下所示:
```html
<custom-component external-classes="t-class t-class-load"></custom-component>
```
通过这种方式,可以让自定义组件更加灵活,方便地定制组件的样式和结构。
阅读全文