vue使用slot封装navBar

酒渣2023-11-30 17:43

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>