展开收起

vue项目中展开收起功能

简单操作

npm i @lijixuan/collapse-transition

import packUp from '@lijixuan/collapse-transition';

mixins: [packUp]

el-button(type="text" class="ml10"  @click="packUp")
  span(class="mr5 ml10") {{ packUpFlag ? '收起' : '展开' }}
  i(:class="packUpFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'")

将要展开收起的元素进行包裹

  collapse-transition
    div(class="collapse-wrap" v-show="packUpFlag")
      //- 你的内容

变量与方法 可以进行覆盖

	packUpFlag: Boolean;
  //  可以进行覆盖
  packUp() {
  	this.packUpFlag = !this.packUpFlag;
  }