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

如图中的是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 = elTransitionif (!el.dataset) el.dataset = {}el.dataset.oldPaddingTop = el.style.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0},'enter'(el) {el.dataset.oldOverflow = el.style.overflowif (el.scrollHeight !== 0) {el.style.height = el.scrollHeight + 'px'el.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom} else {el.style.height = ''el.style.paddingTop = el.dataset.oldPaddingTopel.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.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.dataset.oldOverflow = el.style.overflowel.style.height = el.scrollHeight + 'px'el.style.overflow = 'hidden'},'leave'(el) {if (el.scrollHeight !== 0) {el.style.transition = elTransitionel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0}},'after-leave'(el) {el.style.transition = ''el.style.height = ''el.style.overflow = el.dataset.oldOverflowel.style.paddingTop = el.dataset.oldPaddingTopel.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><divv-show="isActive"class="collapse-wrap"><!-- @slot default --><slot>这里放入我们点击按钮要隐藏和展示的内容</slot></div></moreSlideComponents>
</template>

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

vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
点击按钮控制div隐藏和显示
要求:有一个按钮,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推.效果如下图方法一引入vue <html><head>< ...
vue实现点击按钮展开侧边栏，再点击按钮收起
最近项目里有个需求需要点击按钮实现侧边栏展开收起状态,看了很多,其他实现都是比较复杂的,下方是用最简便的代码实现想要的效果. 如果所示: //侧边栏内容区域 //为了看的方便,只放主要代码,内容根据需 ...
vue实现点击按钮，复制图片、文本到粘贴板
最近有个需求,需要点击按钮之后,一键复制内容,内容中有图片,有文字,需要都复制出来,于是发现了一个轻巧.方便的插件 clipboard-all (https://www.npmjs.com/pac ...
Vue实现点击按钮进行文件下载(后端Java)
最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...

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

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

最新文章

热门文章