附加功能

Vine 提供了一些附加功能，它们是一些好用的语法糖。

转换布尔值属性

Vue 的 Boolean Casting 机制在官方版本实现中会存在一些 BUG，详情请看这个例子。

Vine 提供了一种特殊的转换机制来处理布尔值属性，这借鉴自 Vue Macros —— 基于 MIT 许可证。

将 <Comp checked /> 转换为 <Comp :checked="true" />。

将 <Comp !checked /> 转换为 <Comp :checked="false" />。

但是该功能和 UnoCSS 的 attribute mode 存在冲突，因为当应用了上述规则时，<div h-12px /> 在相应 DOM 节点上会是 <div h-12px="true" />，而这会导致 UnoCSS 生成的 CSS 代码无法在该节点上生效。

如果你确定要保留 UnoCSS 的 attribute mode 功能，请在 Vite 插件中作如下配置、显式禁用此功能：

import { VineVitePlugin } from 'vue-vine/vite'

export default defineConfig({
  plugins: [
    VineVitePlugin({
      vueCompilerOptions: {
        __enableTransformBareAttrAsBool: false,
      },
    }),
  ],
})

附加功能 ​

转换布尔值属性 ​

附加功能

转换布尔值属性