1. ケース効果
梱包要件:
①ユーザーがタイトルタイトルをカスタマイズできるようにする
② ユーザーがbgcolorの背景色をカスタマイズできるようにする
③ユーザーが文字色をカスタマイズできるようにする
④MyHeader コンポーネントはページの上部に固定する必要があり、z-indexは 999 に等しい
使用例は次のとおりです。
<template>
<div class="app-container">
<h1>App根组件</h1>
<hr>
<my-header title="这是一个标题" bgcolor="#000" color="#fff"></my-header>
</div>
</template>
<script>
import MyHeader from './02MyHeader/MyHeader.vue'
export default {
name:'MyApp',
components:{
'my-header':MyHeader
}
}
</script>
<style lang="less" scoped>
.app-container{
margin-top: 45px;
}
</style>
<template>
<div>
<h1 class="header-container" :style="{backgroundColor:bgcolor,color:color}">{
{ title||'Header组件' }}</h1>
</div>
</template>
<script>
export default {
name:'MyHeader',
props:['title','bgcolor','color']
}
</script>
<style lang="less" scoped>
.header-container{
height: 45px;
background-color: pink;
text-align: center;
line-height: 45px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
</style>