Question

如何实现与语言变化相关的两个颜色主题之间的过渡？

使用Vuex商店更改语言。更改语言时，必须更改肢体类别。

故事状态：

export default {
  language: {
    current: { name: 'en'},
    available: [{ name: 'en' }, { name: 'ru' }]
  }
}

故事动作：

export default { ['app:language:change']({ commit }, language) { 
 commit('app:language:change', language); },
}

故事突变：

export default { ['app:language:change'](state, language) { 
 state.language.current = language; },
}

更改组件语言

<tempalte v-for="(lang, index) in availableLanguages">
   <span style="cursor: pointer;"  v-on:click="() => 
     onLanguageChange(lang)">{{ lang.name }}</span>
   <span v-if="index !== availableLanguages.length - 1"> / </span>
</tempalte>

<script>
    export default {
      name: 'app-footer',
    computed: {
     language()
       {return this.$store.state.language.current;},
     availableLanguages() 
       {return this.$store.state.language.available;}
    },
    methods: {
      onLanguageChange(lang) {
        this.$store.dispatch('app:language:change', lang); }
    }
  }
</script>

语言发生变化的组件示例

<template>
    <h1> {{ language && title && title[language.name] }} </h1>
</template>
<script>
    const ABOUT_DIC = {
       title: {
         en: 'About',
         ru: 'Компания'
       }
     };
     export default {
        name: 'about',
        data () {
           return { title: ABOUT_DIC.title }
        },
        computed: {
            language() {
               return this.$store.state.language.current; }
     }
    }
</script>

Answer 1

您可以在vue中动态绑定类名称，并且由于似乎只有两个选项，您可以使用三元表达式来确定绑定哪个类。由于您已经从商店获得了语言名称，因此可以使用它来确定班级。像这样：

<template>
  <div v-bind:class="[language.name === 'en' ? englishClass : russianClass]">
    <h1> {{ language && title && title[language.name] }} </h1>
  </div>
</template>
<script>
    const ABOUT_DIC = {
       title: {
         en: 'About',
         ru: 'Компания'
       }
     };
     export default {
        name: 'about',
        data () {
           return { 
             title: ABOUT_DIC.title, 
             englishClass: 'blue',
             russianClass: 'green'
             }
        },
        computed: {
            language() {
               return this.$store.state.language.current; }
     }
    }
</script>
<style scoped>
  .blue {
    background-color: blue;
  }
  .green {
    background-color: green;
  }

显然，您可以在蓝色或绿色类中具有所需的任何样式。与此相关的vue.js文档为here

使用商店在Vuex中更改应用的颜色主题

1 个答案: