feat:换肤效果

+export const theme = {
+  bind: function (el, binding, vnode) {
+    setEleStyleColorAttribute(el, binding);
+  },
+  update: function (el, binding, vnode) {
+    setEleStyleColorAttribute(el, binding);
+  },
+  componentUpdated: function (el, binding, vnode) {
+    setEleStyleColorAttribute(el, binding);
+  }
+}
+
+function setEleStyleColorAttribute (el, binding) {
+  const { name, value, arg, expression, modifiers } = binding;
+  const { background, font, border } = modifiers;
+  if (background) el.style['background-color'] = value;
+  if (font) el.style.color = value;
+  if (border) el.style['border-color'] = value;
+}
\ No newline at end of file

 <template>
-  <div class="navbar">
+  <div class="navbar" v-theme.background="mTheme">
     <div class="logo">
       <img v-if="logo" :src="logo" class="header-logo">
     </div>
@@ -94,7 +94,7 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%);
+  // background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
   box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
   display: flex;
   align-items: center;

@@ -6,7 +6,12 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 import '@/styles/index.scss'
-import Base from './components/Base/base'
+import Base from './components/Base/base' // 全局组件引入
+import mixin from '@/utils/mixin/theme.js'
+Vue.mixin(mixin);
+
+import { theme } from "@/directive/theme.js"
+Vue.directive("theme", theme)
 
 import './image/icons' // icon
 import store from './store'

+export default {
+  name: 'mixin',
+  computed: {
+    mTheme () {
+      return this.$store.state.app.theme;
+    }
+  }
+}
\ No newline at end of file