1

我正在为我的 Vue3 应用程序使用 PrimeVue，并且希望在不使用工具栏组件的情况下拥有一个 flexbox。安装 Primeflex 并导入 CSS 文件时，PrimeVue 组件的 CSS 被破坏。

无需导入https://unpkg.com/primeflex@^3/primeflex.min.css 的工作代码：

<!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@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
      <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
      <!-- 
 
      !!! This one here breaks the style !!!

      <link href="https://unpkg.com/primeflex@^3/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@^3/core/core.min.js"></script>
      <!-- Demo -->
      <script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/dataviewlayoutoptions/dataviewlayoutoptions.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/rating/rating.min.js"></script>
      <link href="./index.css" rel="stylesheet" />
   </head>
   <body>
      <div id="app">
         <p-dataview :value="products" layout="list">
            <template #header>
               header goes here
            </template>
            <template #list="slotProps">
               <div>{{ slotProps.data }}</div>
            </template>
         </p-dataview>
      </div>
      <script type="module">
         const { createApp, ref } = Vue; const App = { setup() { const products = ref(["foo", "bar"]); return { products } }, components: { "p-dataview": primevue.dataview } }; createApp(App) .use(primevue.config.default) .mount("#app");
      </script>
   </body>
</html>

导入此 css 文件时出现代码中断

<!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@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
      <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
      <!-- 
 
      !!! This one breaks the css !!!
      
      -->
      <link href="https://unpkg.com/primeflex@^3/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@^3/core/core.min.js"></script>
      <!-- Demo -->
      <script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/dataviewlayoutoptions/dataviewlayoutoptions.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"></script>
      <script src="https://unpkg.com/primevue@^3/rating/rating.min.js"></script>
      <link href="./index.css" rel="stylesheet" />
   </head>
   <body>
      <div id="app">
         <p-dataview :value="products" layout="list">
            <template #header>
               header goes here
            </template>
            <template #list="slotProps">
               <div>{{ slotProps.data }}</div>
            </template>
         </p-dataview>
      </div>
      <script type="module">
         const { createApp, ref } = Vue; const App = { setup() { const products = ref(["foo", "bar"]); return { products } }, components: { "p-dataview": primevue.dataview } }; createApp(App) .use(primevue.config.default) .mount("#app");
      </script>
   </body>
</html>

PrimeVue 文档确保我应该将 Primeflex 用于此类用例。

有什么错误或遗漏吗？

4

0 回答 0