persagy-vant 0.0.28 → 0.0.29

package/es/object-select/ObjectSelect.tsx

@@ -0,0 +1,333 @@
+import {
+  computed,
+  defineComponent,
+  ref,
+  watch,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue';
+import { createNamespace, extend, makeArrayProp, makeStringProp, type Numeric } from '../utils';
+import { ActionSheet } from '../action-sheet';
+import { BlueMarkHeader } from '../blue-mark';
+import { BottomActionBar } from '../bottom-action-bar';
+import { Cell } from '../cell';
+import { FilterTag } from '../filter-tag';
+import { Icon } from '../icon';
+import { NavBar } from '../nav-bar';
+import { Search } from '../search';
+import { Tab } from '../tab';
+import { Tabs } from '../tabs';
+import { TreeSelect, type TreeSelectItem } from '../tree-select';
+import type { ObjectSelectSpecialty } from './types';
+
+const [name, bem] = createNamespace('object-select');
+
+const spaceItems: TreeSelectItem[] = [
+  { id: 'shenzhen-hq', text: '深圳迈瑞医疗总部大楼' },
+  { id: 'building-a', text: 'A座', children: [
+        { id: 'floor-b3', text: 'B3', children: [
+          { id: 'power-room', text: '变配电室', selectable: false, children: [
+            { id: 'substation-15', text: 'B3_办公2#变电所_15', children: [
+              { id: 'transformer', text: '变压器', selectable: false, children: [
+                { id: 'transformer-1', text: 'B3_变压器_1#AH4B3' },
+                { id: 'transformer-2', text: 'B3_变压器_1#AH8' },
+                { id: 'transformer-3', text: 'B3_变压器_1#AH12' },
+              ] },
+              { id: 'high-voltage', text: '高压计量柜', selectable: false, children: [
+                { id: 'metering-cabinet-1', text: 'B3_高压计量柜_1#' },
+                { id: 'metering-cabinet-2', text: 'B3_高压计量柜_2#' },
+              ] },
+            ] },
+            { id: 'chiller-room', text: 'B3_制冷机房_15', children: [
+              { id: 'chiller-unit-1', text: 'B3_冷水机组_1#' },
+              { id: 'chiller-pump-1', text: 'B3_冷冻水泵_1#' },
+            ] },
+          ] },
+        ] },
+  ] },
+  { id: 'building-b', text: 'B座', children: [
+        { id: 'building-b-b1', text: 'B1层', children: [
+          { id: 'building-b-b1-room', text: 'B座_B1层配电间' },
+          { id: 'building-b-b1-storage', text: 'B座_B1层设备库房' },
+        ] },
+        { id: 'building-b-1f', text: '1层', children: [
+          { id: 'building-b-1f-lobby', text: 'B座_1层大厅' },
+          { id: 'building-b-1f-office', text: 'B座_1层物业办公室' },
+        ] },
+        { id: 'building-b-2f', text: '2层', children: [
+          { id: 'building-b-2f-room', text: 'B座_2层设备间' },
+        ] },
+  ] },
+  { id: 'building-c', text: 'C座', children: [
+        { id: 'building-c-b1', text: 'B1层', children: [
+          { id: 'building-c-b1-pump', text: 'C座_B1层水泵房' },
+          { id: 'building-c-b1-room', text: 'C座_B1层设备间' },
+        ] },
+        { id: 'building-c-1f', text: '1层', children: [
+          { id: 'building-c-1f-lobby', text: 'C座_1层大厅' },
+          { id: 'building-c-1f-security', text: 'C座_1层安防值班室' },
+        ] },
+        { id: 'building-c-3f', text: '3层', children: [
+          { id: 'building-c-3f-room', text: 'C座_3层空调机房' },
+        ] },
+  ] },
+  { id: 'building-d', text: 'D座', children: [
+        { id: 'building-d-1f', text: '1层', children: [
+          { id: 'building-d-1f-lobby', text: 'D座_1层大厅' },
+          { id: 'building-d-1f-fire', text: 'D座_1层消防控制室' },
+        ] },
+        { id: 'building-d-2f', text: '2层', children: [
+          { id: 'building-d-2f-room', text: 'D座_2层弱电间' },
+          { id: 'building-d-2f-office', text: 'D座_2层办公区' },
+        ] },
+        { id: 'building-d-5f', text: '5层', children: [
+          { id: 'building-d-5f-room', text: 'D座_5层设备间' },
+        ] },
+  ] },
+];
+
+const specialties: ObjectSelectSpecialty[] = [
+  {
+    id: 'strong-electricity', name: '强电专业',
+    deviceItems: [
+      { id: 'high-voltage-device', text: '高压配电设备', selectable: false, children: [
+        { id: 'high-voltage-cabinet-1', text: 'B3_高压进线柜_1#AH2' },
+        { id: 'high-voltage-cabinet-4', text: 'B3_高压进线柜_4#AH9' },
+      ] },
+      { id: 'low-voltage-device', text: '低压变配电设备', selectable: false, children: [
+        { id: 'low-voltage-cabinet-1', text: 'B3_低压进线柜_1#AL1' },
+        { id: 'low-voltage-cabinet-2', text: 'B3_低压馈线柜_2#AL2' },
+      ] },
+      { id: 'generator-device', text: '自备发电设备', selectable: false, children: [
+        { id: 'generator-1', text: 'B3_柴油发电机组_1#' },
+        { id: 'generator-control-1', text: 'B3_发电机控制柜_1#' },
+      ] },
+      { id: 'transformer-accessory', text: '变配电辅助设备', selectable: false, children: [
+        { id: 'transformer-monitor-1', text: 'B3_变压器监测装置_1#' },
+        { id: 'power-compensation-1', text: 'B3_无功补偿柜_1#' },
+      ] },
+      { id: 'other-strong-device', text: '其他强电专业设备', selectable: false, children: [
+        { id: 'lighting-cabinet-1', text: 'B3_照明配电箱_1#' },
+        { id: 'power-cabinet-1', text: 'B3_动力配电柜_1#' },
+      ] },
+    ],
+    systemItems: [
+      { id: 'high-voltage-system', text: '高压配电系统' },
+      { id: 'low-voltage-system', text: '末端配电系统' },
+      { id: 'transformer-system', text: '变配电系统' },
+      { id: 'ups-system', text: '不间断电源系统' },
+      { id: 'other-strong-system', text: '其他强电专业系统' },
+    ],
+  },
+  {
+    id: 'air-conditioning', name: '空调专业',
+    deviceItems: [
+      { id: 'air-conditioning-unit', text: '空调机组', selectable: false, children: [
+        { id: 'air-unit-1', text: 'B3_组合式空调机组_1#' },
+        { id: 'air-unit-2', text: 'B3_新风空调机组_2#' },
+      ] },
+      { id: 'cooling-device', text: '制冷设备', selectable: false, children: [
+        { id: 'chiller-1', text: 'B3_冷水机组_1#' },
+        { id: 'cooling-tower-1', text: 'B3_冷却塔_1#' },
+      ] },
+      { id: 'air-water-device', text: '空调水设备', selectable: false, children: [
+        { id: 'chilled-water-pump-1', text: 'B3_冷冻水泵_1#' },
+        { id: 'cooling-water-pump-1', text: 'B3_冷却水泵_1#' },
+      ] },
+    ],
+    systemItems: [{ id: 'air-system', text: '空调水系统' }],
+  },
+  {
+    id: 'water-supply', name: '给排水专业',
+    deviceItems: [
+      { id: 'water-supply-device', text: '给水设备', selectable: false, children: [
+        { id: 'water-pump-1', text: 'B3_生活给水泵_1#' },
+        { id: 'water-tank-1', text: 'B3_生活水箱_1#' },
+      ] },
+      { id: 'drainage-device', text: '排水设备', selectable: false, children: [
+        { id: 'drainage-pump-1', text: 'B3_污水提升泵_1#' },
+        { id: 'drainage-well-1', text: 'B3_集水井液位装置_1#' },
+      ] },
+      { id: 'water-treatment-device', text: '水处理设备', selectable: false, children: [
+        { id: 'water-treatment-1', text: 'B3_软化水装置_1#' },
+        { id: 'water-filter-1', text: 'B3_前置过滤器_1#' },
+      ] },
+    ],
+    systemItems: [{ id: 'water-system', text: '给排水系统' }],
+  },
+  {
+    id: 'fire-control', name: '消防专业',
+    deviceItems: [
+      { id: 'fire-pump-device', text: '消防泵组', selectable: false, children: [
+        { id: 'fire-pump-1', text: 'B3_消火栓泵_1#' },
+        { id: 'sprinkler-pump-1', text: 'B3_喷淋泵_1#' },
+      ] },
+      { id: 'fire-alarm-device', text: '火灾报警设备', selectable: false, children: [
+        { id: 'fire-alarm-host-1', text: 'B3_火灾报警主机_1#' },
+        { id: 'fire-alarm-controller-1', text: 'B3_联动控制器_1#' },
+      ] },
+      { id: 'smoke-control-device', text: '防排烟设备', selectable: false, children: [
+        { id: 'smoke-fan-1', text: 'B3_排烟风机_1#' },
+        { id: 'smoke-valve-1', text: 'B3_排烟防火阀_1#' },
+      ] },
+    ],
+    systemItems: [{ id: 'fire-system', text: '消防系统' }],
+  },
+];
+
+const objectSelectProps = {
+  show: Boolean,
+  modelValue: makeArrayProp<Numeric>(),
+  title: makeStringProp('选择对象'),
+  confirmText: makeStringProp('下一步'),
+  spaceItems: { type: Array as PropType<TreeSelectItem[]>, default: () => spaceItems },
+  specialties: { type: Array as PropType<ObjectSelectSpecialty[]>, default: () => specialties },
+};
+
+export type ObjectSelectProps = ExtractPropTypes<typeof objectSelectProps>;
+
+const flattenItems = (items: TreeSelectItem[]): TreeSelectItem[] =>
+  items.flatMap((item) => [item, ...(item.children ? flattenItems(item.children) : [])]);
+
+export default defineComponent({
+  name,
+  props: objectSelectProps,
+  emits: ['update:show', 'update:modelValue', 'change', 'confirm'],
+  setup(props, { emit }) {
+    const view = ref(0);
+    const specialtyType = ref(0);
+    const expandedKeys = ref<Numeric[]>(['building-a', 'floor-b3', 'power-room', 'substation-15', 'transformer', 'high-voltage-device']);
+    const expandedSpecialties = ref<Record<string, boolean>>({ 'strong-electricity': true });
+    const expandedSelected = ref(false);
+    const searching = ref(false);
+    const keyword = ref('');
+    const reset = () => {
+      view.value = 0;
+      specialtyType.value = 0;
+      keyword.value = '';
+      searching.value = false;
+      expandedSelected.value = false;
+      expandedSpecialties.value = { 'strong-electricity': true };
+    };
+    watch(() => props.show, (show) => show && reset(), { immediate: true });
+
+    const selected = computed(() => props.modelValue);
+    const allItems = computed(() => flattenItems([
+      ...props.spaceItems,
+      ...props.specialties.flatMap((specialty) => [...specialty.deviceItems, ...specialty.systemItems]),
+    ]));
+    const selectedItems = computed(() => allItems.value.filter((item) => selected.value.includes(item.id)));
+    const searchResults = computed(() => {
+      const query = keyword.value.trim().toLowerCase();
+      if (!query) return [];
+      return allItems.value.filter((item) => item.text.toLowerCase().includes(query));
+    });
+    const renderHighlightedText = (text: string) => {
+      const query = keyword.value.trim();
+      if (!query) return text;
+
+      const lowerText = text.toLowerCase();
+      const lowerQuery = query.toLowerCase();
+      const parts: Array<string | JSX.Element> = [];
+      let start = 0;
+      let index = lowerText.indexOf(lowerQuery, start);
+
+      while (index !== -1) {
+        if (index > start) parts.push(text.slice(start, index));
+        parts.push(<span class={bem('keyword')}>{text.slice(index, index + query.length)}</span>);
+        start = index + query.length;
+        index = lowerText.indexOf(lowerQuery, start);
+      }
+
+      if (start < text.length) parts.push(text.slice(start));
+      return parts;
+    };
+    const update = (value: Numeric[]) => {
+      emit('update:modelValue', value);
+      emit('change', value);
+    };
+    const toggleSearchItem = (item: TreeSelectItem) => {
+      const exists = selected.value.includes(item.id);
+      if (exists && selected.value.length === 1) expandedSelected.value = false;
+      update(exists ? selected.value.filter((id) => id !== item.id) : [...selected.value, item.id]);
+    };
+    const removeSelected = (item: TreeSelectItem) => toggleSearchItem(item);
+    const clearSelected = () => {
+      update([]);
+      expandedSelected.value = false;
+    };
+    const renderTree = (items: TreeSelectItem[]) => (
+      <div class={bem('tree-card')}>
+        <TreeSelect
+          modelValue={selected.value}
+          expandedKeys={expandedKeys.value}
+          items={items}
+          multiple
+          showParentSelect
+          cascade={false}
+          onUpdate:modelValue={update}
+          onUpdate:expandedKeys={(value: Numeric[]) => { expandedKeys.value = value; }}
+        />
+      </div>
+    );
+    const renderSpecialty = (specialty: ObjectSelectSpecialty) => {
+      const expanded = expandedSpecialties.value[specialty.id] ?? false;
+      const items = specialtyType.value === 0 ? specialty.deviceItems : specialty.systemItems;
+      return (
+        <section class={bem('specialty')} key={specialty.id}>
+          <BlueMarkHeader
+            title={specialty.name}
+            expandable
+            modelValue={expanded}
+            onUpdate:modelValue={(value: boolean) => { expandedSpecialties.value = extend({}, expandedSpecialties.value, { [specialty.id]: value }); }}
+          />
+          {expanded && renderTree(items)}
+        </section>
+      );
+    };
+    const close = () => emit('update:show', false);
+    return () => (
+      <ActionSheet show={props.show} class={bem()} closeOnClickOverlay={false} onUpdate:show={(value: boolean) => emit('update:show', value)}>
+        {searching.value ? (
+          <Search v-model={keyword.value} class={bem('search')} shape="round" inputAlign="left" autofocus placeholder="搜索对象" onCancel={() => { searching.value = false; keyword.value = ''; }} showAction />
+        ) : (
+          <>
+            <NavBar title={props.title} class={bem('nav')}>
+              {{ left: () => <Icon name="cross" size="22" onClick={close} />, right: () => <><Icon name="search" size="22" onClick={() => { searching.value = true; }} /><Icon name="scan" size="22" class={bem('scan')} /></> }}
+            </NavBar>
+            <Tabs v-model:active={view.value} class={bem('view-tabs')} shrink>
+              <Tab title="空间视角" /><Tab title="专业视角" />
+            </Tabs>
+          </>
+        )}
+        <div class={bem('body')}>
+          {searching.value ? (
+            keyword.value && <div class={bem('tree-card', { search: true })}>{searchResults.value.map((item) => <Cell key={item.id} rightSelect={selected.value.includes(item.id)} selectType="checkbox" border clickable onClick={() => toggleSearchItem(item)} onUpdate:rightSelect={() => toggleSearchItem(item)}>{{ title: () => renderHighlightedText(item.text) }}</Cell>)}</div>
+          ) : view.value === 0 ? renderTree(props.spaceItems) : (
+            <>
+              <div class={bem('type-tabs')}>
+                <FilterTag selected={specialtyType.value === 0} onClick={() => { specialtyType.value = 0; }}>设备</FilterTag>
+                <FilterTag selected={specialtyType.value === 1} onClick={() => { specialtyType.value = 1; }}>系统</FilterTag>
+              </div>
+              {props.specialties.map(renderSpecialty)}
+            </>
+          )}
+        </div>
+        <div class={bem('footer')}>
+          <BottomActionBar fixed={false} moreIcon="passed" moreText={expandedSelected.value ? '收起已选' : '展开已选'} moreBadge={selected.value.length} moreBadgeMax={99} moreDisabled={!selected.value.length} confirmText={props.confirmText} confirmDisabled={!selected.value.length} onMore={() => { expandedSelected.value = !expandedSelected.value; }} onConfirm={() => { emit('confirm', selected.value); close(); }} />
+          {expandedSelected.value && (
+            <div class={bem('selected-panel')}>
+              <div class={bem('selected-header')}>
+                <button type="button" class={bem('clear')} onClick={clearSelected}>清空已选</button>
+                <button type="button" class={bem('collapse')} onClick={() => { expandedSelected.value = false; }}>收起已选<Icon name="arrow-down" /></button>
+              </div>
+              <div class={bem('selected-list')}>
+                {selectedItems.value.map((item) => <Cell key={item.id} title={item.text} class={bem('selected-item')} border={false}>{{ 'right-icon': () => <button type="button" class={bem('remove')} aria-label={`移除${item.text}`} onClick={() => removeSelected(item)}><Icon name="cross" /></button> }}</Cell>)}
+              </div>
+            </div>
+          )}
+        </div>
+      </ActionSheet>
+    );
+  },
+});

package/es/object-select/README.md

@@ -0,0 +1,3 @@
+# ObjectSelect
+
+Object selector built from the ActionSheet, Tabs, TreeSelect, Cell, and BottomActionBar components.

package/es/object-select/README.zh-CN.md

@@ -0,0 +1,43 @@
+# 对象选择 ObjectSelect
+
+### 介绍
+
+用于从空间或专业树中批量选择业务对象的底部面板。
+
+### 引入
+
+```js
+import { createApp } from 'vue';
+import { ObjectSelect } from 'vant';
+
+const app = createApp();
+app.use(ObjectSelect);
+```
+
+## 代码演示
+
+### 基础用法
+
+```vue
+<van-cell title="选择对象" is-link clickable @click="show = true" />
+<van-object-select v-model:show="show" v-model="selectedIds" />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 已选对象 ID | _Numeric[]_ | `[]` |
+| v-model:show | 是否展示面板 | _boolean_ | `false` |
+| space-items | 空间视角树数据 | _TreeSelectItem[]_ | `[]` |
+| specialties | 专业视角数据 | _ObjectSelectSpecialty[]_ | `[]` |
+| confirm-text | 底部确认按钮文本 | _string_ | `下一步` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选择结果变化时触发 | _ids: Numeric[]_ |
+| confirm | 点击下一步时触发 | _ids: Numeric[]_ |

package/es/object-select/index.ts

@@ -0,0 +1,14 @@
+import { withInstall } from '../utils';
+import _ObjectSelect from './ObjectSelect';
+
+export const ObjectSelect = withInstall(_ObjectSelect);
+export default ObjectSelect;
+
+export type { ObjectSelectProps } from './ObjectSelect';
+export type { ObjectSelectSpecialty, ObjectSelectTree, ObjectSelectValue } from './types';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanObjectSelect: typeof ObjectSelect;
+  }
+}

package/es/object-select/style/index.js

@@ -0,0 +1,28 @@
+import '../../style/base.css';
+import '../../badge/index.css';
+import '../../icon/index.css';
+import '../../filter-tag/index.css';
+import '../../loading/index.css';
+import '../../button/index.css';
+import '../../overlay/index.css';
+import '../../popup/index.css';
+import '../../popover/index.css';
+import '../../nav-bar/index.css';
+import '../../action-sheet/index.css';
+import '../../checkbox-group/index.css';
+import '../../checkbox/index.css';
+import '../../bottom-action-bar/index.css';
+import '../../radio-group/index.css';
+import '../../radio/index.css';
+import '../../cell/index.css';
+import '../../tree-select/index.css';
+import '../../field/index.css';
+import '../../search/index.css';
+import '../../divider/index.css';
+import '../../blue-mark/index.css';
+import '../../sticky/index.css';
+import '../../swipe/index.css';
+import '../../swipe-item/index.css';
+import '../../tabs/index.css';
+import '../../tab/index.css';
+import '../index.css';

package/es/object-select/style/less.js

@@ -0,0 +1,28 @@
+import '../../style/base.less';
+import '../../badge/index.less';
+import '../../icon/index.less';
+import '../../filter-tag/index.less';
+import '../../loading/index.less';
+import '../../button/index.less';
+import '../../overlay/index.less';
+import '../../popup/index.less';
+import '../../popover/index.less';
+import '../../nav-bar/index.less';
+import '../../action-sheet/index.less';
+import '../../checkbox-group/index.less';
+import '../../checkbox/index.less';
+import '../../bottom-action-bar/index.less';
+import '../../radio-group/index.less';
+import '../../radio/index.less';
+import '../../cell/index.less';
+import '../../tree-select/index.less';
+import '../../field/index.less';
+import '../../search/index.less';
+import '../../divider/index.less';
+import '../../blue-mark/index.less';
+import '../../sticky/index.less';
+import '../../swipe/index.less';
+import '../../swipe-item/index.less';
+import '../../tabs/index.less';
+import '../../tab/index.less';
+import '../index.less';

package/es/object-select/types.ts

@@ -0,0 +1,12 @@
+import type { Numeric } from '../utils';
+import type { TreeSelectItem } from '../tree-select';
+
+export type ObjectSelectTree = TreeSelectItem;
+export type ObjectSelectValue = Numeric[];
+
+export type ObjectSelectSpecialty = {
+  id: string;
+  name: string;
+  deviceItems: ObjectSelectTree[];
+  systemItems: ObjectSelectTree[];
+};

package/es/overlay/Overlay.tsx

@@ -0,0 +1,86 @@
+import {
+  ref,
+  Transition,
+  defineComponent,
+  type PropType,
+  type CSSProperties,
+  type ExtractPropTypes,
+} from 'vue';
+
+// Utils
+import {
+  isDef,
+  extend,
+  truthProp,
+  numericProp,
+  unknownProp,
+  preventDefault,
+  createNamespace,
+  getZIndexStyle,
+} from '../utils';
+
+// Composables
+import { useEventListener } from '@vant/use';
+import { useLazyRender } from '../composables/use-lazy-render';
+
+const [name, bem] = createNamespace('overlay');
+
+const overlayProps = {
+  show: Boolean,
+  zIndex: numericProp,
+  duration: numericProp,
+  className: unknownProp,
+  lockScroll: truthProp,
+  lazyRender: truthProp,
+  customStyle: Object as PropType<CSSProperties>,
+};
+
+export type OverlayProps = ExtractPropTypes<typeof overlayProps>;
+
+export default defineComponent({
+  name,
+
+  props: overlayProps,
+
+  setup(props, { slots }) {
+    const root = ref<HTMLElement>();
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (props.lockScroll) {
+        preventDefault(event, true);
+      }
+    };
+
+    const renderOverlay = lazyRender(() => {
+      const style: CSSProperties = extend(
+        getZIndexStyle(props.zIndex),
+        props.customStyle
+      );
+
+      if (isDef(props.duration)) {
+        style.animationDuration = `${props.duration}s`;
+      }
+
+      return (
+        <div
+          v-show={props.show}
+          ref={root}
+          style={style}
+          class={[bem(), props.className]}
+        >
+          {slots.default?.()}
+        </div>
+      );
+    });
+
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+	  useEventListener('touchmove', onTouchMove as EventListener, {
+      target: root,
+    });
+
+    return () => (
+      <Transition v-slots={{ default: renderOverlay }} name="van-fade" appear />
+    );
+  },
+});

package/es/overlay/README.md

@@ -0,0 +1,107 @@
+# Overlay
+
+### Intro
+
+Create a mask layer to emphasize specific page elements and prevent users from performing other operations.
+
+### Install
+
+Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
+
+```js
+import { createApp } from 'vue';
+import { Overlay } from 'vant';
+
+const app = createApp();
+app.use(Overlay);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-button type="primary" text="Show Overlay" @click="show = true" />
+<van-overlay :show="show" @click="show = false" />
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const show = ref(false);
+    return { show };
+  },
+};
+```
+
+### Embedded Content
+
+```html
+<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
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| show | Whether to show overlay | _boolean_ | `false` |
+| z-index | z-index | _number \| string_ | `1` |
+| duration | Animation duration | _number \| string_ | `0.3` |
+| class-name | ClassName | _string_ | - |
+| custom-class | Custom style | _object_ | - |
+| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
+| lazy-render `v3.4.2` | Whether to lazy render util appeared | _boolean_ | `true` |
+
+### Events
+
+| Event | Description                       | Arguments           |
+| ----- | --------------------------------- | ------------------- |
+| click | Emitted when component is clicked | _event: MouseEvent_ |
+
+### Slots
+
+| Name    | Description  |
+| ------- | ------------ |
+| default | Default slot |
+
+### Types
+
+The component exports the following type definitions:
+
+```ts
+import type { OverlayProps } from 'vant';
+```
+
+## Theming
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+
+| Name                           | Default Value        | Description |
+| ------------------------------ | -------------------- | ----------- |
+| --van-overlay-z-index          | _1_                  | -           |
+| --van-overlay-background-color | _rgba(0, 0, 0, 0.7)_ | -           |