Vue实现点击按钮上下滑动隐藏或展示查询条件

NotNull1

已于 2023-10-28 16:07:45 修改

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue js 滑动动画点击按钮上下滑动抽屉与折叠面板

于 2020-09-09 20:09:42 首次发布

Vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

🎈个人公众号:🎈 :✨✨ 可为编程 ✨✨ 🍟🍟
🔑个人信条:🔑知足知不足有为有不为为与不为皆为可为🌵
🍉本篇简介:🍉 本片详细说明了inux mv移动文件命令详解与替换强制覆盖多个文件使用规则和注意要点，并给出具体操作实例，如有出入还望指正。

关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!

如图中的是jquery实现的，那么在vue中如何实现呢？
在这里插入图片描述
结合自己的项目进行了整合，具体的额模块代码如下所示：

第一步新建组件js

建个JS文件，随便取个名字，把下面的js复制进去，我这里叫moreSlideComponents，因为我要实现的是点击【更多】按钮时如上图所示的样式。

/*
* 这是一个vue 点击按钮 向上滑动展开的效果组件 例如综合查询接处警的更多条件
* */
const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
  'before-enter'(el) {
    el.style.transition = elTransition
    if (!el.dataset) el.dataset = {}

    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom

    el.style.height = 0
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  },

  'enter'(el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    el.style.overflow = 'hidden'
  },

  'after-enter'(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  },

  'before-leave'(el) {
    if (!el.dataset) el.dataset = {}
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow

    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },

  'leave'(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  },

  'after-leave'(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}

export default {
  name: 'ScollerTop',
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

第二步导入组件

在你要用到的页面导入你要使用的组件名字：
关注公众号【可为编程】回复【面试】领取年度最新面试题大全!!!

//import 组件名字(随便取) from '你建的JS文件路径'，
<script>
import moreSlideComponents from './components/moreSlideComponents'
export default{
components:{
	moreSlideComponents //多个的话以逗号隔开
	}
}，
data() {
    return {
      isActive: true //多个属性的话以逗号隔开  这是用来控制被隐藏的模块是否显示
    }
    </script>

第三步调用组件

<标签 @click="isActive=!isActive">打开或者收缩</标签>
<组件名字>

 <div class="collapse-wrap" v-show="isActive">
  <!-- @slot default -->
  <slot>这里放入我们点击按钮要隐藏和展示的内容</slot>
</div> 
</组件名字>

<template>
  <moreSlideComponents>
              <div
                v-show="isActive"
                class="collapse-wrap">
                <!-- @slot default -->
                <slot>这里放入我们点击按钮要隐藏和展示的内容</slot>
             </div>
  </moreSlideComponents>
</template>