Vue 实现展开折叠效果

效果参见：https://segmentfault.com/q/1010000011359250/a-1020000011360185

上述链接中，大佬给除了解决方法，再次进行总结，方便以后使用。

除了使用jQuery的方式实现上述效果，同样可以在Vue实现，下面是解决办法：

1、创建collapse.js文件

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: "collapseTransition",functional: true,render(h, { children }) {const data = {on: Transition};return h("transition", data, children);}
};

2、在.vue组件中引入


<template><div class="container"><button @click="isActive = !isActive">展开/折叠</button><collapse><div class="container" v-show="isActive"><h2>欢迎大家品尝Pizza!</h2><h5>这里有你非常喜欢的Pizza!</h5></div></collapse></div>
</template>
<script>
import collapse from "../assets/js/collapse.js";
export default {data() {return {isActive: false};},components: {collapse}
};
</script>

Vue 实现展开折叠效果相关推荐

WPF实现圆形菜单动态展开折叠效果
实现效果如下: 思路:根据子菜单个数计算旋转角度动态生成子菜单,并设置展开折叠动画. 步骤: 1.自定义按钮MyButton,建立展示图像属性DisplayImage public class MyB ...
vue制作展开收起效果
<template><div><div class="report-list-title"><div v-for="(item, ...
JasperReport做清单的展开折叠效果
之前工作需要要求在报表中做这样的效果,在网上找了很久很久没有找到方法. 后来自己想到一个方法,思路是这样:就是给需要折叠的条目设置有规律的id,并且利用其文本直接复制的处理方式,为需要折叠的标签加上o ...
VUE实现折叠展开动画效果
VUE实现折叠展开动画效果第一种情况:从中间向两边展开效果(水平缩放) .input-search {position: absolute;bottom: 8px;right: 0px;width: ...
标签超过两行折叠，可展开（淘宝搜索历史记录折叠效果）（vue）
问题: 有时,碰到很多行标签,需要展示的篇幅比较大,例如淘宝搜索的历史记录标签行,如果一下子全部展示很影响美观,我们就有必要使用折叠效果,达到用户需要展开查看全部时再查看. 解决: 1. 获取父容器所 ...
Vue table 点击按钮展开折叠面板
vue 实现的 table 折叠展开功能,由于工作中用到,这里把相应代码整理下,方便自己日后 Copy 1.Html 部分由基本的 table 表单与折叠栏部分组成 PS:table 上需要加上 r ...
vue实现侧边折叠菜单栏手风琴效果
在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍. 请先看效果演示图. 步骤1:先架构整个页面的布局,撰写h ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果
目录示例: 1. expandable模式(默认) - 文本展开收起效果: 2. tooltip模式 - 文本使用Tooltip效果: 3. tooltipExpandable模式 - 文本同时使用 ...

Vue 实现展开折叠效果

Vue 实现展开折叠效果相关推荐

最新文章

热门文章