vue使用slot封装navBar

1、创建navBar.vue文件

<template>
  <div>
      <div class="headerBar">
          <div&gt;
              <div v-if="showLeft" class="left"&gt;
                  <div v-if="leftText"&gt;{{ leftText }}</div&gt;
                  <slot name="left" v-else &gt;</slot&gt;
              </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、在页面使用页面引入并使用

<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>

原文地址:https://blog.csdn.net/weixin_40923558/article/details/134644936

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_13003.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注