4dkankan_official/src/components/edit/index.vue

<template>
  <div class="edit-layout">
    <div class="edit-bar">
      <span>{{name}}</span>
      <span :class="{active:!isActive}" @click="clickhandle">{{oper}}</span>
    </div>
    <div class="slot" :style="{maxHeight:isActive?'800px':'0'}">
      <slot name="show" ></slot>
    </div>
    <div class="slot" :style="{maxHeight:!isActive?'800px':'0'}">
      <slot name="edit"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ['name', 'oper', 'isActive'],
  methods: {
    clickhandle () {
      this.$emit('clickOper')
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-layout{
  padding: 30px 0 30px 40px;
  width: 850px;
  border-bottom: 1px solid #e7e7e7;
  .edit-bar{
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    span{
      &:last-of-type{
        position: relative;
        padding-right: 20px;
        cursor: pointer;
        &::after{
          content: '';
          border: 9px solid transparent;
          border-top-color: #000;
          border-left-width: 5px;
          border-right-width: 5px;
          position: absolute;
          margin-top: 5px;
          right: 0;
          top: 50%;
          transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
          z-index: 1;
          transform-origin: center 25%;
          transform: translateY(-50%);
        }
      }
    }
    .active{
      &:last-of-type{
         &::after{
          transform: translateY(-50%) rotate(180deg);
        }
      }

    }
  }
  .slot{
    overflow: hidden;
    transition: max-height 0.5s ease;
  }
}
</style>