fix: 微信小程序、QQ小程序 自定义组件支持 v-show 指令 fixed #1724

packages/uni-template-compiler/__tests__/compiler.spec.js

@@ -277,6 +277,10 @@ describe('mp:compiler', () => {
       '<view v-show="shown">hello world</view>',
       '<view hidden="{{!(shown)}}">hello world</view>'
     )
+    assertCodegen(
+      '<test v-show="shown">hello world</test>',
+      '<test data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
+    )
   })
 
   it('generate DOM props with v-bind directive', () => {

packages/uni-template-compiler/lib/constants.js

@@ -63,6 +63,7 @@ module.exports = {
   ATTR_DATA_EVENT_OPTS: 'data-event-opts',
   ATTR_DATA_COM_TYPE: 'data-com-type',
   ATTR_DATA_EVENT_PARAMS: 'data-event-params',
+  ATTE_DATA_CUSTOM_HIDDEN: 'data-custom-hidden',
   INTERNAL_GET_ORIG,
   INTERNAL_GET_CLASS,
   INTERNAL_GET_STYLE,

packages/uni-template-compiler/lib/template/traverse.js

@@ -9,9 +9,14 @@ const {
   genCode,
   getCode,
   getForKey,
-  traverseKey
+  traverseKey,
+  isComponent
 } = require('../util')
 
+const {
+  ATTE_DATA_CUSTOM_HIDDEN
+} = require('../constants')
+
 module.exports = function traverse (ast, state = {}) {
   babelTraverse(ast, {
     WithStatement (path) {
@@ -222,7 +227,9 @@ function traverseDataNode (dataNode, state, node) {
               objectExpression.properties.find(valueProperty => {
                 const isValue = valueProperty.key.name === 'value'
                 if (isValue) {
-                  ret.hidden = genCode(valueProperty.value, false, true)
+                  // 自定义组件不支持 hidden 属性
+                  const platforms = ['mp-weixin', 'mp-qq']
+                  ret[platforms.includes(state.options.platform.name) && isComponent(node.type) ? ATTE_DATA_CUSTOM_HIDDEN : 'hidden'] = genCode(valueProperty.value, false, true)
                 }
                 return isValue
               })

packages/webpack-uni-mp-loader/lib/plugin/generate-app.js

@@ -45,6 +45,10 @@ module.exports = function generateApp (compilation) {
     }
   }
 
+  // 框架预设样式 用于隐藏自定义组件
+  const platforms = ['mp-weixin', 'mp-qq']
+  const presetStyle = platforms.includes(process.env.UNI_PLATFORM) ? '[data-custom-hidden="true"]{display: none !important;}' : ''
+
   if (compilation.assets[`common/main${ext}`]) { // 是否存在 main.css
     importMainCss = `@import './common/main${ext}';`
   }
@@ -90,6 +94,7 @@ require('./common/main.js')`
   }, {
     file: 'app' + ext,
     source: `${importMainCss}
-${importVendorCss}`
+${importVendorCss}
+${presetStyle}`
   }]
 }