微信小程序:外部样式类(externalClasses)
背景:小程序、ts、less
外部样式类(externalClasses):组件可以接受外部传入的样式类(基础库2.7.1+,支持多个class)
一.自定义子组件:
1. divider/divider.wxml:
在class类名里写入需要的外部样式类
<view class="divider-class"></view>
2.divider/divider.ts
Component({
externalClasses:['divider-class']
})
二.页面上引入组件
1.page1.json:
"usingComponents":{
"divider": "/components/divider/divider",
}
2.pagel.wxml
在父组件的标签上写入子组件externalClasses配置项,把传入的值作为class类选择器的名称,在less或者wxss文件重写样式
<divider divider-class="style"></divider>
3.page.less
.style {
margin-right: 15rpx;
margin-bottom: 10rpx;
border-radius: 15px !important;
}