封装组件的案例-MyHeader组件

封装组件的案例

1. 案例效果

封装要求：

    ① 允许用户自定义 title 标题

    ② 允许用户自定义 bgcolor 背景色

    ③ 允许用户自定义 color 文本颜色

    ④ MyHeader 组件需要在页面顶部进行 fixed 固定定位，且 z-index 等于 999

App.vue

<!-- <template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script> -->
<template>
  <div class="app-container">
    <my-header :title="name" bgcolor="#1E90FF" color="#fff"></my-header>
  </div>
</template>
 
<script>
import MyHeader from './components/MyHeader.vue'
 
export default {
  name: 'MyApp',
  data() {
    return{
      name:'MyHeader 组件',
      isitalic:true
    }
  },
  components: {
    MyHeader,
  },
}
</script>
<style lang="less" scoped>
.app-container {
  margin-top: 45px;
  .thin{                
    font-weight: 200;      //字体变细
  }
  .italic{ 
    font-style: italic;   //倾斜字体
  }
}
</style>

 MyHeader.vue

<template>
    <div class="header-container" :style="{ backgroundColor: bgcolor, color: color }">
      {{title || 'MyHeader 组件'}}
    </div>
  </template>
   
  <script>
  export default {
    name: 'MyHeader',
    props: ['title', 'bgcolor', 'color']
  }
  </script>
   
  <style lang="less" scoped>
  .header-container {
    height: 45px;
    background-color: #1E90FF;
    text-align: center;
    line-height: 45px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  </style>