蓝桥钉钉插件中的公共组件
com-wrap 为大部分组件的外层view组件。使用方式为:
//index.json
{
"component": true,
"usingComponents": {
"com-wrap": "ld-common-component/es/com-wrap/index"
}
}
//index.js
Component({
// 省略部分代码
didMount() {
getLifecycleSdk().didMount(this.props.componentName)
let { layoutStyle, fillStyle, borderColor, bgColor, borderWidth } = this.props.componentProps //从配置文件中读取
//通过props 设置属性
//全部属性可查看源码
//通过styleSetting属性设置的为css行内样式。--开头的为css变量名
this.setData({
comSetting: {
margin: layoutStyle === 2 ? true : false,
borderRadius: layoutStyle === 2 && fillStyle === 1 ? true : false,
noborder: true
},
styleSetting: {
backgroundColor: bgColor,
borderColor: layoutStyle === 2 ? borderColor : 'transparent',
borderWidth: layoutStyle === 2 ? borderWidth : 2,
'--paddingT': 0,
'--paddingR': 0,
'--paddingB': 0,
'--paddingL': 0,
}
})
}
})
//index.axml
<com-wrap classProps="{{comSetting}}" styleProps="{{styleSetting}}" extendClass="container-wrap-dataAndChartCard">
<!-- container-wrap-dataAndChartCard 为业务组件的外层class -->
<!-- 这里是业务组件的代码 -->
</com-wrap>