BoundLink-Plate-UI/src/components/BsUi/Descriptions/index.vue

<template>
  <div class="description">
    <div class="d-title" @click="handleClkHeader">
      <span>{{ title }}</span>
      <div>
        <DownOutlined style="font-size：12px; color: #979797" v-if="foldState" />
        <UpOutlined style="font-size：12px; color: #979797" size="10px" v-if="!foldState" />
      </div>
    </div>

    <div v-show="foldState">
      <div class="default_slot" v-if="slots.default">
        <slot></slot>
      </div>
      <a-descriptions v-if="!isEmpty(items)" :bordered="false">
        <a-descriptions-item v-for="(item, index) in items" :key="index" v-bind="item.extraProps">
          <template #label>
            <slot v-if="item.labelSlot" :name="item.labelSlot"></slot>
            <span v-else class="dsc-label">{{ item.label }}</span>
          </template>

          <template v-if="item.valueSlot">
            <slot :name="item.valueSlot"></slot>
          </template>
          <template v-if="!item.valueSlot">
            <div class="dsc-value">
              {{ item.value }}
            </div>
          </template>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>
<script setup>
  import { isEmpty } from 'lodash';
  import {ref, useSlots} from 'vue';

  const props = defineProps({
    title: {
      required: true,
      default: '',
    },
    items: {
      required: false,
      default: [],
    },
    isFolded: {
      required: false,
      default: false,
    },
  });

  const foldState = ref(true);

  const emits = defineEmits(['update:isFolded']);

  const slots = useSlots();

  const handleClkHeader = () => {
    foldState.value = !foldState.value;
  };
</script>
<style lang="scss" scoped>
  .description {
    width: 100%;
    .d-title {
      font-size: 16px;
      font-weight: 600;
      padding: 10px 0 10px 10px;
      border-bottom: 1px solid #e4e7ed;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      &:hover {
        background: rgba(#000, .1);
        border-radius: 8px;
      }
      &::before {
        width: 4px;
        height: 18px;
        background: var(--webchat-toolbar-background-color);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        border-radius: 4px;
      }
    }
    .dsc-label {
      font-size: 14px;
      color: #6c6c6c;
    }
    .dsc-value {
      font-size: 14px;
      color: #000;
      font-weight: 500;
    }
    :deep(.ant-descriptions-header) {
      margin: 0 0 10px 0;
    }
    :deep(.ant-descriptions-item) {
      margin: 0;
      padding: 10px 0 0 0;
    }
    .default_slot {
      padding: 10px 0;
    }
  }
</style>