0

我正在使用 Vue3、PrimeVue 和 Primeflex（设置指南取自这里https://primefaces.org/primevue/showcase/#/setup）。我想为图标着色，它适用于text-primary：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <!-- PrimeVue -->
  <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet" />
  <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeflex/primeflex.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />

  <!-- Dependencies -->
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/primevue/core/core.min.js"></script>

</head>

<body>
  <div id="app">

    <i class="pi pi-clock text-primary" />

  </div>

  <script type="module">
    const { createApp, ref } = Vue; createApp({}) .use(primevue.config.default, { ripple: true }) .mount("#app");
  </script>

</body>

</html>

并且还与text-yellow-500

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <!-- PrimeVue -->
  <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet" />
  <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeflex/primeflex.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />

  <!-- Dependencies -->
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/primevue/core/core.min.js"></script>

</head>

<body>
  <div id="app">

    <i class="pi pi-clock text-yellow-500" />

  </div>

  <script type="module">
    const { createApp, ref } = Vue; createApp({}) .use(primevue.config.default, { ripple: true }) .mount("#app");
  </script>

</body>

</html>

text-warning但是虽然它存在于方案中却无法使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <!-- PrimeVue -->
  <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet" />
  <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeflex/primeflex.min.css" rel="stylesheet" />
  <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />

  <!-- Dependencies -->
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/primevue/core/core.min.js"></script>

</head>

<body>
  <div id="app">

    <p-button label="This should be yellow" class="p-button-warning" />

    <i class="pi pi-clock text-warning" />

  </div>

  <script type="module">
    const { createApp, ref } = Vue; createApp({ components: { "p-button": primevue.button }}) .use(primevue.config.default, { ripple: true }) .mount("#app");
  </script>

</body>

</html>

如您所见，我只能使用硬编码的颜色或primary.

如何使用该方案中的其他颜色？（次要、成功、信息、警告、帮助、危险）

4

0 回答 0