useGDialog

命令式弹窗

基础用法

<template>
  <g-button type="primary" @click="openDialog">打开弹窗</g-button>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { useGDialog, GButton } from 'gao-components-plus'
import { h } from 'vue';

function openDialog() {
  const { close, componentIstance } = useGDialog({
    dialogProps: {
      title: '弹窗标题',
      onCancel() {
        ElMessage.info('点击取消')
        close()
      },
      onConfirm() {
        ElMessage.success('点击确定')
        close()
      }
    },
    compProps: {},
    component: () => h('div', '我是内容')
  })
}



</script>

<style lang="scss" scoped>

</style>

参数

名称	描述	类型	默认值
dialogProps	弹窗属性参数	GDialogProps	-
componentProps	弹窗属性参数	GDialogProps	-
component	弹窗显示的组件	Component	-

返回参数

名称	描述	类型	默认值
close	关闭弹窗	Function	-
componentInstance	传入component组件实例	InstanceType<typeof [component]>	-