当前位置：首页 > article >正文

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

article 2025/3/14 11:25:35

步骤实现：

定义全局 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 变量：

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

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

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

<template>
  <div>
    <button @click="setFontSize('small')">小</button>
    <button @click="setFontSize('medium')">中</button>
    <button @click="setFontSize('large')">大</button>
    <slot></slot> <!-- 用于插槽，以便在其他组件中使用 -->
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const fontSizeMap = {
  small: '12px',
  medium: '16px',
  large: '20px'
};

const currentFontSize = ref(window.getComputedStyle(document.documentElement).getPropertyValue('--font-size-medium'));

const setFontSize = (size) => {
  currentFontSize.value = fontSizeMap[size];
  document.documentElement.style.setProperty('--current-font-size', currentFontSize.value);
};

// 监听 currentFontSize 的变化（可选，用于调试或其他逻辑）
watch(currentFontSize, (newVal) => {
  console.log('Current font size:', newVal);
});
</script>

<style scoped>
/* 样式可以根据需要调整 */
button {
  margin: 5px;
}
</style>

3. 使用 CSS 变量

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

<template>
  <FontSizeController>
    <div class="text">
      这是一段文本，字号会根据按钮点击而变化。
    </div>
  </FontSizeController>
</template>

<script setup>
</script>

<style scoped>
.text {
  font-size: var(--current-font-size);
}
</style>