时间戳

首页 > 解决方案 > 如何在我的组件中重复使用 Vuetify 颜色？

javascript - 如何在我的组件中重复使用 Vuetify 颜色？

问题描述

Vuetify 提供了各种组件，例如下面的成功警报，它使用了几种不同的绿色阴影

在此处输入图像描述

如果我想在我的组件中匹配这些颜色，我可以从浏览器的开发工具中复制粘贴十六进制值，但我希望有一种更优雅的方式。例如，Vuetify 是否提供了一些可以导入到组件中的 SASS 变量或 CSS 类？

以上面的警报为例，在我的组件中，如何匹配浅绿色背景颜色或用于文本颜色的深绿色？

标签： javascriptvue.jsvuetify.js

解决方案

您可以将颜色定义为主题的一部分，如下所示：

export default new Vuetify({

    theme: {
        dark: true,
        themes: {
          dark: {
            primary: "#99CC11",
            secondary: "#99CC11",
            accent: "#cddc39",
            error: "#7E57C2",
            warning: "#7E57C2",
            info: "#2196f3",
            success: "#8bc34a",
          },
          },
        },
});

然后只需将类用作道具：

<v-btn
      text
      rounded
      class="primary--text mx-1"
      to="/signin"
      v-if="authState !== 'signedin'"
    >

推荐阅读