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>

效果呈现:

相关推荐
csdn_aspnet7 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel30 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE30 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子34 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛2 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟2 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序