vue制作顶部栏组件

最新推荐文章于 2024-03-13 00:45:03 发布

Daniel李华

最新推荐文章于 2024-03-13 00:45:03 发布

阅读量361

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44289771/article/details/119895672

版权

这篇博客介绍了如何在Vue.js应用中进行组件化开发，详细步骤包括创建DetailNavBar组件来展示页面顶部标题栏，使用预封装的NavBar组件，并通过数据绑定和方法处理点击事件。内容涵盖了模板、样式和组件间的交互，展示了如何实现标题栏的左右和中间内容，并提供了详细的代码示例和最终效果图。

摘要由CSDN通过智能技术生成

**制作顶部标题栏 **

1.创建Detail标题栏显示页面
在这里插入图片描述

<template>
  <div>
    <detail-nav-bar></detail-nav-bar>//导入顶部栏组件NavBar
  </div>
</template>

<script>
import DetailNavBar from "@/views/detail/childComps/DetailNavBar";
export default {
  name: "Detail",
  components: {DetailNavBar},
}
</script>

<style scoped>

</style>

2.创建顶部栏组件DetailNavBar

<template>
<div>
  <nav-bar>
    <div slot="left" class="left" @click="backClick">
    <img src="@/assets/img/common/back.svg">
    </div>
    <div slot="center" class="detail">
      <div v-for="(item,index) in titles" :key="index"
           class="detail-item"
           @click="detailClick(index)"
           :class="{active:index===currentIndex}">{{item}}</div>
    </div>
  </nav-bar>
</div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
export default {
  name: "DetailNavBar",
  components: {NavBar},
  data(){
    return{
      titles:['商品','参数','评论','推荐'],
      currentIndex:0
    }
  },
  methods:{
    detailClick(index){
      this.currentIndex=index
    },
    backClick(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.detail{
  display: flex;//布局
}
.detail-item{
  flex: 1;//每个item均等分
  font-size: 13px;
}
.left img{
  margin-top: 13px;
}
.active{
  color: var(--color-tint)//导入已经设置好的颜色
}
</style>

3.扩展NavBar已经提前封装好
在这里插入图片描述

<template>
<div class="nav-bar">
  <div class="left"><slot name="left"></slot></div>
  <div class="center"><slot name="center"></slot></div>
  <div class="right"><slot name="right"></slot></div>
</div>
</template>

<script>
export default {
  name: "NavBar"
}
</script>

<style scoped>
.nav-bar{
  display: flex;
  height: 44px;//顶部栏高度
  line-height: 44px;//文字行距
  text-align: center;//文本居中
  box-shadow: 0 1px 1px rgba(100,100,100,0.1);//阴影rgba颜色及深度
}
.left,.right{
  width: 60px;
}
.center{
  flex: 1;
}
</style>

4.效果图
在这里插入图片描述