使用css变量实现更改字体大小功能（vue3为例）

步骤实现：

• 定义全局 CSS 变量：在你的主样式文件（通常是 App.vue 或一个单独的 CSS 文件）中定义全局 CSS 变量。
  
• 创建 Vue 组件或组合式 API 来管理这些变量：你可以使用一个 Vue 组件或 Vue 的组合式 API（Composition API）来管理这些全局变量的值。
  
• 使用 CSS 变量：在你的组件中使用这些 CSS 变量来设置样式。
  
• 动态调整 CSS 变量：通过 Vue 的相应式数据来动态调整这些 CSS 变量的值。
  

1. 定义全局 CSS 变量

在你的 main.css 或 App.vue 中的 <style> 标签内定义全局 CSS 变量：

1. /* main.css 或 App.vue 中的 <style> 标签 */
2. :root {
3.   --font-size-small: 12px;
4.   --font-size-medium: 16px;
5.   --font-size-large: 20px;
6.   --current-font-size: var(--font-size-medium); /* 默认字号 */
7. }

复制代码

2. 创建 Vue 组件或组合式 API 来管理这些变量

在你的 Vue 组件中，使用 Vue 的组合式 API 来管理这些变量的值。例如，在 FontSizeController.vue 中：

1. <template>
2.   <div>
3.     <button @click="setFontSize('small')">小</button>
4.     <button @click="setFontSize('medium')">中</button>
5.     <button @click="setFontSize('large')">大</button>
6.     <slot></slot> <!-- 用于插槽，以便在其他组件中使用 -->
7.   </div>
8. </template>
10. <script setup>
11. import { ref, onMounted, watch } from 'vue';
13. const fontSizeMap = {
14.   small: '12px',
15.   medium: '16px',
16.   large: '20px'
17. };
19. const currentFontSize = ref(window.getComputedStyle(document.documentElement).getPropertyValue('--font-size-medium'));
21. const setFontSize = (size) => {
22.   currentFontSize.value = fontSizeMap[size];
23.   document.documentElement.style.setProperty('--current-font-size', currentFontSize.value);
24. };
26. // 监听 currentFontSize 的变化（可选，用于调试或其他逻辑）
27. watch(currentFontSize, (newVal) => {
28.   console.log('Current font size:', newVal);
29. });
30. </script>
32. <style scoped>
33. /* 样式可以根据需要调整 */
34. button {
35.   margin: 5px;
36. }
37. </style>

复制代码

3. 使用 CSS 变量

在你的其他组件中使用这些 CSS 变量。例如，在 MyComponent.vue 中：

1. <template>
2.   <FontSizeController>
3.     <div class="text">
4.       这是一段文本，字号会根据按钮点击而变化。
5.     </div>
6.   </FontSizeController>
7. </template>
9. <script setup>
10. </script>
12. <style scoped>
13. .text {
14.   font-size: var(--current-font-size);
15. }
16. </style>

复制代码

4. 动态调整 CSS 变量

通过点击 FontSizeController 组件中的按钮，你可以动态调整全局 CSS 变量 --current-font-size 的值，从而影响使用了该变量的组件的样式。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。