ClassicHeader
<template>
<header class="classic">
<div class="left">
<slot name="left"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</header>
</template>
<script>
export default {
name: 'ClassicHeader',
}
</script>
<style scoped>
header.classic {
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f9f9fb;
border-bottom: 1px solid #dcdfe6;
}
header.classic .left {
margin-left: 10px;
font-size: 14px;
font-weight: 400;
color: #606266;
user-select: none;
}
header.classic .right {
margin-right: 10px;
display: flex;
}
</style>这是一个名为 "ClassicHeader" 的 Vue 单文件组件 (SFC)。这个组件包括三个部分：模板（template）、脚本（script）和样式（style）。以下是组件的主要功能：
-
模板（template）部分：
- 一个带有 "classic" 类名的
header元素。 - 该
header元素包含两个子div，分别具有 "left" 和 "right" 类名。 - 在这两个子
div中，分别插入名为 "left" 和 "right" 的插槽（slot），以便在使用组件时可以在父组件中传入自定义内容。
- 一个带有 "classic" 类名的
-
脚本（script）部分：
- 定义并导出一个名为 "ClassicHeader" 的 Vue 组件。
-
样式（style）部分：
- 使用 scoped 属性，这样定义的样式仅应用于当前组件，不会影响其他组件。
- 为
header.classic元素设置高度、布局、背景颜色和底部边框样式。 - 为
header.classic .left设置左边距、字体大小、字体权重、颜色和禁止用户选择样式。 - 为
header.classic .right设置右边距和布局样式。
简言之，ClassicHeader 是一个 Vue 组件，它定义了一个具有两个插槽的页眉，可用于在父组件中传入自定义的左侧和右侧内容。组件的样式主要针对页眉本身以及左右两侧内容的排列和外观。
SubTitle
<template>
<div class="subTitle">
<span><slot></slot></span>
</div>
</template>
<script>
export default {
name: 'SubTitle',
}
</script>
<style scoped>
.subTitle {
/* background-color: yellowgreen; */
padding-bottom: 10px;
}
.subTitle span {
font-family: 'Courier New', Courier, monospace;
user-select: none;
letter-spacing: 1px;
}
</style>这是一个名为 "SubTitle" 的 Vue 单文件组件 (SFC)。这个组件包括三个部分：模板（template）、脚本（script）和样式（style）。以下是组件的主要功能：
-
模板（template）部分：
- 一个带有 "subTitle" 类名的
div元素。 - 在这个
div元素中，插入一个默认插槽（slot），以便在使用组件时可以在父组件中传入自定义内容。
- 一个带有 "subTitle" 类名的
-
脚本（script）部分：
- 定义并导出一个名为 "SubTitle" 的 Vue 组件。
-
样式（style）部分：
- 使用 scoped 属性，这样定义的样式仅应用于当前组件，不会影响其他组件。
- 为
.subTitle元素设置内部底部填充。 - 为
.subTitle span设置字体、禁止用户选择样式和字母间距样式。
简言之，SubTitle 是一个 Vue 组件，它定义了一个带有默认插槽的副标题，可以在父组件中传入自定义内容。组件的样式主要针对副标题本身的外观和间距。