vue項目換膚製作

vue項目換膚製作

最近公司一個項目是有個需求是，一個網站集成4個公司的品牌，按要求需要點擊換風格皮膚。

通過點擊上面4個按鈕實現數據切換，我將上面按鈕進行組件封裝，放入header組件中，在點擊的時候使用vuex傳遞數據到app.vue中。

vuex 中綁定事件

export default new Vuex.Store({
  state: {
    skin: 'HH'
  },
  mutations: {
    changeSkin (state, str) {
      state.skin = str
    }
  }
})

在四個品牌上綁定點擊事件，提交事件

brandChange: function (currentImage, id) {
  // 通過commit提交獲取的id數據到store
  this.$store.commit('changeSkin', id)
  //通過id 請求 獲取不同品牌的數據源 和 不同皮膚
  console.log(this.$store.state.skin)
}

然後在app.vue中使用計算屬性獲取id，並綁定class到#app上

<template>
  <div id="app" :class="className">
    <Header brandId="HH"/>
    <RightNav />
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import RightNav from '@/components/RightNav.vue'
export default {
  name: 'app',
  data() {
    return{}
  },
  components: {
    Header,
    RightNav
  },
  computed: {
    className: function () {
      // 隨時獲取store中的skin數據，依據版本替換class
      return this.$store.state.skin
    }
  },
}
</script>
<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

新建一個less文件用以切換class,在main.js中引入，我們只要將需要變動的顏色，圖標單獨放在這裏面，就能實現皮膚切換。
格式如下：

.hh{
	/*some less*/
}
.ii{
	/*some less*/
}
.tao{
	/*some less*/
}

這樣就能完成皮膚切換，當然，我們還可以通過切換id實現數據源的切換，實現方式也是一樣的。
項目地址bigscreen，我會陸陸續續的繼續完善整個項目，希望幫到的同學能star一下，現在工作真難找。