// 在模板中
<div v-if="$slots.search">
  <slot name="search" />
</div>

// 在 Composition API 中
import { useSlots } from 'vue'
const slots = useSlots()
const hasSearchSlot = !!slots.search

<!-- TablePickerDialog.vue -->
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <!-- 搜索框插槽 - 只有父組件傳遞了才顯示 -->
    <div v-if="$slots.search" class="search-slot">
      <slot name="search" />
    </div>

    <el-table :data="tableData">
      <!-- 表格內(nèi)容 -->
    </el-table>
  </Dialog>
</template>

<!-- FollowRecordForm.vue -->
<template>
  <el-form :model="formData">
    <!-- 基礎(chǔ)信息區(qū)域 -->
    <div class="form-section">
      <h3>基礎(chǔ)信息</h3>
      <slot name="basic" />
    </div>

    <!-- 擴(kuò)展信息區(qū)域 - 有條件顯示 -->
    <div v-if="$slots.extension" class="form-section">
      <h3>擴(kuò)展信息</h3>
      <slot name="extension" />
    </div>

    <!-- 附件區(qū)域 - 有條件顯示 -->
    <div v-if="$slots.attachment" class="form-section">
      <h3>附件</h3>
      <slot name="attachment" />
    </div>
  </el-form>
</template>

<!-- AudioPicker.vue -->
<template>
  <div class="audio-picker">
    <!-- 切換按鈕 -->
    <div class="switch-tabs">
      <el-radio-group v-model="audioSource">
        <el-radio-button label="upload">上傳音頻</el-radio-button>
        <el-radio-button label="record" v-if="$slots.record">
          選擇錄音
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 上傳區(qū)域 -->
    <div v-if="audioSource === 'upload'">
      <slot name="upload" />
    </div>

    <!-- 錄音選擇區(qū)域 -->
    <div v-else-if="audioSource === 'record' && $slots.record">
      <slot name="record" />
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 檢測插槽是否存在
    console.log(this.$slots.search) // 具名插槽
    console.log(this.$slots.default) // 默認(rèn)插槽
  },
  
  computed: {
    hasSearchSlot() {
      return !!this.$slots.search
    }
  }
}
</script>

<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 計(jì)算屬性方式
const hasSearchSlot = computed(() => !!slots.search)
const hasActionSlot = computed(() => !!slots.action)

// 或者在模板中直接使用
</script>

<template>
  <div v-if="slots.search" class="search-slot">
    <slot name="search" />
  </div>
</template>

<!-- 不推薦：總是渲染容器 -->
<div class="search-slot">
  <slot name="search" />
</div>

<!-- 推薦：有條件渲染 -->
<div v-if="$slots.search" class="search-slot">
  <slot name="search" />
</div>

<template>
  <div class="component-wrapper">
    <!-- 有條件渲染插槽，提供默認(rèn)內(nèi)容 -->
    <div v-if="$slots.header" class="header">
      <slot name="header" />
    </div>
    <div v-else class="default-header">
      <h3>默認(rèn)標(biāo)題</h3>
    </div>

    <!-- 主要內(nèi)容 -->
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { useSlots, computed } from 'vue'

const slots = useSlots()

// 檢測多個(gè)插槽
const slotStatus = computed(() => ({
  hasSearch: !!slots.search,
  hasAction: !!slots.action,
  hasFooter: !!slots.footer,
  hasDefault: !!slots.default
}))

// 根據(jù)插槽狀態(tài)計(jì)算樣式類
const containerClass = computed(() => ({
  'with-search': slotStatus.value.hasSearch,
  'with-footer': slotStatus.value.hasFooter,
  'compact': !slotStatus.value.hasSearch && !slotStatus.value.hasFooter
}))
</script>

<template>
  <TablePickerDialog 
    v-model="showDialog" 
    dialogTitle="選擇錄音"
    :tableData="tableData"
    :tableDefine="columns"
  >
    <!-- 搜索框插槽 -->
    <template #search>
      <el-form :inline="true">
        <el-form-item label="呼叫類型">
          <el-select v-model="searchParams.callType">
            <el-option label="呼入" value="1" />
            <el-option label="呼出" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 操作按鈕插槽 -->
    <template #action="{ row }">
      <el-button link type="success" @click="handlePlay(row)">播放</el-button>
      <el-button link type="warning" @click="handleView(row)">詳情</el-button>
    </template>

    <!-- 底部插槽 -->
    <template #footer>
      <el-button>自定義操作</el-button>
    </template>
  </TablePickerDialog>
</template>