PrimeFlex利润率在Vue3应用程序中不起作用 [英] PrimeFlex margin not working inside Vue3 app
本文介绍了PrimeFlex利润率在Vue3应用程序中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的Vue3应用程序中对PrimeVue元素应用一些边距。基于文档中的示例
https://www.primefaces.org/primevue/showcase/#/selectbutton
我有一个在图标和文本之间留有边距的工作示例
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假"><!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>
运行应用程序时，结果为
有人知道为什么边距在第一个示例中有效，但在我的代码中不起作用吗？我错过了什么？
推荐答案
您的CDN演示使用的是PrimeFlex2：
<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>
解决方案2：降级到PrimeFlex 2
如果您更喜欢使用现有版本(可能是为了最大限度地减少大型应用程序中的更改)，请安装PrimeFlex 2：
npm install -S primeflex@2
这篇关于PrimeFlex利润率在Vue3应用程序中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
