vue如何定義全局顏色變量并用js修改顏色三種方法

更新時(shí)間：2025年05月30日 09:43:43 作者：尚夢(mèng)

在Vue中定義一個(gè)全局變量是非常常見(jiàn)的需求,這樣可以在多個(gè)組件中共享相同的數(shù)據(jù),這篇文章主要介紹了vue如何定義全局顏色變量并用js修改顏色的三種方法,需要的朋友可以參考下

方法一：使用 CSS 變量 (Custom Properties)

步驟：

定義全局 CSS 變量：在全局樣式文件（如 app.css 或 style.css）中定義變量。
css
深色版本
```
:root {
  --primary-color: #42b983;
  --secondary-color: #35495e;
}
```

在組件中使用這些變量：在 Vue 組件中使用這些變量

<template>
  <div :style="{ color: primaryColor }">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: 'var(--primary-color)'
    };
  }
}
</script>

<style scoped>
.example {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}
</style>

通過(guò) JavaScript 修改 CSS 變量：你可以在 Vue 組件的生命周期鉤子或方法中動(dòng)態(tài)修改這些變量。

<template>
  <div>
    <button @click="changeColor">Change Color</button>
    <div :style="{ color: primaryColor }">Hello World</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: 'var(--primary-color)'
    };
  },
  methods: {
    changeColor() {
      document.documentElement.style.setProperty('--primary-color', '#ff0000');
      this.primaryColor = 'var(--primary-color)';
    }
  }
}
</script>

方法二：使用 Vuex 管理狀態(tài)

步驟：

安裝并設(shè)置 Vuex：如果你還沒(méi)有安裝 Vuex，可以使用以下命令安裝：
```
npm install vuex --save
```

在 Vuex store 中定義顏色狀態(tài)：

javascript

深色版本

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    primaryColor: '#42b983',
    secondaryColor: '#35495e'
  },
  mutations: {
    setPrimaryColor(state, color) {
      state.primaryColor = color;
    }
  }
});

在組件中使用這些顏色：

html

深色版本

<template>
  <div>
    <button @click="changeColor">Change Color</button>
    <div :style="{ color: primaryColor }">Hello World</div>
  </div>
</template>

<script>
export default {
  computed: {
    primaryColor() {
      return this.$store.state.primaryColor;
    }
  },
  methods: {
    changeColor() {
      this.$store.commit('setPrimaryColor', '#ff0000');
    }
  }
}
</script>

方法三：使用 Vue 插件

步驟：

創(chuàng)建一個(gè) Vue 插件來(lái)管理顏色：

javascript

深色版本

// plugins/colorPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$colors = {
      primary: '#42b983',
      secondary: '#35495e'
    };

    Vue.prototype.$setColor = function(key, value) {
      this.$colors[key] = value;
    };
  }
};

在主文件中注冊(cè)插件：

javascript

深色版本

// main.js
import Vue from 'vue';
import App from './App.vue';
import colorPlugin from './plugins/colorPlugin';

Vue.config.productionTip = false;

Vue.use(colorPlugin);

new Vue({
  render: h => h(App),
}).$mount('#app');

在組件中使用這些顏色：

<template>
  <div>
    <button @click="changeColor">Change Color</button>
    <div :style="{ color: primaryColor }">Hello World</div>
  </div>
</template>

<script>
export default {
  computed: {
    primaryColor() {
      return this.$colors.primary;
    }
  },
  methods: {
    changeColor() {
      this.$setColor('primary', '#ff0000');
    }
  }
}
</script>