vueco/src/components/Header.vue

/*
 * @Author: fish119 
 * @Date: 2017-05-19 13:22:28 
 * @Last Modified by: fish119
 * @Last Modified time: 2017-05-22 16:31:08
 */
<template>
  <div>
    <mu-appbar class="title" :title="title">
      <mu-icon-button v-if="isTopic" @click="goBack" icon="arrow_back" slot="left" />
      <mu-icon-button v-else slot="left">
        <img class="logo" src="https://www.vue-js.com/public/images/vue.png">
      </mu-icon-button>
      <mu-icon-menu slot="right" icon="more_vert" :value="theme" @change="changeTheme">
        <mu-menu-item title="LIGHT" value="light" />
        <mu-menu-item title="CARBON" value="carbon" />
        <mu-menu-item title="TEAL" value="teal" />
      </mu-icon-menu>
    </mu-appbar>
  </div>
</template>

<script>
import light from '!raw-loader!muse-ui/dist/theme-default.css'
import carbon from '!raw-loader!muse-ui/dist/theme-carbon.css'
import teal from '!raw-loader!muse-ui/dist/theme-teal.css'
export default {
  data() {
    return {
      theme: 'light',
      themes: {
        light,
        carbon,
        teal
      }
    }
  },
  computed: {
    title: function () {
      return this.$store.state.titleMap.get(this.$route.path)
    },
    isTopic:function(){
      return this.$route.path == '/content'
    }
  },
  methods: {
    changeTheme(theme) {
      this.theme = theme
      const styleEl = this.getThemeStyle()
      styleEl.innerHTML = this.themes[theme] || ''
    },
    getThemeStyle() {
      const themeId = 'muse-theme'
      let styleEl = document.getElementById(themeId)
      if (styleEl) return styleEl
      styleEl = document.createElement('style')
      styleEl.id = themeId
      document.body.appendChild(styleEl)
      return styleEl
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.title {
  text-align: center;
  height: 5rem;
}

.mu-icon-button {
  padding: 0.4rem;
}
</style>