Page

视图包裹组件。

• 已处理appContext丢失问题，详见Antd
• 将Pop组件(modal,drawer)内置，以函数式的形式调用，达到解耦弹窗组件的同时，保证资源按需加载，提升性能

业务场景

• 多与pop函数式调用结合使用，可以便捷处理呈现方案，如modal，drawer，或路由页面呈现

何时使用

• 当页面需要动态加载弹窗，抽屉等

代码演示

基本使用

常见同样的内容，不同的展示形式，如弹窗或者抽屉，后续也可以支持路由页面~

<script setup lang="ts">
import * as pop from './pop'

const handleModal = (id?: string) => {
  pop.createWarehouseModalPop({ id }).then((res) => {
    console.log('回调参数=>', res)
    console.log('刷新表格数据')
  })
}

const handleDrawer = (id?: string) => {
  pop.createWarehouseDrawerPop({ id }).then((res) => {
    console.log('回调参数=>', res)
    console.log('刷新表格数据')
  })
}
</script>

<template>
  <f-space direction="vertical">
    <f-space>
      常见同样的内容，不同的展示形式，如弹窗或者抽屉，后续也可以支持路由页面~
    </f-space>

    <f-space>
      <f-button @click="() => handleModal()" type="primary">
        创建-modal
      </f-button>
      <f-button @click="() => handleModal('110')" type="primary">
        编辑-modal
      </f-button>
    </f-space>

    <f-space>
      <f-button @click="() => handleDrawer()" type="primary">
        创建-drawer
      </f-button>
      <f-button @click="() => handleDrawer('110')" type="primary">
        编辑-drawer
      </f-button>
    </f-space>
  </f-space>
</template>

自定义参数

可自定义属性，如宽度自定义~

<script setup lang="ts">
import * as pop from './pop'

const handleModal = (id?: string) => {
  pop.createWarehouseCusModalPop({ id }).then((res) => {
    console.log('回调参数=>', res)
    console.log('刷新表格数据')
  })
}

const handleDrawer = (id?: string) => {
  pop.createWarehouseCusDrawerPop({ id }).then((res) => {
    console.log('回调参数=>', res)
    console.log('刷新表格数据')
  })
}
</script>

<template>
  <f-space direction="vertical">
    <f-space> 可自定义属性，如宽度自定义~ </f-space>

    <f-space>
      <f-button @click="() => handleModal()" type="primary">
        创建520px-modal
      </f-button>
      <f-button @click="() => handleModal('110')" type="primary">
        编辑520px-modal
      </f-button>
    </f-space>

    <f-space>
      <f-button @click="() => handleDrawer()" type="primary">
        创建80%-drawer
      </f-button>
      <f-button @click="() => handleDrawer('110')" type="primary">
        编辑80%-drawer
      </f-button>
    </f-space>
  </f-space>
</template>