ld-common-component

0.0.19 • Public • Published

蓝桥钉钉插件中的公共组件

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>

Package Sidebar

Install

npm i ld-common-component

Weekly Downloads

0

Version

0.0.19

License

none

Unpacked Size

242 kB

Total Files

29

Last publish

Collaborators

  • liuhongyu2021