当前位置: 七九推 > IT编程>脚本编程>vue.js > 基于vue封装的header 头部组件

基于vue封装的header 头部组件

2022年06月13日 vue.js 我要评论
一,头部标题动态绑定二,头部返回统一处理三,头部布局 (左,中,右) (左,右)界面效果 父组件<template> <div class="profile"> <

一,头部标题动态绑定

二,头部返回统一处理

三,头部布局 (左,中,右) (左,右)

界面效果

   

 父组件

<template>
  <div class="profile">
    <v-header :imgsrc="imgurl" :title="titledec" :text="textdec"> </v-header>
  </div>
</template>

<script>
import vheader from "../components/header";
export default {
  name: "profile",
  components: {
    vheader,
  },
  data() {
    return {
      imgurl: "",
      titledec: "我",
      textdec: "忘记密码",
    };
  },
  created() {
    this.imgurl = require("../assets/img/back.png");
  },
};
</script>
<style lang="less">
.active {
  color: #115ffb;
}
</style>

子组件

<template>
  <div class="header">
    <!-- 返回箭头 -->
    <div class="header_arrow" @click="getback">
      <slot name="header_arrow">
        <img :src="imgsrc" alt="" slot="header_arrow" />
      </slot>
    </div>
    <!-- 中间标题问题 -->
    <div class="header_title">
      <slot name="header_title">
        <span>{{ title }}</span>
      </slot>
    </div>
    <!-- 文字与图标 -->
    <div class="header_icon">
      <slot name="header_icon">
        <span>{{ text }}</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "header",
  props: {
    title: {
      type: string,
    },
    imgsrc: {
      type: string,
    },
    text: {
      type: string,
    },
  },
  methods: {
    // 返回上一页
    getback() {
      this.$router.back(-1);
    },
  },
};
</script>
<style lang="less">
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
// 左中右布局, 直接给中间的盒子设置flex:1;
.header .header_title {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin-left: -5%;
  margin-right: -20%;
}
.header_arrow {
  width: 5%;
}
.header_arrow img {
  vertical-align: middle;
}
.header_icon {
  width: 20%;
  font-size: 14px;
  color: #115ffb;
}
</style>

  

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • IQ题 (含答案)

    IQ题 (含答案)

    1、选出不同类的一项:B A、蛇 B、大树 C、老虎 2、在下列分数中,选出不同类的一项: A 3/5 B 3/7 C... [阅读全文]
  • 
    [解决方案]未能加载文件或程序集

    [解决方案]未能加载文件或程序集

    做项目遇到这个问题: 未能加载文件或程序集“mysql.data, version=6.8.7.0, culture=neutral,publickeytoke... [阅读全文]
  • 
    Vue学习之路第四篇:v-html指令

    Vue学习之路第四篇:v-html指令

    上一篇我们讲解了两种方式,把vue对象的数据展示在页面上:1、插值表达式2、v-text指令但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定... [阅读全文]
  • 
    VUE-002-前端分页(el-pagination)展示数据

    VUE-002-前端分页(el-pagination)展示数据

    在web开发过程中,通常使用表格展示数据,在数据较多时采用分页的方式展示给用户。分页方式有前端假分页和后端分页两种实现方式,此文仅记录前端假分页实现方式。第一步... [阅读全文]
  • 
    Vue组件的渲染更新原理解析

    Vue组件的渲染更新原理解析

    本版本是对于vue2.x的总结,未来等学习了vue3,再完善对比一波!然后就是说,我们这里主要介绍原理部分,所谓二八原则,我们一切都从最重要的说起吧!一切从这张... [阅读全文]
  • Numpy:数组对象(Ndarray)的属性

    Numpy:数组对象(Ndarray)的属性

    文章目录 数组的属性内存布局属性数据类型属性其他属性 数组的属性 数组属性反映了数组本身固有的信息。通常,通过其属性访问数组允许您获取或者设置... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  七九推 保留所有权利. 粤ICP备17035492号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com