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一下，现在工作真难找。