文章/答案/技术大牛

发布

社区首页 >问答首页 >PrimeFlex毛利在Vue3应用程序中不起作用

问PrimeFlex毛利在Vue3应用程序中不起作用
EN

Stack Overflow用户

提问于 2021-10-24 18:46:57

回答 1查看 333关注 0票数 1

我想在我的Vue3应用程序中的PrimeVue元素上应用一些边距。基于文档中的示例

https://www.primefaces.org/primevue/showcase/#/selectbutton

我有一个在图标和文本之间留有空白处的工作示例

<!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" />
        <link href="https://unpkg.com/primeflex@2.0.0/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.js"></script>

        <!-- Demo -->
        <script src="https://unpkg.com/primevue@^3/selectbutton/selectbutton.min.js"></script>
        <link href="./index.css" rel="stylesheet" />
    </head>
    <body>
        <div id="app">
            <p-selectbutton v-model="selectedValue" :options="options" dataKey="value">
                <template #option="slotProps">
                    <i class="pi pi-check-circle" />
                    <span class="p-ml-4">Some text</span>
                </template>
            </p-selectbutton>
        </div>

        <script type="module">
        const { createApp, ref } = Vue;

        const App = {
            setup() {
                const selectedValue = ref();
                
                const options = ref([
                    { value: 'left' },
                    { value: 'right' }
                ]);

                return { selectedValue, options }
            },
            components: {
                "p-selectbutton": primevue.selectbutton
            }
        };

        createApp(App)
            .use(primevue.config.default)
            .mount("#app");
        </script>

    </body>
</html>

但在我的项目中，边际不起作用。对于重现：

vue create foo

# select default Vue3 app

cd foo

# based on https://primefaces.org/primevue/showcase/#/setup

npm install primevue

npm install primeicons

npm install primeflex

我将main.js文件更改为

import { createApp } from 'vue'
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";
import SelectButton from "primevue/selectbutton";
import App from './App.vue'

createApp(App)
    .use(PrimeVue)
    .component("p-select-button", SelectButton)
    .mount('#app')

我将App.vue文件更改为

<template>
  <p-select-button v-model="selectedValue" :options="options" dataKey="value">
      <template #option>
          <i class="pi pi-check-circle" />
          <span class="p-ml-4">Some text</span>
      </template>
  </p-select-button>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const selectedValue = ref();
    
    const options = ref([
        { value: 'left' },
        { value: 'right' }
    ]);

    return { selectedValue, options }
  },
}
</script>

运行应用程序时，结果为

有人知道为什么边距在第一个示例中有效，但在我的代码中不起作用吗？我遗漏了什么？

vue.js

vuejs3

primevue

primeflex

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-27 03:48:44

您的CDN demo使用的是PrimeFlex 2：

<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
                                        ?

但是你的应用使用的是PrimeFlex 3(即npm install primeflex安装了3.1.0)。最新的版本有removed the p- prefix from all classnames for readability，所以class name is now ml-4。

解决方案1:将类名更新为ml-4

您可以在App.vue中使用PrimeFlex 3的类名

<!-- BEFORE -->
<span class="p-ml-4">Some text</span>

<!-- AFTER -->
<span class="ml-4">Some text</span>

demo 1

解决方案2:降级到PrimeFlex 2

如果您更喜欢使用现有版本(可能是为了最大限度地减少大型应用程序的更改)，请改为安装PrimeFlex 2：

npm install -S primeflex@2

demo 2

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69699805

复制

相似问题

问PrimeFlex毛利在Vue3应用程序中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PrimeFlex毛利在Vue3应用程序中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PrimeFlex毛利在Vue3应用程序中不起作用
EN