更新记录

1.0.4（2025-02-23） 下载此版本

1.新增@change获取当前选择的大分类

1.0.3（2025-02-22） 下载此版本

1.背景填充为白色

1.0.2（2025-02-22） 下载此版本

优化readme

平台兼容性

uni-app

MasterDetailBox 组件

MasterDetailBox 是一个简单的主从（Master-Detail）视图组件，适用于小程序、Vue 3 及 UniApp 开发。该组件提供了一个左右结构的布局，左侧为主列表，右侧为详情展示。

功能特点

• 支持主从结构：左侧选择 master 项，右侧动态显示对应的 detail 内容。
• 支持插槽：右侧详情区可通过插槽完全自定义内容。
• 选中状态高亮：点击左侧 master 项时，选中的项会高亮显示。

安装与使用

1. 引入组件

<template>
    <view style="height: 100vh;">
        <yy-master-detail>
            <template v-slot:detail="{ current }">
                <view>插槽内容{{current}}</view>
            </template>
        </yy-master-detail>
    </view>
</template>

<script setup>
import { ref } from 'vue';
const masterData = ref(['item1','item2'])
</script>

组件 API

Props

Slots

组件代码

MasterDetailBox.vue

<template>
  <view class="master-detail-box">
    <!-- 左侧 master 列表 -->
    <view class="master-detail-left">
      <view
        class="master-detail-left-item"
        :class="{'active': selectedMaster === item}"
        v-for="(item, index) in masterData"
        :key="index"
        @click="selectedMaster = item"
      >
        {{ item }}
      </view>
    </view>

    <!-- 右侧 detail 列表 -->
    <view class="master-detail-right">
      <slot name="detail" :current="selectedMaster"></slot>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  masterData: {
    type: Array,
    default: () => ["item1", "item2"],
  }
});

const selectedMaster = ref(props.masterData[0]);
</script>

<style lang="scss">
.master-detail-box {
  display: flex;
  height: 100%;
}

.master-detail-left {
  width: 30%;
  background: #f5f5f5;
  height: 100%;
}

.master-detail-left-item {
  padding: 15px 10px;
  cursor: pointer;
  transition: background 0.3s;
}

.master-detail-left-item.active {
  background: white;
  font-weight: bold;
}

.master-detail-right {
  width: 70%;
  padding: 10px;
}
</style>

说明

• 该组件通过 masterData 传入左侧 master 列表数据。
• 右侧 detail 通过具名插槽 (v-slot:detail) 接收 current，用于动态展示内容。
• 选中 master 后，对应的 current 值会传递给 detail 插槽，使其可以根据选中项显示不同的内容。