injectLayer

使用前提

如果你想通过 injectLayer 使用对话框，你需要把调用其方法的组件放在 layer-provider 内部并且使用 injectLayer 去获取 API。

使用示例

点我查看代码

demo.vue

<script>
import InjectLayerDemo from './inject-layer-demo.vue'
import LayerProviderDemo from './layer-provider-demo.vue'
</script>

<template>
  <LayerProviderDemo>
    <InjectLayerDemo />
  </LayerProviderDemo>
</template>

inject-layer-demo.vue

<script setup lang="ts">
import { NButton, NCard } from 'naive-ui'
import { h, ref } from 'vue'
import { injectLayer } from './injectLayer'

const layer = injectLayer()

const initRect = ref({
  width: 200,
  height: 200,
  x: 100,
  y: 100,
})

let index = 0

let t: number

function create() {
  initRect.value = {
    width: initRect.value.width,
    height: initRect.value.height,
    x: initRect.value.x + 10,
    y: initRect.value.y + 10,
  }
  index++
  const title = `标题${index}`
  const time = ref(5)
  const res = layer.create({
    initRect: initRect.value,
    onTop: true,
    content: () => {
      return h(NCard, {
        title,
        style: {
          width: '100%',
          height: '100%',
        },
        closable: true,
        onClose: () => {
          clearInterval(t)
          res.destroy()
        },
      }, {
        default: () => {
          return `倒计时${time.value}s`
        },
      })
    },
  })
  t = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      res.destroy()
      clearInterval(t)
    }
  }, 1000)
}
</script>

<template>
  <NButton @click="create">
    新建窗口
  </NButton>
  <NButton
    @click="() => {
      layer.destroyAll()
    }"
  >
    关闭所有窗口
  </NButton>
</template>

layer-provider-demo.vue

<script setup lang="ts">
import { NCard } from 'naive-ui'
import Demo from './demo.vue'
import { LayerProvider } from './layer-provider'
</script>

<template>
  <LayerProvider>
    <slot name="default">
      <div class="flex flex-col gap-5">
        <div>
          窗口1
          <Demo
            :init-rect="{
              width: 200,
              height: 200,
              x: 100,
              y: 100,
            }"
          >
            <NCard title="窗口1" class="w-100% h-100% bg-blueGray" />
          </Demo>
        </div>
        <div>
          窗口2
          <Demo
            :init-rect="{
              width: 300,
              height: 300,
              x: 300,
              y: 300,
            }"
          >
            <NCard title="窗口2" class="w-100% h-100% bg-blue" />
          </Demo>
        </div>
      </div>
    </slot>
  </LayerProvider>
</template>