Vue的hover/click事件如何动态改变颜色和背景色

	  <!-- :changeColor为传入的颜色数据 -->
      <head-bar-item path="/home" :changeColor="{color: '#dc5d48', bgColor: '#373833'}">
        <template v-slot:item-text>首页</template>
      </head-bar-item>
      <head-bar-item path="/category">
        <template v-slot:item-text>分类</template>
      </head-bar-item>

<template>
  <span
    class="tab-bar-item"
    :style="changeStyle"
    @click="itemClick"
    @mouseover="itemHover"
    @mouseout="removeHover"
  >
    <slot name="item-text"></slot>
  </span>
</template>

<script>
export default {
  name: "HeadBarItem",
  props: {
    path: String,
    changeColor: {
      type: Object,
      default() {
        return { color: "#dc5d48", bgColor: "#373833" };
      },
    },
  },
  data() {
    return {
      isHover: false,
    };
  },
  computed: {
    isActive() {
      return this.$route.path.includes(this.path);
    },
    //计算属性改变颜色核心
    //过程：如果按钮被点击了，则为用户传入的颜色，否则在判断鼠标是否移入改变了isHover，移入则变色，否则为默认值
    changeStyle() {
      return {
        color: this.isActive
          ? this.changeColor.color
          : this.isHover
          ? this.changeColor.color
          : "#f8f8f2",
        backgroundColor: this.isActive
          ? this.changeColor.bgColor
          : this.isHover
          ? this.changeColor.bgColor
          : "#545453",
      };
    },
  },
  methods: {
    itemClick() {
      //点击实现路由跳转
      this.$router.replace(this.path);
    },
    itemHover() {
      this.isHover = true;
    },
    removeHover() {
      this.isHover = false;
    },
  },
};
</script>

<template>
  <div>
    
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted(){},
  methods: {},
  //实例创建之前钩子函数--给body添加行内样式
  beforeCreate () {
    this.$nextTick(()=>{
      document.body.setAttribute('style', 'background:#EAECF1')
    })
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy () {
    document.body.removeAttribute('style')
  }
};
</script>
 
<style lang="scss" scoped></style>