轻松实现折叠面板组件

末蓝、 2021-09-20 00:22 520阅读 0赞

实现的效果类似element-ui的Collapse折叠面板组件，地址[链接][Link 1]。

使用效果

<collapse>
      <collapse-item> <template slot="title"> 一致性 Consistency </template> <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> </collapse-item> </collapse>
    复制代码

布局`collapse`组件

<template>
      <div>
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        changeState (id) {
          this.$children.forEach(child => {
            if (child._uid !== id) {
              child.isShow = false
            } else {
              child.isShow = !child.isShow
            }
          })
        }
      }
    }
    </script>
    复制代码

布局`collapse-item`组件

<template>
      <div>
        <div @click="handleClick" >
          <slot name="title">
            标题
          </slot>
        </div>
        <transition>
          <div v-show="isShow" class="content">
            <slot></slot>
          </div>
        </transition>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          isShow: false
        }
      },
      methods: {
        handleClick () {
          this.$parent.changeState(this._uid)
        }
      }
    }
    </script>
    
    <style scoped>
    .content {
      overflow: hidden;
    }
    </style>
    
    复制代码

基本的功能已经完成，但是缺少动画，`transition`标签内置了很多JS动画钩子函数，通过这些函数来实现动画。控制动画的方式有JS和CSS两种方式。

## JS控制动画 ##

beforeEnter (el) {
      // 动画之前
      el.style.height = 0
    },
    enter (el, done) {
      // 动画过程
      let height = el.scrollHeight
      let step = height / 300 * 20
      let distance = 0
      let change = () => {
        distance += step
        if (distance < height) {
          el.style.height = `${distance}px`
          requestAnimationFrame(change)
        } else {
          el.style.height = `${height}px`
          done()
        }
      }
      requestAnimationFrame(change)
    },
    afterEnter (el) {
      // 动画之后
      console.log('展开动画完成')
    },
    leave (el, done) {
      // 动画过程
      let height = el.scrollHeight
      let step = height / 300 * 20
      let change = () => {
        height -= step
        if (height > 0) {
          el.style.height = `${height}px`
          requestAnimationFrame(change)
        } else {
          el.style.height = 0
          done()
        }
      }
      requestAnimationFrame(change)
    },
    afterLeave (el) {
      // 动画之后
      console.log('关闭动画完成')
    }
    复制代码

## CSS控制动画 ##

beforeEnter (el) {
      // 动画之前
      el.style.height = 0
    },
    enter (el, done) {
      // 动画过程
      let height = el.scrollHeight
      el.style.transition = this.elTransition
      el.style.height = `${height}px`
      el.addEventListener('transitionend', () => {
        done()
      })
    },
    afterEnter (el) {
      // 动画之后
      console.log('展开动画完成')
    },
    leave (el, done) {
      // 动画过程
      el.style.height = 0
      el.addEventListener('transitionend', () => {
        done()
      })
    },
    afterLeave (el) {
      // 动画之后
      console.log('关闭动画完成')
    }
    复制代码

动画功能已经完成，给`transition`加上这些方法。

<transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
      @after-leave="afterLeave"
    >
      <div  v-show="isShow" class="content">
        <slot></slot>
      </div>
    </transition>
    复制代码

## 抽象组件 ##

最后实现一个抽象组件折叠/展开的效果，类似element-ui里面的折叠展开效果，地址[链接][Link 2]

<collapse-abstract title="展开/收起">
      <div>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </div>
    </collapse-abstract>
    复制代码

抽象组件与普通组件类似。他们只是添加额外的行为。

代码在这里，点击[链接][Link 3]

转载于:https://juejin.im/post/5cddf33be51d45475e613e7f

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Felement.eleme.io%2F%23%2Fzh-CN%2Fcomponent%2Fcollapse
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Felement.eleme.io%2F%23%2Fzh-CN%2Fcomponent%2Ftransition%23collapse-zhan-kai-zhe-die
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fwuxianqiang%2Fcollapse