collapse.js展开折叠

最新推荐文章于 2024-01-26 11:54:41 发布

椿天在哪里

最新推荐文章于 2024-01-26 11:54:41 发布

阅读量273

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/ndkfa/article/details/131973863

版权

该文章展示了一个使用Vue.js和自定义过渡效果实现的折叠/展开功能。通过el-button组件触发点击事件改变isActive状态，控制collapse内容的显示与隐藏。同时，文章详细定义了一个名为collapseTransition的过渡动画，涉及高度、内边距的变化及过渡属性的设置。

摘要由CSDN通过智能技术生成

<el-button type="primary" size="mini" @click="isActive = !isActive">展开/折叠</el-button>

<collapse>
   <div v-show="isActive">
    //折叠内容
   </div>
</collapse>


import collapse from '@/utils/collapse';

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);
  }
};