能否直接在组件html上为组件根元素设置自定义class
发布于 6 年前 作者 msun 3109 次浏览 来自 问答

如题,假如我有一个spinner组件,它在不同的页面里,显示的位置是不同的,因此我需要为每个spinner设置不同的class。再假设我有一个middle样式,将一个元素显示在页面正中。现在我希望在当前这个页面里,spinner组件显示在页面正中。

按照目前的小程序能力,我能想到的是以下几种实现方式。一种是在spinner外部包裹一个view,添加自定义class:

<view class="middle">
  <spinner></spinner>
</view>

另一种是为spinner定义externalClasses,然后从外部把“middle”这个class传给spinner组件。

最后一种是在spinner内部设置host选择器样式,但这会造成组件与自己的显示位置紧耦合,不利于修改。

可否实现如下功能:在spinner组件上直接设置class属性,可以将这些class直接挂在spinner组件的根元素上

即:

<spinner class="middle"></spinner>

补充:

之所以有这个需求,是因为我之前用vue时,vue支持此功能。但是vue强制要求每个组件只有一个根元素,而小程序并无此要求。

那么请问有没有什么优雅的方式实现我的需求?

2 回复

### 设置根元素样式

#### :host

在组件内部可以通过 `:host` 选择符,这个的好处是不需要在整个组件wxml外面单独用一个 `<view class=“root-class”>` 包装:

```CSS

:host {

  …

}

```

#### 组件名

在页面内通过组件标签名为组件设置样式:

```CSS

my-component: {

  …

}

```

回到顶部