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>

效果呈现:

相关推荐
八月ouc11 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉14 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
Glommer17 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&20 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈22 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript