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

Overlay \u906E\u7F69\u5C42

\u4ECB\u7ECD

\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\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 { Overlay } from 'vant';

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<van-button type="primary" text="\u663E\u793A\u906E\u7F69\u5C42" @click="show = true" />
<van-overlay :show="show" @click="show = false" />

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};

\u5D4C\u5165\u5185\u5BB9

\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002

<van-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</van-overlay>

<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
show\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42booleanfalse
z-indexz-index \u5C42\u7EA7number | string1
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2\uFF0C\u8BBE\u7F6E\u4E3A 0 \u53EF\u4EE5\u7981\u7528\u52A8\u753Bnumber | string0.3
class-name\u81EA\u5B9A\u4E49\u7C7B\u540Dstring-
custom-style\u81EA\u5B9A\u4E49\u6837\u5F0Fobject-
lock-scroll\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8booleantrue
lazy-render v3.4.2\u662F\u5426\u5728\u663E\u793A\u65F6\u624D\u6E32\u67D3\u8282\u70B9booleantrue

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB\u65F6\u89E6\u53D1event: MouseEvent

Slots

\u540D\u79F0\u8BF4\u660E
default\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9

\u7C7B\u578B\u5B9A\u4E49

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

import type { OverlayProps } 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-overlay-z-index1-
--van-overlay-background-colorrgba(0, 0, 0, 0.7)-
`,13),d=[e],i={__name:"README.zh-CN",setup(p,{expose:s}){return s({frontmatter:{}}),(r,h)=>(a(),t("div",l,d))}};export{i as default};