vue使用slot封装navBar

vue使用slot封装navBar

1、创建navBar.vue文件

html 复制代码
<template>
  <div>
      <div class="headerBar">
          <div>
              <div v-if="showLeft" class="left">
                  <div v-if="leftText">{{ leftText }}</div>
                  <slot name="left" v-else ></slot>
              </div>
          </div>
          <div class="title">
              <div v-if="title">{{ title }}</div>
              <slot name="title" v-else></slot>
          </div>
          <div>
              <div v-if="showRight" class="right">
                  <div v-if="rightText"> {{ rightText }} </div>
                  <slot name="right" v-else ></slot>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "index",
    props: {
        // 标题
        title: {
            type: String,
            default: '',
        },
        // 左侧显示内容
        leftText: {
            type: String,
            default: '',
        },
        // 是否显示左侧内容
        showLeft: {
            type: Boolean,
            default: true,
        },
        // 右侧内容
        rightText: {
            type: String,
            default: '',
        },
        // 是否右侧内容
        showRight: {
            type: Boolean,
            default: true,
        },
    }
}
</script>

<style scoped lang="scss">
.headerBar{
  background: #4B9EFC;
  color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    box-sizing: border-box;

    .left{
        cursor: pointer;
        padding: 10px;
        box-sizing: border-box;
    }

    .right{
        cursor: pointer;
        padding: 10px;
        box-sizing: border-box;
    }
}
</style>

2、在页面使用页面中引入并使用

html 复制代码
<template>
  <div>
      <header-bar title="" leftText="<" right-text="我是右侧">
<!--          <template #left>
              <el-button>我是个按钮</el-button>
          </template>-->

          <template #title>
              <el-input></el-input>
          </template>

<!--          <template #right>
              <el-input></el-input>
          </template>-->
      </header-bar>
  </div>
</template>

<script>
import HeaderBar from './components/headerBar/index.vue'
export default {
    name: "index",
    components: {
        HeaderBar,
    }
}
</script>

<style scoped>

</style>
相关推荐
m0_748233644 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟12 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386313 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596014 分钟前
前端代理,解决跨域问题讲解
前端
quitv19 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238127 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星29 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http