自定义展开收起面板

<template>
  <div class="jy-custom-collapse" :style="getRootStyle">
    <!-- 左侧区域 -->
    <div class="jy-custom-collapse-main" :style="horizontal ? getWidthStyle : getHeightStyle">
      <!-- 内容自定义 -->
      <div :style="horizontal ? {} : isOverflow">
        <span class="targetElement" ref="targetElement">
          <slot></slot>
        </span>
      </div>

      <div class="handle-horizontal" :style="getBtnImg" @click="handleClick" v-if="horizontal">
        <em :class="`${value ? 'jy-icon-arrow-right' : 'jy-icon-arrow-left'}`"></em>
      </div>
    </div>
    <!-- 右侧区域 -->
    <div
      :class="['jy-custom-collapse-container', { 'jy-custom-collapse-container-close': !value }]"
      :style="getContainerStyle"
      v-if="horizontal"
    >
      <!-- 内容自定义 -->
      <slot name="container"></slot>
    </div>
    <!-- 按钮 -->
    <div class="handle">
      <span class="handle-vertical" @click="handleClick" v-if="!horizontal && showBtn">
        <span>
          <span :class="['iconfont icon-xiangxiajiantou1', { 'open-more-icon': !value }]"></span>
          <span>{{ getbtnName }}</span>
        </span>
      </span>
    </div>
  </div>
</template>

<script>
import collapse from './collapse.png'
import { mapState } from 'vuex'
const defaultOptions = {
  // 主内容区默认高度
  maxHeight: 200,
  // 内容宽度
  containerWidth: 476,
  // 内容最大宽度
  containerMaxwidth: 476,
  // 最大显示多少行
  showLineClamp: 3,
  // 展开收起
  handerText: ['展开全部', '收起']
}
export default {
  props: {
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    // 展示收起控制
    value: {
      type: Boolean
    },
    // 水平还是垂直
    horizontal: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState('d2admin/menu', ['asideCollapse']),
    // 根模块样式
    getRootStyle() {
      return {
        'flex-direction': this.horizontal ? 'row' : 'column'
      }
    },
    // 主内容水平区域 样式
    getWidthStyle() {
      const { containerWidth } = this.config
      return {
        width: this.value ? `calc(100% - 16px - ${containerWidth}px)` : '100%'
      }
    },
    // 右侧内容区域样式
    getContainerStyle() {
      const { containerWidth } = this.config
      return {
        width: this.value ? containerWidth + 'px' : '0px'
      }
    },
    // 主内容竖向区域 样式
    getHeightStyle() {
      const { maxHeight } = this.config
      const heightObj = this.value ? { 'max-height': maxHeight + 'px' } : { height: 'auto' }
      return {
        overflow: this.value ? 'hidden' : 'auto',
        transition: 'all 0.05s',
        boxSizing: 'border-box',
        ...heightObj
      }
    },
    isOverflow() {
      const { showLineClamp } = this.config
      const str = this.value
        ? {
            WebkitLineClamp: showLineClamp, // 限制为3行
            overflow: 'hidden',
            display: '-webkit-box', // 使用 WebKit 的弹性盒子模型显示
            WebkitBoxOrient: 'vertical' // 设置或检索伸缩盒对象的子元素的排列方式（垂直）
          }
        : {}
      return {
        height: '100%',
        boxSizing: 'border-box',
        padding: '10px 20px 0px',
        lineHeight: '30px',
        transition: 'all 0.05s',
        ...(str || {})
      }
    },

    getBtnImg() {
      const { btnStyle } = this.config
      return { backgroundImage: `url(${collapse})`, ...(btnStyle || {}) }
    },
    // 获取按钮名称
    getbtnName() {
      const btn = ['展开全部', '收起']
      const { handerText = btn } = this.config
      const [open, stop] = handerText || btn
      return this.value ? open : stop
    }
  },
  data() {
    return {
      config: {},
      showBtn: true
    }
  },
  watch: {
    options: {
      deep: true,
      immediate: true,
      handler(newValue) {
        /* 初始化合并参数 */
        this.config = Object.assign({}, defaultOptions, newValue)
      }
    },
    asideCollapse() {
      if (!this.horizontal) {
        this.isShowBtn()
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('input', !this.value)
    },
    isShowBtn() {
      this.$nextTick(() => {
        const element = this.$refs.targetElement
        const { maxHeight } = this.config
        if (element) {
          this.showBtn = Boolean((element.offsetHeight || 0) > maxHeight)
        }
      })
    }
  },
  mounted() {
    if (!this.horizontal) {
      this.isShowBtn()
      window.addEventListener('resize', () => {
        this.isShowBtn()
        this.util.throttle(this.isShowBtn, 700)()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.jy-custom-collapse {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  &-main {
    transition: all 0.05s;
    position: relative;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .handle-horizontal {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -29px;
    width: 16px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .handle {
    min-height: 10px;
    .handle-vertical {
      width: 95px;
      height: 30px;
      margin: 0 auto;
      box-sizing: border-box;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('~@/../src/assets/images/main/see-more.png');
      color: $--jy-color-text-secondary;
      .iconfont {
        font-size: 12px;
        margin-right: 6px;
        font-weight: 600;
        transition: all 0.2s;
        display: inline-block;
      }
      .open-more-icon {
        transform: rotate(-180deg);
      }
    }
  }
  &-container {
    flex: 1;
    margin-left: 16px;
    height: 100%;
    transition: all 0.05s;
  }
  &-container-close {
    width: 0;
    flex: 0;
    margin-left: 0;
  }
}
</style>