Closed uxuip closed 1 year ago
起因: vant 小程序组件库有很多自定义class,如 button,但是插件只能转换class
灵感: 在 @vitejs/plugin-vue2 插件中,有一个 transformAssetUrls 配置,可以配置需要转换的attribute
实现: 为了写起来简单方便,选择使用通配符或字符串匹配attribute,使用到的库 micromatch 对象key用于匹配tag,值用于匹配attribute,多个时使用数组
// 配置 { utilitiesSettings: { customAttributes: { 'van-*': 'custom-class', 'van-image': ['image-class', 'loading-class', 'error-class'], }, }, }
输入:
<van-image class="w-[0.5px]" custom-class="w-[0.5px]" image-class="w-[0.5px]" other-attr="w-[0.5px]"></van-image>
输出:
<van-image class="w--0-d-5px-" custom-class="w--0-d-5px-" image-class="w--0-d-5px-" other-attr="w-[0.5px]"></van-image>
如果不想引入实现通配符的库,也可以改用正则匹配
Thanks for your contribution, this is an awesome feature!
起因: vant 小程序组件库有很多自定义class,如 button,但是插件只能转换class
灵感: 在 @vitejs/plugin-vue2 插件中,有一个 transformAssetUrls 配置,可以配置需要转换的attribute
实现: 为了写起来简单方便,选择使用通配符或字符串匹配attribute,使用到的库 micromatch 对象key用于匹配tag,值用于匹配attribute,多个时使用数组
输入:
输出: