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>

效果呈现:

相关推荐
龙在天1 小时前
我是前端,scss颜色函数你用过吗?
前端
Mapmost1 小时前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
幻灵尔依2 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子2 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳2 小时前
CSS 基础概念
前端·css·css3
前端小巷子2 小时前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar2 小时前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫22 小时前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun2 小时前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙2 小时前
React Hooks 详解
前端·javascript