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

青旅半醒 2022-09-01 13:49 309阅读 0赞

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

第一步新建组件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>这里放入我们点击按钮要隐藏和展示的内容</slot>
    </div> 
    </组件名字>

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

[20200909194657902.gif_pic_center]: /images/20220829/da83ecd013cc4d8abde410c0ac58dcd1.png