我如何在 Vue 上使用 Props 使用类 Tailwind

Posted 2023-03-07

【中文标题】我如何在 Vue 上使用 Props 使用类 Tailwind

【英文标题】：How can i use class Tailwind using Props on Vue

【发布时间】：2021-03-29 23:10:45

【问题描述】：

我尝试在 vue js 上使用可重用组件，例如传递道具类名。就我而言，我使用的是顺风 css，如何使用道具传递类名。谢谢大家，周末愉快:)

这是我的html 路由器标签

router-link.button-filled(
 :to="routeName"
 :title="title"
 :class="customClass"
)
 |  title 

这是我的道具

props: 
  routeName:  default: "/", type: String ,
  title:  default: "Button", type: String ,
  size:  default: "md", type: String ,
  backgroundColor:  default: "red-500", type: String ,
  borderColor:  default: "red-500", type: String 
,

这是我的计算

computed: 
  customClass() 
    return [
      "fst-bg-" + this.backgroundColor,
      "fst-border-" + this.borderColor
    ];
  

【问题讨论】：

查看即时模式中的“动态值”（Tailwind CSS 版本 v2.1+） - 链接：tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support - 建议“不能从动态值计算任意值。 "此外，所有 CSS 必须是可清除的 b/c PurgeCSS “不会尝试解析您的 HTML 并查找类属性或动态执行您的 javascript — 它只是在整个文件中查找与此正则表达式匹配的任何字符串”（来源： tailwindcss.com/docs/…)。祝你好运！

【参考方案1】：

怎么样？ 你真的需要这个'fst'前缀吗？

如果是这样，您需要将此 fst 配置为 tailwind.config.js 文件中的前缀，为此您可以查看文档的这一部分：@987654321 @

但是，如果您想使用自定义颜色，则需要查看文档的这一部分：#Tailwind custom colors

【讨论】：

嗨@felipemm 好的，谢谢！。我在tailwind.config.js文件上进行了配置..这也可以..但不适用于道具一..我尝试在计算返回中添加这些'fst'前缀但不起作用，道具的任何解决方案？谢谢:)

这很奇怪，它应该按预期工作。您是否尝试过直接使用 fst-bg-red-500 ？或者不使用计算，而是使用您在安装/创建的生命周期中设置的方法或变量？可能有助于我们理解这种行为