@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27 → 4.0.0-alpha.10

package/dist/apis/wxml/selectorQuery.ts

@@ -2,7 +2,7 @@ import { AREA_CHANGE_EVENT_NAME, Current, getPageScrollerOrNode, setNodeEventCal
 
 import { NodesRef } from './nodesRef'
 
-import type Taro from '@tarojs/api'
+import type Taro from '@tarojs/taro/types'
 
 interface ISelectorQueryQueue {
   component: any
@@ -112,7 +112,7 @@ function filter (fields, dom) {
     return res
   }
   if (context) {
-    // TODO: 暂未实现获取 context
+    // TODO: 暂未实现获取  context
     // const typeName = dom.type
     // if (/^video/i.test(typeName)) {
     //   return { context: dom }
@@ -135,8 +135,7 @@ function filter (fields, dom) {
   // if (dataset) res.dataset = Object.assign({}, dom.dataset)
 
   if (rect || size) {
-    const id = dom?._nid
-    const { areaInfo } = dom?._instance?.nodeInfoMap?.[id] || {}
+    const { areaInfo } = dom?._nodeInfo || {}
 
     if (areaInfo) {
       if (rect) {
@@ -153,7 +152,7 @@ function filter (fields, dom) {
     }
   }
   if (scrollOffset) {
-    const scroller = dom._instance.scroller
+    const scroller = dom.scroller
 
     if (scroller) {
       const { xOffset, yOffset } = scroller.currentOffset()
@@ -180,37 +179,50 @@ function filter (fields, dom) {
 
 function querySelector (selector, selectAll) {
   if (typeof selector === 'string') {
-    return parseHandler(selector, selectAll)
+    return selector.split(',').reduce((prev, current) => {
+      const item = current.trim()
+
+      return prev.concat(parseHandler(item, selectAll))
+    }, [])
   }
-  return null
+  return []
 }
 
 function queryBat (queue, cb) {
   const result: any = []
   const taro = (Current as any).taro
   const page = taro.getCurrentInstance().page
-  const element = getPageScrollerOrNode(page.node, page)
+  const element = getPageScrollerOrNode(page?.node, page)
 
-  if (element == null) return null
+  if (!element) return null
 
   arr = []
   traversalDFSDom(element)
-  queue.forEach(item => {
+  queue.forEach((item) => {
     const { selector, single, fields } = item
-    const nodeList = querySelector(selector, !single)
 
-    result.push(nodeList.map(dom => {
+    if (single) {
+      const dom = querySelector(selector, !single)[0]
       // eslint-disable-next-line no-async-promise-executor
-      return new Promise(async resolve => {
+      result.push(new Promise(async resolve => {
         await setNodeEventCallbackAndTriggerComponentUpdate(dom, AREA_CHANGE_EVENT_NAME, null, true)
-
         resolve(filter(fields, dom))
-      })
-    }))
+      }))
+    } else {
+      const nodeList = querySelector(selector, !single)
+      result.push(nodeList.map(dom => {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async resolve => {
+          await setNodeEventCallbackAndTriggerComponentUpdate(dom, AREA_CHANGE_EVENT_NAME, null, true)
+
+          resolve(filter(fields, dom))
+        })
+      }))
+    }
   })
 
   Promise.all(result.map(item => {
-    return Promise.all(item)
+    return item instanceof Array ? Promise.all(item) : item
   })).then(data => {
     cb(data)
   })

package/dist/components-harmony-ets/button.ets

@@ -1,56 +1,36 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo } from '@tarojs/runtime'
-import { createNode } from './render'
-import TaroComponentWrapper from './base'
-import { createTaroEvent } from './utils/events'
+import { eventHandler, createTaroEvent, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
+import commonStyleModify from './style'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
-import { AttributeManager } from './utils/AttributeManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { getNormalAttributes, shouldBindEvent, getNodeThresholds, bindAnimation } from './utils/helper'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroAny, TaroEvent } from '@tarojs/runtime'
-import type { TaroButtonElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroEvent, TaroButtonElement, TaroStyleType } from '@tarojs/runtime'
 
 @Extend(Button)
-function attrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
+function themeStyles(style: TaroStyleType) {
+  .fontColor(style.color)
+  .opacity(style.opacity)
   .borderColor(style.borderColor)
+  .borderWidth(style.borderWidth)
   .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
+  .backgroundColor(style.backgroundColor)
 }
 
+export function getButtonColor (node: TaroButtonElement, color: ResourceColor) {
+  const _attrs = node._attrs
+  const isDisabled: boolean = _attrs.disabled || false
+  const isPlain: boolean = _attrs.plain || false
+  const type: string = _attrs.type || 'default'
+
+  if (isDisabled && isPlain) {
+    return Color.Black
+  }
 
-@Extend(Button)
-function themeStyles(style: TaroStyleType) {
-  .border({
-    width: 1,
-    color: style.backgroundColor
-  })
-  .fontColor(style.color)
-  .opacity(style.opacity)
-  .backgroundColor(style.backgroundColor)
+  if (isPlain) {
+    return BUTTON_THEME_COLOR.get(type).plainText
+  }
+
+  return color
 }
 
 function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
@@ -61,59 +41,105 @@ function getThemeAttributes (node: TaroButtonElement): TaroStyleType {
   const type: string = _attrs.type || 'default'
 
   return {
-    opacity: isDisabled ? 0.4 : 1,
+    borderColor: {
+      top: hmStyle.borderTopColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      right: hmStyle.borderRightColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      bottom: hmStyle.borderBottomColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background),
+      left: hmStyle.borderLeftColor || getButtonColor(node, BUTTON_THEME_COLOR.get(type).background)
+    },
+    borderWidth: {
+      top: hmStyle.borderTopWidth || 1,
+      right: hmStyle.borderRightWidth || 1,
+      bottom: hmStyle.borderBottomWidth || 1,
+      left: hmStyle.borderLeftWidth || 1
+    },
+    borderRadius: {
+      topLeft: hmStyle.borderTopLeftRadius || convertNumber2VP(10),
+      topRight: hmStyle.borderTopRightRadius || convertNumber2VP(10),
+      bottomLeft: hmStyle.borderBottomLeftRadius || convertNumber2VP(10),
+      bottomRight: hmStyle.borderBottomRightRadius || convertNumber2VP(10)
+    },
+    opacity: isDisabled ? 0.4 : hmStyle.opacity,
     backgroundColor: isPlain ? Color.Transparent : (hmStyle.backgroundColor || BUTTON_THEME_COLOR.get(type).background),
-    color: hmStyle.color || BUTTON_THEME_COLOR.get(type).text,
+    color: hmStyle.color || getButtonColor(node, BUTTON_THEME_COLOR.get(type).text),
   }
 }
 
-@Component
-export default struct TaroButton {
-  nodeInfoMap: TaroAny = {}
+function getButtonWidth (node: TaroButtonElement): string | number {
+  const isMini = node._attrs.size === 'mini'
 
-  @ObjectLink node: TaroButtonElement
+  return isMini ? convertNumber2VP(120) : '100%'
+}
 
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+function getButtonHeight (node: TaroButtonElement): string | number {
+  const isMini = node._attrs.size === 'mini'
+
+  return isMini ? convertNumber2VP(60) : convertNumber2VP(92)
+}
+
+function getButtonMinWidth (node: TaroButtonElement): string | number | undefined {
+  if (node.hmStyle.width) {
+    return undefined
   }
 
-  aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-    // 绑定动画
-    bindAnimation(this.node)
+  return getButtonWidth(node)
+}
+
+function getButtonMinHeight (node: TaroButtonElement): string | number | undefined {
+  if (node.hmStyle.height) {
+    return undefined
+  }
+
+  return getButtonHeight(node)
+}
+
+@Component
+export default struct TaroButton {
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroButtonElement) => void = this.customBuilder
+  @ObjectLink node: TaroButtonElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Button({ stateEffect: !this.node._attrs.disabled }) {
+    Button({ stateEffect: !this.node._attrs.disabled }) {
+      if (this.node._attrs.loading) {
         Row() {
-          if (this.node._attrs.loading) {
-            LoadingProgress()
+          LoadingProgress()
             .width(20).height(20)
             .color(getThemeAttributes(this.node).color)
-          }
-          ForEach(this.node.childNodes, (item: TaroElement) => {
-            createNode(item)
-          }, (item: TaroElement) => item._nid)
+          this.createLazyChildren(this.node)
         }
+      } else {
+        this.createLazyChildren(this.node)
       }
-      .attrs(getNormalAttributes(this.node))
-      .themeStyles(getThemeAttributes(this.node))
-      .onClick((e: ClickEvent) => {
-        if (['submit', 'reset'].includes(this.node._attrs.formType)) {
-          const eventName = this.node._attrs.formType + '-btn'
-          const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
-          eventHandler(event, eventName, this.node)
-        }
-        eventHandler(e, 'click', this.node)
-      })
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-        const eventResult: TaroAny = res.eventResult
-        this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-      }))
-      .visibleChangeEvent()
     }
+    .themeStyles(getThemeAttributes(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .constraintSize({
+      minWidth: this.node.hmStyle?.minWidth || getButtonMinWidth(this.node),
+      minHeight: this.node.hmStyle?.minHeight || getButtonMinHeight(this.node),
+      maxWidth: this.node.hmStyle?.maxWidth,
+      maxHeight: this.node.hmStyle?.maxHeight,
+    })
+    .type(ButtonType.Normal)
+    .onClick((e: ClickEvent) => {
+      if (this.node._attrs.formType && ['submit', 'reset'].includes(this.node._attrs.formType)) {
+        const eventName = this.node._attrs.formType + '-btn'
+        const event: TaroEvent = createTaroEvent(eventName, {}, this.node)
+        eventHandler(event, eventName, this.node)
+      }
+      eventHandler(e, 'click', this.node)
+    })
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      this.node._nodeInfo.areaInfo = res[1]
+    }))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/canvas.ets

@@ -0,0 +1,51 @@
+import type { TaroAny, TaroCanvasElement } from '@tarojs/runtime'
+import { cancelAnimationFrame, requestAnimationFrame } from '@tarojs/runtime'
+import commonStyleModify from './style'
+
+@Component
+export default struct TaroCanvas {
+  @ObjectLink node: TaroCanvasElement
+  rafId: number = 0
+  @State overwriteStyle: Record<string, TaroAny> = {}
+
+  aboutToAppear(): void {
+    if (this.node) {
+      this.node._instance = this
+    }
+  }
+
+  aboutToDisappear() {
+    if(this.rafId) {
+      cancelAnimationFrame(this.rafId)
+    }
+  }
+
+  build() {
+    Canvas(this.node._context)
+      .attributeModifier(commonStyleModify.setNode(this.node as TaroAny, {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#ffff00'
+      }).setAnimationStyle(this.overwriteStyle))
+      .onReady(() => {
+        const context = this.node._context
+
+        const draw = () => {
+          if (this.node._drawList.length) {
+            while (this.node._drawList.length) {
+              const item = this.node._drawList.shift()
+              if (item) {
+                if (typeof context[item.key] === 'function') {
+                  context[item.key](...[].concat(item.value))
+                } else {
+                  context[item.key] = item.value
+                }
+              }
+            }
+          }
+          this.rafId = requestAnimationFrame(draw)
+        }
+        draw()
+      })
+  }
+}

package/dist/components-harmony-ets/checkbox.ets

@@ -1,13 +1,11 @@
-import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny, TaroEvent } from '@tarojs/runtime'
+import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
-import TaroComponentWrapper from './base'
-import { createNode } from './render'
-import { createTaroEvent } from './utils/events'
-import { FlexManager } from './utils/FlexManager'
-import { shouldBindEvent, getNormalAttributes, getNodeThresholds } from './utils/helper'
+import commonStyleModify, { rowModify, columnModify } from './style'
+import { FlexManager } from './utils/flexManager'
+import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
-import type { TaroCheckboxElement, TaroCheckboxGroupElement, TaroElement } from './element'
-import type { TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
+import { isUndefined } from '@tarojs/shared'
 
 interface CheckboxOptions {
   name?: string
@@ -17,36 +15,6 @@ interface CheckboxAttrs {
   selectedColor?: ResourceColor
 }
 
-@Extend(Checkbox)
-function checkboxStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
 @Extend(Checkbox)
 function checkboxAttr(attr: CheckboxAttrs) {
   .selectedColor(attr.selectedColor)
@@ -60,158 +28,124 @@ function getAttributes (node: TaroCheckboxElement): CheckboxAttrs {
 }
 
 function getOptions (node: TaroCheckboxElement): CheckboxOptions {
-  const value: string = node._attrs.value
   return {
-    name: value || node.textContent
+    name: node.value as string || node.textContent
   }
 }
 
 
 @Component
 export struct TaroCheckbox {
-  nodeInfoMap: TaroAny = {}
-
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxElement
-
-  @State checked: boolean = false
-
-  @Styles visibleChangeEvent () {
-    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-  }
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    this.checked = !!this.node._attrs.checked
-  }
-
-  @Styles defaultEvent () {
-    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
-    }))
+    if (this.node && !this.node._isInit) {
+      this.node._isInit = true
+      this.node._instance = this
+      this.node._reset = this.node.checked || false
+    }
   }
 
-  build() {
-    TaroComponentWrapper({ node: this.node }) {
-      Stack() {
-        Row() {
-          Checkbox(getOptions(this.node))
-            .defaultEvent()
-            .checkboxStyle(getNormalAttributes(this.node))
-            .checkboxAttr(getAttributes(this.node))
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-            .select(this.checked)
-            .onChange((value: boolean) => {
-              if (!!this.node._attrs.disabled) {
-                // FIXME 找下文档是否有强制刷新方法
-                this.checked = !this.checked
-                this.checked = !this.checked
+  build () {
+    Stack() {
+      Row() {
+        Checkbox(getOptions(this.node))
+          .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+          .checkboxAttr(getAttributes(this.node))
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+          .select(this.node.checked)
+          .onChange((value: boolean) => {
+            if (this.node) {
+              if (!!this.node?._attrs.disabled) {
+                this.node.updateComponent()
               } else {
-                this.checked = value
-                if (this.checked) {
-                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node._attrs.value } }, this.node)
+                this.node.updateCheckedValue(value)
+
+                if (value) {
+                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
                   eventHandler(event, 'change', this.node)
                 }
               }
-            })
-            .visibleChangeEvent()
-          Text(this.node.textContent)
-            .textAlign(TextAlign.Center)
-            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
-        }
-        .onClick(() => {
-          this.checked = !this.checked
-        })
+            }
+          })
+          .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+          .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+            if (this.node) {
+              this.node._nodeInfo.areaInfo = res[1]
+            }
+          }))
+          .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+        Text(this.node.textContent)
+          .textAlign(TextAlign.Center)
+          .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
       }
+      .onClick(() => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            this.node.checked = !this.node.checked
+          }
+        }
+      })
     }
   }
 }
 
-
-@Extend(Flex)
-function checkboxGroupAttrs (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .padding(style.padding)
-  .margin(style.margin)
-  .width(style.width)
-  .height(style.height)
-  .constraintSize(style.constraintSize)
-  .flexGrow(style.flexGrow)
-  .flexShrink(style.flexShrink)
-  .flexBasis(style.flexBasis)
-  .alignSelf(style.alignSelf)
-  .backgroundColor(style.backgroundColor)
-  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
-  .backgroundImageSize(style.backgroundImageSize)
-  .rotate(style.rotate)
-  .scale(style.scale)
-  .translate(style.translate)
-  .transform(style.transform)
-  .borderStyle(style.borderStyle)
-  .borderWidth(style.borderWidth)
-  .borderColor(style.borderColor)
-  .borderRadius(style.borderRadius)
-  .linearGradient(style.linearGradient)
-  .zIndex(style.zIndex)
-  .opacity(style.opacity)
-  .clip(style.clip)
-}
-
 interface ChangeEventDetail { value: string[] }
 
 @Component
 export struct TaroCheckboxGroup {
-  nodeInfoMap: TaroAny = {}
-
+  @Builder customBuilder() {}
+  @BuilderParam createLazyChildren: (node: TaroCheckboxGroupElement) => void = this.customBuilder
   @ObjectLink node: TaroCheckboxGroupElement
+  @State overwriteStyle: Record<string, TaroAny> = {}
 
   @Styles visibleChangeEvent () {
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 
   aboutToAppear () {
-    initComponentNodeInfo(this, this.node)
-    bindInstanceToNode(this.node, this)
-
-    // 阻止事件冒泡传递上去
-    this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
-      e.stopPropagation()
-      e.detail.value = this.getValues()
-    })
-  }
-
-  // Element使用的获取值方法
-  getValues () {
-    const childList = this.node.getElementsByTagName<TaroCheckboxElement>('CHECKBOX')
-    const result: string[] = []
-    childList.forEach(element => {
-      if (element._instance.checked) {
-        result.push(element._attrs.value)
-      }
-    })
-    return result
+    if (this.node) {
+      this.node._instance = this
+      // 阻止事件冒泡传递上去
+      this.node.addEventListener('change', (e: TaroEvent<ChangeEventDetail>) => {
+        e.stopPropagation()
+        e.detail.value = (this.node as TaroCheckboxGroupElement).value
+      })
+    }
   }
 
   @Styles defaultEvent () {
     .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
-      const eventResult: TaroAny = res.eventResult
-      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      if (this.node) {
+        this.node._nodeInfo.areaInfo = res[1]
+      }
     }))
   }
 
   build() {
-    TaroComponentWrapper({ node: this.node }) {
+    if (FlexManager.useFlexLayout(this.node)) {
       Flex(FlexManager.flexOptions(this.node)) {
-        ForEach(this.node.childNodes, (item: TaroElement) => {
-          createNode(item)
-        }, (item: TaroElement) => item._nid)
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+    } else if (FlexManager.isFlexNode(this.node) && FlexManager.direction(this.node) !== FlexDirection.Column) {
+      Row() {
+        this.createLazyChildren(this.node)
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .defaultEvent()
+      .visibleChangeEvent()
+    } else {
+      Column() {
+        this.createLazyChildren(this.node)
       }
-      .checkboxGroupAttrs(getNormalAttributes(this.node))
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
       .defaultEvent()
       .visibleChangeEvent()
     }