vue实现展开与收缩

先来效果图(不要在意样式 - - 丶):

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

html:

<!-- 隐藏部分
    ---------------------------->
    <collapse-transition>
      <div class="collapse-wrap" v-show="isActive">
        <!-- @slot default -->
        <!-- <slot>勇勇啊</slot> -->
        <div class="content1">勇勇啊</div>
      </div>
    </collapse-transition>
    <div @click="toggle($event)" class="collapse_btn">打开</div>

js:

import collapseTransition from "../../collapse";
export default {
  components: {
    collapseTransition
  },
  data() {
    return {
      isActive: true,
    }
  },
  methods: {
	toggle(el){
 	  console.log(el);
      this.isActive = !this.isActive;
      if (this.isActive) {
        el.target.innerHTML = "收缩";
      } else {
        el.target.innerHTML = "打开";
      }   
    },
  }
}

css:

.collapse-wrap{
  width: 200px;
  background: pink;
  color: #fff;
  margin-left: 100px;
}
.collapse_btn{
  width: 100px;
  height: 50px;
  border: 1px solid;
  border-radius: 25px;
  margin-left: 150px;
  text-align: center;
  line-height: 50px;
  font-size: 22px
}
.content1{
  height: 120px;
  font-size: 20px
}

参考链接: https://segmentfault.com/q/1010000011359250