外部样式类(externalClasses)的支持
在封装原生自定义组件的时候,我们经常会使用外部样式类(externalClasses
),相关使用方式请参阅微信开发者文档的外部样式类
我们以一个例子来介绍,一个原生组件定义一个或多个外部样式类:
/* 组件 custom-component.js */
Component({
externalClasses: ['my-class']
})
然后你传入 tailwindcss
样式,去使用下方的写法:
<custom-component my-class="bg-[#fafa00] text-[40px]" />
你会发现,在自定义组件中的 my-class="bg-[#fafa00] text-[40px]"
样式在微信开发者工具的调试窗口中,格式变成了 my-class="bg- #fafa00 text- 40px
。
这样直接导致了样式不生效了!
解决方案
这是因为,你没有配置插件的 customAttributes
配置项导致的。
这个配置,可以用来额外转译一些 wxml
上的额外标签属性,否则默认只会转译 class
和 hover-class
。
它可以传入一个 Object
或者 Map
,可以自定义匹配的标签,和任意匹配的属性。
比如上面一个 case
就只需给插件的 customAttributes
传入:
customAttributes: {
'*': ['my-class']
}
就能够进行 my-class
的转译,当然这里使用 *
代表所有标签都匹配,你可以使用正则自定义匹配的标签,和匹配的属性。
使用正则进行自定义匹配标签时,需要传入一个
Map
,其中正则作为key
, 数组作为value
。
你可以在 customAttributes
看到它的具体配置方法。