BoundLink-Plate-UI/src/views/page-detail/index.vue

<template>
  <div class="page-detail">
    <page-detail-layout :tabs="tabs" v-model:tab-active-key="tabActiveKey">
      <template #tab1>tab1</template>
      <template #tab2>tab2</template>
      <template #tab3>tab3</template>
    </page-detail-layout>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
  import selectedIcon from '/@/assets/images/page-detail-layout/selectedIcon.png';
  import unSelectedIcon from '/@/assets/images/page-detail-layout/unSelectedIcon.png';
  const tabActiveKey = ref('tab2');

  const tabs = ref([
    {
      title: 'tab1',
      key: 'tab1',
      slotName: 'tab1',
      selectedIcon: selectedIcon,
      unSelectedIcon: unSelectedIcon,
    },
    {
      title: 'tab2',
      key: 'tab2',
      slotName: 'tab2',
      selectedIcon: selectedIcon,
      unSelectedIcon: unSelectedIcon,
    },
    {
      title: 'tab3',
      key: 'tab3',
      slotName: 'tab3',
      selectedIcon: selectedIcon,
      unSelectedIcon: unSelectedIcon,
    },
  ]);
</script>

<style lang="scss" scoped>
  .page-detail {
    width: 100%;
  }
</style>