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

置顶流浪者°

已于 2023-04-17 10:40:55 修改

阅读量1w

点赞数 6

分类专栏： Vue小知识文章标签： vue js javascript css

于 2020-08-12 20:32:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43428543/article/details/107965686

版权

Vue小知识专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种不使用增删class类的方法，通过hover和click事件动态改变按钮的背景色和文字颜色。利用Vue.js特性，实现按钮在鼠标悬停和点击状态下的颜色变化，同时支持路由跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hover和click事件共存，动态改变按钮背景色和文字颜色，不需要用到增删class类，增删class类是样式写死，体验不好！

1.父组件内容

	  <!-- :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>

2.子组件内容(配合路由跳转)

<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>