PrimeVue主题更改

gdrx4gfi  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(275)

显然,在最近的几次PrimeVue更新中,有一个我非常想使用的PrimeVue.changeTheme()方法。文档说需要两件事。
1.从PrimeVue resources/themes文件夹中复制选定的主题,并将其放置在public文件夹下。
1.在index.html文件中,创建指向这些样式的链接沿着为它们提供一个ID,以便稍后将此ID传递给函数。
所以这就是我所做的,但解决方案并不完全工作,也许我误解了什么.链接到文档:https://primevue.org/theming/
index.html文件:

<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <link rel="icon" href="/favicon.ico">
            <link id="lara-dark-purple-link" rel="stylesheet" href="/themes/lara-dark- 
            purple/theme.css">
            <link id="lara-light-purple-link" rel="stylesheet" href="/themes/lara-light- 
            purple/theme.css">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Vite App</title>
          </head>
          <body>
            <div id="app"></div>
            <script type="module" src="/src/main.js"></script>
          </body>
        </html>

下面是包含主题更改按钮的组件的代码:

<script setup>
    import { onMounted } from 'vue';
    import { usePrimeVue } from 'primevue/config';
    
    const PrimeVue  = usePrimeVue();
    const toggleDarkMode = () => {
        PrimeVue.changeTheme('lara-dark-purple', 'lara-dark-purple', 'lara-dark-purple-link', () => {});    
    }
    const toggleLightMode = () => {
        PrimeVue.changeTheme('lara-light-purple', 'lara-light-purple', 'lara-light-purple-link', () => {});
     }

我的文件夹结构:

oyxsuwqo

oyxsuwqo1#

您的解决方案几乎是正确的。您只是不了解<link>id的用法,但没有问题,让我快速为您总结一下:

1.)需要一个新的引用元素到主题css文件。

第二部分是使theme.css可通过链接元素访问...

<!-- Add default theme url to href | now default is light -->
<link id="id-to-link" rel="stylesheet" href="/themes/lara-light-purple/theme.css">

2.)在函数中使用your-id作为第三个参数。

...这样链接的id就可以作为第三个参数提供给changeTheme函数。

// if current theme is dark
const selectLightTheme = () => {
    // 1. Current theme name
    // 2. Next theme name
    // 3. id of <link>, what reference to where set theme css file
    PrimeVue.changeTheme('lara-dark-purple', 'lara-light-purple', 'id-to-link', () => {});    
}

// if current theme is light
const selectDarkTheme = () => {
    // 1. Current theme name
    // 2. Next theme name
    // 3. id of <link>, what reference to where set theme css file
    PrimeVue.changeTheme('lara-light-purple', 'lara-dark-purple', 'id-to-link', () => {});
}

来源于文档:https://primevue.org/theming/

如何动态制作?

<!-- Add default theme url to href | now default is light -->
<link id="id-to-link" rel="stylesheet" href="/themes/lara-light-purple/theme.css">
import { ref } from 'vue';
import { usePrimeVue } from 'primevue/config';

// set default theme folder-name to currentTheme
const currentTheme = ref('lara-light-purple'); // lara-light-purple or lara-dark-purple (1st parameter)

const PrimeVue = usePrimeVue();

// change current theme to next
const toggleTheme = () => {
    // What is next theme? (2nd parameter)
    let nextTheme = 'lara-light-purple';
    if (currentTheme.value === 'lara-light-purple') nextTheme = 'lara-dark-purple';
    else if (currentTheme.value === 'lara-dark-purple') nextTheme = 'lara-light-purple';

    // 1. Current theme name
    // 2. Next theme name
    // 3. id of <link>, what reference to where set theme css file --> fix, single id to <link>
    PrimeVue.changeTheme(currentTheme.value, nextTheme, 'id-to-link', () => {});    

    // So current theme now:
    currentTheme.value = nextTheme;
}

相关问题