vue.js项目实战运用篇之抖音视频APP-第十三节： Header组件功能

Posted 2021-05-29 enjsky.G

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十三节： Header组件功能

功能分析

在我们编辑资料、消息中都有也顶部标题，为了提高代码复用性，将其封装成一个组件，在需要使用的位置，引入组件即可。

组件实现

1.组件结构，在组件文件夹common/components中闯将header文件夹，新建Header.vue文件，如下：

2.组件布局
组件中包含左侧关闭按钮，标题，右侧文本内容等。

<template>
    <div class="user-header">
     <div class="back" v-if="hasLeft">
       <span class="iconfont icon-guanbi" @click="$router.back()"></span>
     </div>
      <div class="">
        <span style="font-size: 15px">{{title}}</span>
      </div>
      <div class="right" v-if="hasRight=='true'">
        <span class="">{{rightTxt}}</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: {
      type: String,
      required: true,
    },
    rightTxt: {
      type: String,
      required: false,
    },
    hasLeft: {
      type: Boolean,
    },
    hasRight: {
      type: String,
    },
  },
};
</script>

<style lang="less" scoped>
  .user-header {
    height: 48px;
    width: 100%;
    line-height: 48px;
    display: flex;
    justify-content: center;
    // border-bottom: 1px solid #292831;
    // background: #101821;
    color: #eeeeee;
    position: relative;
    .back {
      position: absolute;
      left: 10px;
    }
    .right {
      position: absolute;
      right: 10px;
    }
  }
</style>

【温馨提示】这里使用的props接收数据。
3.引用组件实例
这里举一个例子，实现组件引用，在编辑资料中实现。
1）引用

import Header from '../../common/components/header/Header.vue';

2）初始化组件

export default {
  name: 'Edit',
  components: {
    Header,
  },

};

3）使用 组件

<template>
  <div class="edit">
    <Header hasLeft="true" title="编辑资料"></Header>
  </div>
</template>

【温馨提示】hasLeft属性为文本标题位置，title属性为文本标题内容。
4）效果

结束语

本章节主要介绍了Header头部组件封装及引用等相关内容，若有疑问或不足之处，欢迎留言讨论。

项目仓库

项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习讨论，共同完善本项目。
项目地址：GitHub

---

上一篇： 用户信息页面功能
下一篇：消息页面功能