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

 更新时间:2023年11月16日 09:54:11   作者:流浪者°  
这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

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>

vue页面背景颜色修改

由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。

废话不多说直接上代码,亲测百分之百有效:

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

下面说下为什么要在beforeCreate钩子内部用this.$nextTick钩子包裹,this.$nextTick的作用是dom完全加载完成,所以我们改变body背景颜色是在操作dom

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决在Vue中使用axios用form表单出现的问题

    解决在Vue中使用axios用form表单出现的问题

    今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue实现鼠标移入移出事件代码实例

    vue实现鼠标移入移出事件代码实例

    这篇文章主要介绍了vue实现鼠标移入移出事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue2.0父组件与子组件之间的事件发射与接收实例代码

    Vue2.0父组件与子组件之间的事件发射与接收实例代码

    这篇文章主要介绍了Vue2.0父组件与子组件之间的事件发射与接收实例代码,需要的朋友可以参考下
    2017-09-09
  • Vue实现父子组件页面刷新的几种常用方法

    Vue实现父子组件页面刷新的几种常用方法

    很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,本文主要介绍了Vue实现父子组件页面刷新的几种常用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue-router优化import引入过多导致index文件臃肿问题

    Vue-router优化import引入过多导致index文件臃肿问题

    这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    这篇文章主要介绍了解决vue axios跨域 Request Method: OPTIONS问题(预检请求),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue2.x中$attrs的使用方法教程

    vue2.x中$attrs的使用方法教程

    正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue脚手架创建项目时报catch错误及解决

    vue脚手架创建项目时报catch错误及解决

    这篇文章主要介绍了vue脚手架创建项目时报catch错误及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue中component组件的props使用详解

    vue中component组件的props使用详解

    本篇文章主要介绍了vue中component组件的props使用详解,这里整理了详细的用法,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • vuex中mapActions的概念及基本用法

    vuex中mapActions的概念及基本用法

    mapActions 就是将组件中的函数映射为对应的action,通过本文我们了解了mapActions 大概是用来干什么的,接下来介绍一下 mapActions 的具体用法,感兴趣的朋友一起看看吧
    2023-09-09

最新评论