自定义外壳尺寸组件

自定义外壳组件的宽高，可以通过在画布中拖拽组件边框滑块来实现，但如果想通过属性栏展示自定义外壳组件的宽高，可以配置一个尺寸组件来实现。

属性	值	备注
type	BgSize	显示组件的宽高
name	属性名，可以自定义名称，不要超过4个字，否则会折行。
callback	object/string	可以直接配置回调函数名或一个对象。当配置callback为回调函数名时，回调函数会接收一个返回值。格式：{ngvwidth:'100px',ngvheight:'100px'} 当配置为对象时，具体用法请看下面的callback配置为object

只用配好这2个属性，就可以在属性栏展示一个尺寸组件了。

展示的是自定义组件外壳的宽和高，改变其中一个值将会改变组件的大小。

当宽高改变时，如果想要得到回调，可以增加一个callback的配置

{
  ...
  "customAttributes":{
        "pro":[
          {
            "type":"BgSize",
            "name":"尺寸",
            "callback":{
                "ngvwidth":"widthChange",
                "ngvheight":"heightChange"
            }
          }
        ],
        "con":[]
    }
  ...
}

在main.js的return 对象中增加widthChange、heightChange回调函数

ngvwidth、和ngvheight 是固定的宽度和高度的key值。

(function(){
  return{
    $data:{
        properties:null
    },
    $hooks:{
        onInit(properties){
            this.properties=properties;
        },
        onDestroy(){

        },
        setData(){
            
        },
        outSizeCallBack(){

        }
    },
    $methods:{
        widthChange(width){
            console.log(width);
            //控制台打印:100px
        },
        heightChange(height){
            console.log(height)
        }
    }
  }
})

当自定义外框尺寸发生变化的时候，widthChange和heightChange这个两个函数中可以拿到尺寸的回调。

需要注意的是，在onInit方法的入参properties中，同样存在着定义外框尺寸的宽高信息。

可以通过this.properties.style.width或this.properties.style.height来引用，得到的值，与widthChange和heightChange回调函数中拿到的值是一致的。

Application

当作完上述配置后，正常情况下，属性栏就会展示尺寸组件。

它有宽和高两个属性，可以通过输入宽高值来改变尺寸，也可以在项目中通过缩放功能来改变组件的尺寸。

通过上面的方法，可以设置和获取自定义组件外壳的宽高。

如果开发者想用这个组件再配置一个尺寸组件，来改变自身的某个div的框高样式，可以在原来的基础上再配置customInput属性。

customInput属性是个对象，里面包含这着该组件所有的可以设置的入参。

costomInput下可以配置的属性：

属性	类型	值	备注
unit	布尔	true/false	显示/隐藏 px
ngvwidth	字符串	100px	宽度、仅支持px、>=-1px
ngvheight	字符串	100px	高度、仅支持px、>=-1px

config.json配置如下：

{
  ...
  "customAttributes":{
        "pro":[
          {
            "type":"BgSize",
            "name":"尺寸",
            "callback":{
                "ngvwidth":"widthChange",
                "ngvheight":"heightChange"
            }
          },
          {
            "type":"BgSize",
            "name":"div宽高",
            "callback":{
                "ngvwidth":"innerWidthChange",
                "ngvheight":"innerHeightChange"
            },
            "customInput":{
                "unit":true,
                "ngvwidth":"20px",
                "ngvheight":"20px"
            }
          }
        ],
        "con":[]
    }
  ...
}

同样的在main.js中增加回调方法

(function(){
  return{
    $data:{
        properties:null
    },
    $hooks:{
        onInit(properties){
            this.properties=properties;
        },
        onDestroy(){

        },
        setData(){
            
        },
        outSizeCallBack(){

        }
    },
    $methods:{
        widthChange(width){
            console.log(width);
            //控制台打印:100px
        },
        heightChange(height){
            console.log(height)
        },
        innerWidthChange(_width){
            console.log(_width);
        },
        innerHeightChange(_height){
            console.log(_height);
            
        },
    }
  }
})

运行调试后，可以看到右侧属性栏增加了一个尺寸组件。

Application