系统Logo组件 (SystemLogo)

SystemLogo 是一个用于显示系统 Logo 和标题的 Vue 组件。它允许用户通过传递属性来控制是否显示标题，并且可以通过事件监听器响应标题显示状态的变化。该组件支持插槽（slot）内容，可以自定义 Logo 图像和标题文本。

使用示例

点我查看代码

<template>
  <div class="system-logo-container">
    <system-logo
      :showTitle="isTitleVisible"
      @onShowTitleChange="handleTitleChange"
    >
      <template #logoImg>
        <img src="/path/to/logo.png" alt="Custom Logo" />
      </template>
      <template v-if="isTitleVisible"># My Awesome Project</template>
    </system-logo>
  </div>
</template>
<style scope>
.system-logo-container {
  height: 60px;
  width: 200px;
}
</style>
<script setup lang="ts">
import { ref } from "vue";

const isTitleVisible = ref(true);

const handleTitleChange = (collapse: boolean) => {
  console.log("Title visibility changed:", collapse);
};
</script>

注意事项

• 如果你想要动态改变标题的显示状态，你可以调用组件暴露出来的 showTitleChange 方法。
• 请确保在使用组件时正确设置了 showTitle 属性，以避免不必要的重新渲染。

属性 (Props)

属性名	类型	默认值	描述
showTitle	Boolean	true	控制是否显示标题，默认为显示。
systemLogoWidth	String	-	设置 Logo 的宽度，默认样式未指定。
systemLogoCollapseWidth	String	-	当侧边栏收起时 Logo 的宽度，默认样式未指定。

事件 (Events)

事件名称	参数	描述
onShowTitleChange	collapse: Boolean	当 showTitle 属性变化时触发，参数为当前标题显示状态。

插槽 (Slots)

插槽名称	描述
logoImg	自定义 Logo 图像的内容。
默认插槽	如果提供了默认插槽内容，则用作标题文本。

方法 (Methods)

方法名称	参数	描述
showTitleChange	value: Boolean	手动改变标题显示状态的方法，接收布尔值作为参数并更新内部状态及触发事件。