/*! For license information please see 6446.675b772f.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["6446"],{60485:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Overlay \u906E\u7F69\u5C42

\n

\u4ECB\u7ECD

\n

\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

\n

\u5F15\u5165

\n

\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

\n
import { createApp } from 'vue';\nimport { Overlay } from 'vant';\n\nconst app = createApp();\napp.use(Overlay);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n
<van-button type="primary" text="\u663E\u793A\u906E\u7F69\u5C42" @click="show = true" />\n<van-overlay :show="show" @click="show = false" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const show = ref(false);\n    return { show };\n  },\n};\n
\n

\u5D4C\u5165\u5185\u5BB9

\n

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

\n
<van-overlay :show="show" @click="show = false">\n  <div class="wrapper" @click.stop>\n    <div class="block" />\n  </div>\n</van-overlay>\n\n<style>\n  .wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n  }\n\n  .block {\n    width: 120px;\n    height: 120px;\n    background-color: #fff;\n  }\n</style>\n
\n

\u8BBE\u7F6E z-index

\n

Overlay \u7EC4\u4EF6\u9ED8\u8BA4\u7684 z-index \u5C42\u7EA7\u4E3A 1\uFF0C\u4F60\u53EF\u4EE5\u901A\u8FC7 z-index \u5C5E\u6027\u8BBE\u7F6E\u5B83\u7684 z-index \u5C42\u7EA7\u3002

\n
<van-overlay z-index="100" />\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\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\u662F\u5426\u5728\u663E\u793A\u65F6\u624D\u6E32\u67D3\u8282\u70B9booleantrue
\n

Events

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

Slots

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

\u7C7B\u578B\u5B9A\u4E49

\n

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

\n
import type { OverlayProps } from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-overlay-z-index1-
--van-overlay-backgroundrgba(0, 0, 0, 0.7)-
\n
'},null,8,l))}}}]);