文章目录
背景介绍
uniapp 项目: 使用了uview框架 1.x版本
其中对于组件 u-navbar , 想要进行二次简单封装,把一些固定样式/固定配置等预写好, 同时对默认的返回按钮做一层前置拦截,方便后续扩展.
实现的效果
封装的组件为: navBar
<navBar :title="pageTitle" :isBack="true" :navbarHeight.sync="navbarHeight" :customBack="abc" ></navBar>
这其中, 返回的点击事件我们要自定义的话, 可以通过:customBack
属性来传递 function , 如此处的 abc
而在 navbar
组件内部:
<template>
<u-navbar ref='navbarex' id="nmyui" class="navbar" :is-back="isBack" :custom-back="customBackBefore" :title="title" :title-bold="true" title-color="#fff"
:title-width="titleWidth" back-icon-color="#fff" :is-fixed="fixed" :border-bottom="border" title-size="36" :background=