el-aside

<template>
  <!-- 使用语义化标签 <aside> 定义侧边栏区域，提升页面可访问性与SEO友好性 -->
  <!-- 应用基础类名 el-aside，作为外部样式挂载点，遵循BEM命名规范 -->
  <!-- 动态绑定内联样式 :style="{ width }"，将props传入的width值直接设置为元素的CSS width属性 -->
  <!-- 插槽 <slot></slot> 允许父组件向此容器注入任意内容，如导航菜单、工具面板等，增强复用性 -->
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>

<script>
// 导出Vue组件配置对象
export default {
  // 组件名称，用于Vue调试工具识别及错误追踪
  name: 'ElAside',
  // Element UI内部约定的组件标识符，供父级布局容器（如el-container）通过遍历$children识别子组件类型
  componentName: 'ElAside',
  // 接收外部传入的属性配置
  props: {
    // 宽度属性，控制侧边栏的尺寸
    width: {
      type: String,        // 要求传入字符串类型，支持带单位的CSS写法（如'200px'、'30%'）
      default: '300px'     // 默认宽度为300像素，确保未显式设置时仍能正常渲染
    }
  }
};
</script>