W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
為頁面提供導航功能,常用于頁面頂部。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { NavBar } from 'vant';
const app = createApp();
app.use(NavBar);
通過 ?title
? 屬性設(shè)置導航欄標題。
<van-nav-bar title="標題" />
在導航欄實現(xiàn)返回上級功能。
<van-nav-bar
title="標題"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
export default {
setup() {
const onClickLeft = () => history.back();
return {
onClickLeft,
};
},
};
在導航欄右側(cè)添加可點擊的按鈕。
<van-nav-bar
title="標題"
left-text="返回"
right-text="按鈕"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
import { showToast } from 'vant';
export default {
setup() {
const onClickLeft = () => history.back();
const onClickRight = () => showToast('按鈕');
return {
onClickLeft,
onClickRight,
};
},
};
可以通過插槽自定義導航欄兩側(cè)的內(nèi)容。
<van-nav-bar title="標題" left-text="返回" left-arrow>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
title | 標題 | string | ''
|
left-text | 左側(cè)文案 | string | ''
|
right-text | 右側(cè)文案 | string | ''
|
left-arrow | 是否顯示左側(cè)箭頭 | boolean | false
|
border | 是否顯示下邊框 | boolean | true
|
fixed | 是否固定在頂部 | boolean | false
|
placeholder | 固定在頂部時,是否在標簽位置生成一個等高的占位元素 | boolean | false
|
z-index | 導航欄 z-index | number | string | 1
|
safe-area-inset-top | 是否開啟頂部安全區(qū)適配 | boolean | false
|
clickable | 是否開啟兩側(cè)按鈕的點擊反饋 | boolean | true
|
名稱 | 說明 |
---|---|
title | 自定義標題 |
left | 自定義左側(cè)區(qū)域內(nèi)容 |
right | 自定義右側(cè)區(qū)域內(nèi)容 |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
click-left | 點擊左側(cè)按鈕時觸發(fā) | event: MouseEvent |
click-right | 點擊右側(cè)按鈕時觸發(fā) | event: MouseEvent |
組件導出以下類型定義:
import type { NavBarProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認值 | 描述 |
---|---|---|
--van-nav-bar-height | 46px | - |
--van-nav-bar-background | var(--van-background-2) | - |
--van-nav-bar-arrow-size | 16px | - |
--van-nav-bar-icon-color | var(--van-primary-color) | - |
--van-nav-bar-text-color | var(--van-primary-color) | - |
--van-nav-bar-title-font-size | var(--van-font-size-lg) | - |
--van-nav-bar-title-text-color | var(--van-text-color) | - |
--van-nav-bar-z-index | 1 | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: