快应用开发： 自定义事件 快应用层级 图片对象Image 获取元素的宽高

1. 自定义事件

// 父组件
<slidebar ontouchend="touchendFn()"></slidebar>
  touchendFn() {
    console.log(111)
  },
// 子组件
touchendFn() {
   console.log('touchendFn')
   this.$emit('touchend')
 },

2. 快应用层级
   // stack内按先后顺序层叠

<stack class="stack">
      <image class="image" src="pic2.webp"></image>
      <text class="title">stack容器排列方式为层叠，每个子组件按照先后顺序依次堆叠，覆盖前面的组件</text>
      <div class="wrap">
        <image class="btn" src="demo.png"></image>
      </div>
    </stack>

3. 图片对象Image

Image图片对象需要等获取后才能使用，否则报错Image is not defined

let canvas = this.$element('canvas')
// var ctx;
// if (canvas.getContext) {
//   ctx = canvas.getContext('2d');
// }
const image = new Image()

4. 获取元素的宽高

let canvas = this.$element('canvas')

canvas.getBoundingClientRect({
  success: (data) => {
      console.log(`getBoundingClientRect结果： width:${width}, height:${height},
       top:${top}, bottom:${bottom}, left:${left}, right:${right}`)
  }
});