Title 标题组件文档

简介

Title 组件用于显示页面标题或带有描述的标题。它支持设置描述信息、上边距和下边距，并提供点击事件。

使用方式

<Title
:desc="desc"
:top="top"
:bottom="bottom"
@click="handleClick"
>

标题内容

<template #content>
描述内容

<template>
  <Title :desc="desc" :top="top" :bottom="bottom" @click="handleClick">
    <!-- 标题内容插槽 -->
    标题内容
    <!-- 描述内容插槽 -->
    <template #content> 描述内容 </template>
  </Title>
</template>

<script setup>
import { ref } from 'vue'
import Title from '@/components/Title/Title.tsx'

const desc = ref('') // 描述信息
const top = ref(0) // 上边距
const bottom = ref(0) // 下边距

const handleClick = () => {
  // 点击事件处理逻辑
}
</script>

Props

Events

插槽

这样的文档形式清晰地展示了组件的属性、事件和插槽，同时使用了 setup 函数管理组件的状态和逻辑，使代码更加简洁和可维护。