显然,在最近的几次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', () => {});
}
我的文件夹结构:
1条答案
按热度按时间oyxsuwqo1#
您的解决方案几乎是正确的。您只是不了解
<link>
id
的用法,但没有问题,让我快速为您总结一下:1.)需要一个新的引用元素到主题css文件。
第二部分是使theme.css可通过链接元素访问...
2.)在函数中使用
your-id
作为第三个参数。...这样链接的id就可以作为第三个参数提供给changeTheme函数。
来源于文档:https://primevue.org/theming/
如何动态制作?