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>

效果呈现:

相关推荐
楚轩努力变强34 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端36 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python44 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器