修改html自带组件样式,能否直接在组件html上为组件根元素设置自定义class

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

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

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

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

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

即：

---

补充：

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

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

修改html自带组件样式,能否直接在组件html上为组件根元素设置自定义class相关推荐

引入antd组件样式_如何使用 dumi 和 fatherbuild 创建组件库
在这个文章中,将会简单的介绍如何使用 dumi 和 father-build 来创建组件库和维护组件库.最终我们会演示如何组织组件库的代码.还会输出一个简单的组件库. 脚手架初始化新建一个空文件夹, ...
基于Layui上传组件（upload）的动态增加上传组件并使得每个上传组件都可独立上传
演示基于laravel框架 1.编写html元素(可根据实际需求进行编写) 2.引入layui相关css,js 3.编写upload组件实例化公共调用方法,首次加载页面需要初始化,因此需要调用uplo ...
vue修改vant自带的样式_@jie
今天用vue写页面时,发现使用vant的有些UI组件,修改CSS样式无效. css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用. 在vue项 ...
android progressdialog 样式,android之修改系统自带ProgressDialog样式
1.ProgressDialog默认样式是当前Activity的theme所定义的ProgressDialog样式. 继承自父类AlertDialog的style. AlertDialog的源码 st ...
微信小程序如何修改第三方组件样式例如 vant-weapp样式修改
注: 必须css文件才可以修改解除样式隔离 1.在组件内部options属性中定义styleIsolation: 'apply-shared' Component({onLoad(){},optio ...
scoped父组件，如何控制子组件样式 - 方法篇
scoped父组件,如何控制子组件样式 - 方法篇需求场景: 在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机 ...
VUE3@clli组件样式、全局组件、配置打包
组件样式: <style scoped lang="less"> 注册全局组件 import {createApp} from 'vue' const app = c ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
修改elementUI组件样式无效的多种解决方式
前言:vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题, 原因:在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加s ...

修改html自带组件样式,能否直接在组件html上为组件根元素设置自定义class

修改html自带组件样式,能否直接在组件html上为组件根元素设置自定义class相关推荐

最新文章

热门文章