vant4/vue3封装navbar导航栏

只需两步即可实现navbar封装,跟着我走就得了,cv你该会吧!

封装的custNavbar.vue组件

javascript 复制代码
<template>
    <div class="nav-all">
        <van-nav-bar :title="props.title" left-arrow @click-left="goBack" class="navbar">
            <template #right>
                <van-icon :name="props.uname" size="18" />
            </template>
        </van-nav-bar>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 引入路由模块
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
    // 标题
    title: {
        type: String,
        required: true
    },
    // 图标
    uname: {
        type: String,
        required: true
    }
});

const goBack = () => {
    //   window.history.back();
    // 返回上一页
    router.back();
};
</script>

// 样式配置,不遮挡数据显示
<style lang="scss" scoped>
.nav-all {
    overflow: hidden;
    margin-bottom: 45px;

    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
    }
}
</style>

在使用的地方引入custNavbar.vue组件

javascript 复制代码
<template>
    <div class="artall">
        // 引入的custNavbar组件
        <custNavbar title="qwe" uname="search"></custNavbar>
        // 模拟的数据
        <p>qwe111111</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe</p>
        <p>qwe22222222222</p>
    </div>
</template>

<script setup>
// 引入位置,根据自己的组件位置引入即可
import custNavbar from '@/components/custNavbar/index.vue'

</script>

<style lang="scss" scoped></style>

效果呈现:

相关推荐
wusp1994几秒前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
Alice-YUE1 分钟前
【CSS学习笔记3】css特性
前端·css·笔记·html
bug_kada1 分钟前
告别页面卡顿!用DocumentFragment打造高性能DOM操作
前端
遂心_3 分钟前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_5 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
溯水流光7 分钟前
React 源码解析
前端
Aomnitrix8 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
光影少年10 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI14 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆14 分钟前
网络监控状态
前端