动态类未在浏览器顺风中呈现 - Vue

Posted 2023-02-16

【中文标题】动态类未在浏览器顺风中呈现 - Vue

【英文标题】：Dynamic class not rendering in browser tailwind - Vue

【发布时间】：2022-01-18 13:52:44

【问题描述】：

我正在使用 Vue 创建一个简单的功能组件。我将变体作为道具传递给功能组件，以便该组件作为一个类拾取。 我的问题是该类已附加，但颜色未在浏览器中呈现。

<script>
export default 
  name: "MyComponent",

  functional: true,

  props: 
    variant: 
      type: String,
      required: true,
    ,
  ,

  render(createElement,  children, props, data ) 
    const attrs = 
      staticClass: `bg-$props.variant`,
    ;

    return createElement("div", attrs, children);
  ,
;
</script>

下面是我如何调用组件

<MyComponent variant="success"> Hello there </MyComponent>

tailwind.config.js

在这里，我使用来自根 css 变量的颜色。

module.exports = 
    mode: 'jit',
    purge: ['./index.html', './src/**/*.vue,js,ts,jsx,tsx'],
    darkMode: false, // or 'media' or 'class'
    theme: 
        extend: 
            colors: 
                primary: "var(--primary-color)",
                secondary: "var(--secondary-color)",
                warning: "var(--warning-color)",
                success: "var(--success-color)",
                danger: "var(--danger-color)",
                info: "var(--info-color)"
            ,
       
   

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root 
    --primary-color: #1a73e8;
    --secondary-color: #f1f1f1;
    --success-color: #00b74a;
    --warning-color: #ffa900;
    --danger-color: #f93154;
    --info-color: #17a2b8;
    --circle-size: clamp(1.5rem, 5vw, 3rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);

【问题讨论】：

这在文档中有很好的描述。您的课程正在被清除，因为您正在动态构建它们bg-props.variant 将无法正确呈现，除非您将所有可能的组合列入安全列表。 tailwindcss.com/docs/content-configuration#dynamic-class-names

【参考方案1】：

@JHeth 感谢您的评论

虽然有很多方法可以解决上述问题，但我还是想出了一个 CSS 解决方案，即在样式块中为生成的类添加样式。

 <script>
    export default 
      name: "MyComponent",
    
      functional: true,
    
      props: 
        variant: 
          type: String,
          required: true,
        ,
      ,
    
      render(createElement,  children, props, data ) 
        const attrs = 
          staticClass: `bg-demo-$props.variant`,
        ;
    
        return createElement("div", attrs, children);
      ,
    ;
</script>
<style>
 .bg-demo-success 
    background-color: var(--success-color);
 
</style>

【讨论】：

如果这回答了问号，则将其标记为答案。