Dialog 函数对话框

函数对话框，通过js 调用打开，支持异步关闭，隐藏底部，拖拽等

基础用法

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Dialog } from 'gi-component'

const openDialog = () => {
  Dialog.open({
    title: '标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色',
    onOk: () => {
      ElMessage.success('点击了确定按钮')
    },
    onCancel: () => {
      ElMessage.warning('点击了取消按钮')
    }
  })
}
</script>

异步关闭

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script setup lang="ts">
import { Dialog } from 'gi-component'

const openDialog = () => {
  Dialog.open({
    title: '标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色',
    onBeforeOk: async () => {
      return await new Promise((resolve) =>
        setTimeout(() => resolve(true), 2000)
      )
    }
  })
}
</script>

隐藏底部

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script setup lang="ts">
import { Dialog } from 'gi-component'

const openDialog = () => {
  Dialog.open({
    title: '标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色',
    footer: false
  })
}
</script>

全屏

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script setup lang="ts">
import LayoutTable from '@docs/_components/LayoutTable.vue'
import { ElMessage } from 'element-plus'
import { Dialog } from 'gi-component'
import { h } from 'vue'

const openDialog = () => {
  Dialog.open({
    title: '标题',
    content: () => h(LayoutTable),
    fullscreen: true,
    bodyClass: 'gi-p0',
    onOk: () => {
      ElMessage.success('点击了确定按钮')
    },
    onCancel: () => {
      ElMessage.warning('点击了取消按钮')
    }
  })
}
</script>

拖拽

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开对话框</el-button>
</template>

<script setup lang="ts">
import { ElEmpty } from 'element-plus'
import { Dialog } from 'gi-component'
import { h } from 'vue'

const openDialog = () => {
  Dialog.open({
    title: '标题',
    content: () => h(ElEmpty, { description: '暂无数据' }),
    draggable: true
  })
}
</script>

表单对话框

查看代码

<template>
  <el-button type="primary" @click="openDialog">打开表单对话框</el-button>
</template>

<script setup lang="ts">
import type { FormColumnItem, FormInstance } from 'gi-component'
import { ElMessage } from 'element-plus'
import { Dialog, GiForm } from 'gi-component'
import { h, reactive, ref } from 'vue'

const columns: FormColumnItem[] = [
  { type: 'input', label: '用户名', field: 'username', required: true },
  { type: 'input', label: '手机号', field: 'phone', required: true }
]

const form = reactive({ username: '', phone: '' })
const openDialog = () => {
  const formRef = ref<FormInstance>()
  Dialog.open({
    title: '表单新增',
    content: () => h(GiForm, { 'ref': (e: any) => formRef.value = e, 'columns': columns, 'modelValue': form, 'onUpdate:modelValue': (val) => Object.assign(form, val) }),
    onBeforeOk: async () => {
      try {
        await formRef.value?.formRef?.validate?.()
        ElMessage.success('提交成功')
        await new Promise((resolve) => setTimeout(resolve, 1000))
        return true
      } catch (error) {
        ElMessage.error('表单校验失败')
        return false
      }
    }
  })
}
</script>

自定义底部

查看代码

<template>
  <ElButton type="primary" @click="openDialog">打开对话框</ElButton>
</template>

<script setup lang="ts">
import { ElButton, ElMessage, ElSpace } from 'element-plus'
import { Dialog } from 'gi-component'
import { h } from 'vue'

const onConfirm = () => {
  ElMessage.success('点击了确定按钮')
}

const openDialog = () => {
  const { close, update } = Dialog.open({
    title: '标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色',
    footer: () => h(ElSpace, null, () => [
      h(ElButton, { type: 'success', plain: true, onClick: () => update({ title: '新标题' }) }, { default: () => '修改标题' }),
      h(ElButton, { type: 'warning', plain: true, onClick: () => close() }, { default: () => '取消' }),
      h(ElButton, { type: 'primary', onClick: () => onConfirm() }, { default: () => '确定' })
    ])
  })
}
</script>

基础对话框

查看代码

<template>
  <el-space>
    <el-button type="primary" @click="openInfoDialog">信息对话框</el-button>
    <el-button type="success" @click="openSuccessDialog">成功对话框</el-button>
    <el-button type="warning" @click="openWarningDialog">警告对话框</el-button>
    <el-button type="danger" @click="openErrorDialog">错误对话框</el-button>
  </el-space>
</template>

<script setup lang="ts">
import { Dialog } from 'gi-component'

const openInfoDialog = () => {
  Dialog.info({
    title: '信息标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色',
    onBeforeOk: async () => {
      await new Promise((resolve) => setTimeout(() => resolve(true), 2000))
      return true
    }
  })
}

const openSuccessDialog = () => {
  Dialog.success({
    title: '成功标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色'
  })
}

const openWarningDialog = () => {
  Dialog.warning({
    title: '警告标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色'
  })
}

const openErrorDialog = () => {
  Dialog.error({
    title: '错误标题',
    content: '落霞与孤鹜齐飞，秋水共长天一色'
  })
}
</script>

继承主应用的上下文

如果要继承主应用的上下文

// main.ts
import { Dialog } from 'gi-component'

const app = createApp(App)
Dialog._context = app._context