import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const d={class:"van-doc-markdown-body"},l=n(`

NavBar \u5BFC\u822A\u680F

\u4ECB\u7ECD

\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

import { createApp } from 'vue';
import { NavBar } from 'vant';

const app = createApp();
app.use(NavBar);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u901A\u8FC7 title \u5C5E\u6027\u8BBE\u7F6E\u5BFC\u822A\u680F\u6807\u9898\u3002

<van-nav-bar title="\u6807\u9898" />

\u8FD4\u56DE\u4E0A\u7EA7

\u5728\u5BFC\u822A\u680F\u5B9E\u73B0\u8FD4\u56DE\u4E0A\u7EA7\u529F\u80FD\u3002

<van-nav-bar
  title="\u6807\u9898"
  left-text="\u8FD4\u56DE"
  left-arrow
  @click-left="onClickLeft"
/>

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

\u53F3\u4FA7\u6309\u94AE

\u5728\u5BFC\u822A\u680F\u53F3\u4FA7\u6DFB\u52A0\u53EF\u70B9\u51FB\u7684\u6309\u94AE\u3002

<van-nav-bar
  title="\u6807\u9898"
  left-text="\u8FD4\u56DE"
  right-text="\u6309\u94AE"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { Toast } from 'vant';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast('\u6309\u94AE');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

\u4F7F\u7528\u63D2\u69FD

\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u81EA\u5B9A\u4E49\u5BFC\u822A\u680F\u4E24\u4FA7\u7684\u5185\u5BB9\u3002

<van-nav-bar title="\u6807\u9898" left-text="\u8FD4\u56DE" left-arrow>
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u6807\u9898string''
left-text\u5DE6\u4FA7\u6587\u6848string''
right-text\u53F3\u4FA7\u6587\u6848string''
left-arrow\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934booleanfalse
border\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846booleantrue
fixed\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8booleanfalse
placeholder\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20booleanfalse
z-index\u5BFC\u822A\u680F z-indexnumber | string1
safe-area-inset-top\u662F\u5426\u5F00\u542F\u9876\u90E8\u5B89\u5168\u533A\u9002\u914Dbooleanfalse

Slots

\u540D\u79F0\u8BF4\u660E
title\u81EA\u5B9A\u4E49\u6807\u9898
left\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9
right\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click-left\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1event: MouseEvent
click-right\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1event: MouseEvent

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type { NavBarProps } from 'vant';

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-nav-bar-height46px-
--van-nav-bar-background-colorvar(--van-background-color-light)-
--van-nav-bar-arrow-size16px-
--van-nav-bar-icon-colorvar(--van-primary-color)-
--van-nav-bar-text-colorvar(--van-primary-color)-
--van-nav-bar-title-font-sizevar(--van-font-size-lg)-
--van-nav-bar-title-text-colorvar(--van-text-color)-
--van-nav-bar-z-index1-
`,15),e=[l],i={__name:"README.zh-CN",setup(p,{expose:s}){return s({frontmatter:{}}),(c,o)=>(a(),t("div",d,e))}};export{i as default};