vue+elementUI+transition实现鼠标滑过div展开内容,鼠标划出收起内容,加防抖功能

文章目录


一、场景

这两天做项目,此产品提出需求 要求详情页的顶部区域要在鼠标划入后展开里面的内容,鼠标划出要收起部分内容,详情底部的内容高度要自适应,我这里运用了鼠标事件+transition实现,加上lodash debounce进行防抖,下面是具体实现代码

二、实现代码

1.子组件代码结构

代码如下(示例):

javascript 复制代码
<template>
  <div
    class="project-header"
    @mouseenter="enterFun()"
    @mouseleave="leaveFun()"
    ref="project-header"
  >
    <div class="project-header-top">
    顶部要显示的部分
    </div>
    <div class="bottom" v-show="showProjectHeaderBottom">
    顶部要隐藏的部分,鼠标划入显示
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash';//npm install lodash引入
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {
      showProjectHeaderBottom: false,//控制顶部要隐藏的显隐
    };
  },
  methods: {
    // 鼠标滑过
    enterFun:debounce(function(){
      this.showProjectHeaderBottom = true;
      this.$emit('getHeight', 'hover');
    },100),
    // 鼠标划出
    leaveFun:debounce(function(){
      this.showProjectHeaderBottom = false;
      this.$emit('getHeight', null);
    },100),
  },
};
</script>
<style lang="scss" scoped>
.project-header {
  height: 68px;
}
</style>

2.父组件

代码如下(示例):

c 复制代码
<template>
  <div class="project-detail" ref="project-browse" >
    <Header
      ref="project-detail-top"
      class="project-detail-top"
      @getHeight="getHeight"
    >
    </Header>
    <div class="tab-content" style="position: relative" ref="tab-content">
    </div>
  </div>
</template>

<script>
import Header from './components/detailHeader.vue';
export default {
  name: '',
  components: {  Header},
  props: {},
  data() {
  },
  methods: {
    mountedInit() {
     this.getHeaderheight();
      window.addEventListener('resize', this.getHeaderheight);
    },
    getHeaderheight(type) {
      this.$nextTick(() => {
        let projectHeader = type === 'hover' ? 208 : 60;
        document.querySelector('.tab-content .el-tabs__content').style.overflow = type === 'hover' ? 'hidden' : 'auto';
        let height = this.$refs['project-browse']?.offsetHeight - projectHeader;
        this.$refs['tab-content'].style.height = height + 'px';//自适应
        this.$refs["project-detail-top"].$el.style.height=projectHeader+ 'px';
      });
    },

  },
  created() {
    this.createdInit();
  },
  mounted() {
    this.mountedInit();
  },
};
</script>
<style lang="scss" scoped>
.project-detail-top {
  transition: height 0.2s ease-in-out;
  overflow: hidden;
}
</style>

相关推荐
艾小码19 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199419 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光20 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥20 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司20 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_202220 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
三佛科技-1873661339720 小时前
分享机械键盘MCU解决方案
单片机·嵌入式硬件·计算机外设
TESmart碲视20 小时前
Mac 真正多显示器支持:TESmart USB-C KVM(搭载 DisplayLink 技术)如何实现
macos·计算机外设·电脑
error:(20 小时前
蓝牙鼠标频繁卡顿?一招解决 Win10/11 的 USB 省电机制干扰问题
计算机外设
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue