PrimeFlex利润率在Vue3应用程序中不起作用

本文介绍了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/[email protected]/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>

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')

<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>

解决方案2：降级到PrimeFlex 2

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

npm install -S primeflex@2

这篇关于PrimeFlex利润率在Vue3应用程序中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

PrimeFlex