fix(mp): lazy element with condition (#3080)

packages/uni-mp-compiler/src/template/codegen.ts

@@ -259,10 +259,24 @@ function isLazyElement(node: ElementNode, context: TemplateCodegenContext) {
  */
 function genLazyElement(node: ElementNode, context: TemplateCodegenContext) {
   const { push } = context
+  if (!isIfElementNode(node)) {
+    push(`<block`)
+    // r0 => ready 首次渲染
+    genVIf(`r0`, context)
+    push(`>`)
+    genElement(node, context)
+    push(`</block>`)
+    return
+  }
+  // v-if,v-else-if 无需处理
+  if (node.vIf.name !== 'else') {
+    return genElement(node, context)
+  }
   push(`<block`)
-  // r0 => ready 首次渲染
-  genVIf(`r0`, context)
+  genVElse(context)
   push(`>`)
+  node.vIf.name = 'if'
+  node.vIf.condition = 'r0'
   genElement(node, context)
   push(`</block>`)
 }

packages/uni-mp-weixin/__tests__/component.spec.ts

@@ -33,6 +33,20 @@ describe('mp-weixin: transform component', () => {
       `<block wx:if="{{r0}}"><editor bindready="{{a}}"/></block>`,
       `(_ctx, _cache) => {
   return { a: _o(_ctx.ready) }
+}`
+    )
+    assert(
+      `<editor v-if="ok1" @ready="ready"/><editor v-else-if="ok2"/><editor v-else/>`,
+      `<editor wx:if="{{a}}" bindready="{{b}}"/><editor wx:elif="{{c}}"/><editor wx:else/>`,
+      `(_ctx, _cache) => {
+  return _e({ a: _ctx.ok1 }, _ctx.ok1 ? { b: _o(_ctx.ready) } : _ctx.ok2 ? {} : {}, { c: _ctx.ok2 })
+}`
+    )
+    assert(
+      `<editor v-if="ok1" @ready="ready"/><editor v-else-if="ok2"/><editor v-else @ready="ready"/>`,
+      `<editor wx:if="{{a}}" bindready="{{b}}"/><editor wx:elif="{{c}}"/><block wx:else><editor wx:if="{{r0}}" bindready="{{d}}"/></block>`,
+      `(_ctx, _cache) => {
+  return _e({ a: _ctx.ok1 }, _ctx.ok1 ? { b: _o(_ctx.ready) } : _ctx.ok2 ? {} : { d: _o(_ctx.ready) }, { c: _ctx.ok2 })
 }`
     )
   })
@@ -70,6 +84,20 @@ describe('mp-weixin: transform component', () => {
       `<block wx:if="{{r0}}"><canvas canvas-id="{{a}}" id="{{b}}"/></block>`,
       `(_ctx, _cache) => {
   return { a: _ctx.id, b: _ctx.id }
+}`
+    )
+    assert(
+      `<canvas v-if="ok1" :canvas-id="id"/><canvas v-else-if="ok2"/><canvas v-else/>`,
+      `<canvas wx:if="{{a}}" canvas-id="{{b}}"/><canvas wx:elif="{{c}}"/><canvas wx:else/>`,
+      `(_ctx, _cache) => {
+  return _e({ a: _ctx.ok1 }, _ctx.ok1 ? { b: _ctx.id } : _ctx.ok2 ? {} : {}, { c: _ctx.ok2 })
+}`
+    )
+    assert(
+      `<canvas v-if="ok1" :canvas-id="id"/><canvas v-else-if="ok2"/><canvas v-else :canvas-id="id"/>`,
+      `<canvas wx:if="{{a}}" canvas-id="{{b}}"/><canvas wx:elif="{{c}}"/><block wx:else><canvas wx:if="{{r0}}" canvas-id="{{d}}"/></block>`,
+      `(_ctx, _cache) => {
+  return _e({ a: _ctx.ok1 }, _ctx.ok1 ? { b: _ctx.id } : _ctx.ok2 ? {} : { d: _ctx.id }, { c: _ctx.ok2 })
 }`
     )
   })