Dialog

Encapsulated based on element-plus dialog component, more suitable for rapid business development.

TIP

Clicking cancel button closes dialog by default
Dialog is draggable by default, does not support closing by clicking mask layer (can be customized)

Basic Dialog

<script lang="ts" setup>
import { ref } from 'vue'

const isShowDialog = ref(false)
</script>

<template>
  <el-button link type="primary" @click="isShowDialog = true">
    Click to open Dialog
  </el-button>
  <z-dialog
    v-model="isShowDialog"
    title="Dialog Title"
    @confirm="isShowDialog = false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

Info, Warning, Error Dialog

Pass info, warning, danger to type

<script lang="ts" setup>
import { ref } from 'vue'

const isShowInfoDialog = ref(false)
const isShowWarningDialog = ref(false)
const isShowDangerDialog = ref(false)
</script>

<template>
  <el-button link type="primary" @click="isShowInfoDialog = true">
    Info Dialog
  </el-button>
  <el-button link type="primary" @click="isShowWarningDialog = true">
    Warning Dialog
  </el-button>
  <el-button link type="primary" @click="isShowDangerDialog = true">
    Error Dialog
  </el-button>
  <z-dialog
    v-model="isShowInfoDialog"
    type="info"
    title="Info"
    @confirm="isShowInfoDialog = false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShowWarningDialog"
    type="warning"
    title="Warning"
    @confirm="isShowWarningDialog = false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShowDangerDialog"
    type="danger"
    title="Error"
    @confirm="isShowDangerDialog = false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

Import Usage

Supports opening dialog through method calls, with default title configuration internally. We can pass strings through title, message or function parameters to customize title and content.

TIP

Due to documentation rendering reasons, ZDialogTip function is directly bound to window. If you use it in your project, you can import it directly from the ideaz-element package.

<script lang="ts" setup>
import { h } from 'vue'

function openInfoDialog() {
  window.ZDialogTip({
    type: 'info',
    message: 'Notification message',
    onConfirm: ({ done, confirmButtonLoading }) => {
      confirmButtonLoading.value = true
      done()
    },
    onCancel: ({ done }) => {
      done()
    },
  })
}

function openWarningDialog() {
  window.ZDialogTip.warning('Warning message', 'Dialog Title', {
    type: 'warning',
    onConfirm: ({ confirmButtonLoading }) => {
      confirmButtonLoading.value = true
    },
    onCancel: ({ done }) => {
      done()
    },
  })
}

function openDangerDialog() {
  window.ZDialogTip({
    type: 'danger',
    message: () => h('span', {}, 'custom message'),
    title: () => h('span', {}, 'custom title'),
    onConfirm: ({ confirmButtonLoading }) => {
      confirmButtonLoading.value = true
    },
    onCancel: ({ done }) => {
      done()
    },
  })
}
</script>

<template>
  <el-button link type="primary" @click="openInfoDialog">
    Info Dialog
  </el-button>
  <el-button link type="primary" @click="openWarningDialog">
    Warning Dialog
  </el-button>
  <el-button link type="primary" @click="openDangerDialog">
    Error Dialog
  </el-button>
</template>

Operation Buttons

Use confirmButtonLabel, confirmButtonLoading, cancelButtonLabel, cancelButtonLoading attributes to configure button text and loading state
Use confirmButtonProps, cancelButtonProps attributes to configure all dialog button properties
In function mode, onConfirm, onCancel receive an object containing done method and button state. Calling done method can close dialog, modifying button state can achieve button loading effect

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const isShowDialog = ref(false)
const isShow = ref(false)

const confirmButtonProps = reactive({
  label: 'Confirm',
  type: 'danger',
  loading: false,
})

const cancelButtonProps = reactive({
  label: 'Cancel',
  type: 'primary',
  loading: false,
})

const isConfirmBtnLoading = ref(false)
const isCancelBtnLoading = ref(false)

function openWarningDialog() {
  window.ZDialogTip({
    type: 'warning',
    message: 'Warning message',
    onConfirm: async ({ done, confirmButtonLoading }) => {
      confirmButtonLoading.value = true
      await delay(200)
      confirmButtonLoading.value = false
      done()
    },
    onCancel: async ({ done, cancelButtonLoading }) => {
      cancelButtonLoading.value = true
      await delay(200)
      cancelButtonLoading.value = false
      done()
    },
  })
}

async function handleConfirm() {
  confirmButtonProps.loading = true
  try {
    await delay(200)
    confirmButtonProps.loading = false
    isShowDialog.value = false
  }
  catch {}
  confirmButtonProps.loading = false
}

async function handleCancel() {
  cancelButtonProps.loading = true
  try {
    await delay(200)
    cancelButtonProps.loading = false
    isShowDialog.value = false
  }
  catch {}
  cancelButtonProps.loading = false
}

async function confirm() {
  isConfirmBtnLoading.value = true
  try {
    await delay(200)
    isConfirmBtnLoading.value = false
    isShow.value = false
  }
  catch {}
  isConfirmBtnLoading.value = false
}

async function cancel() {
  isCancelBtnLoading.value = true
  try {
    await delay(200)
    isCancelBtnLoading.value = false
    isShow.value = false
  }
  catch {}
  isCancelBtnLoading.value = false
}

function delay(time: number) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}
</script>

<template>
  <el-button link type="primary" @click="openWarningDialog">
    Event configuration
  </el-button>
  <el-button link type="primary" @click="isShowDialog = true">
    Object prop configuration
  </el-button>
  <el-button link type="primary" @click="isShow = true">
    Basic prop configuration
  </el-button>
  <z-dialog
    v-model="isShowDialog"
    title="Dialog Title"
    :confirm-button-props="confirmButtonProps"
    :cancel-button-props="cancelButtonProps"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShow"
    title="Dialog Title"
    confirm-button-label="Confirm"
    cancel-button-label="Cancel"
    :confirm-button-loading="isConfirmBtnLoading"
    :cancel-button-loading="isCancelBtnLoading"
    @confirm="confirm"
    @cancel="cancel"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

Custom Title

You can use title slot or render function to customize title

<script lang="ts" setup>
import { h, ref } from 'vue'

const isShowDialog = ref(false)
const isShowRenderDialog = ref(false)

function renderTitle() {
  return h('span', 'Render title')
}

function handleClick() {
  window.ZDialogTip({
    type: 'danger',
    message: () => h('span', {}, 'custom message'),
    title: () => h('span', {}, 'custom title'),
    onConfirm: ({ done, confirmButtonLoading }) => {
      confirmButtonLoading.value = true
      done()
    },
    onCancel: ({ done, cancelButtonLoading }) => {
      cancelButtonLoading.value = true
      done()
      cancelButtonLoading.value = false
    },
  })
}
</script>

<template>
  <el-button link type="primary" @click="isShowDialog = true">
    Click to open slot dialog
  </el-button>
  <el-button link type="primary" @click="isShowRenderDialog = true">
    Click to open render dialog
  </el-button>
  <el-button link type="primary" @click="handleClick">
    Click to open render dialog
  </el-button>
  <z-dialog
    v-model="isShowDialog"
    @confirm="isShowDialog = false"
  >
    <template #title>
      Slot title
    </template>
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShowRenderDialog"
    :title="renderTitle"
    @confirm="isShowRenderDialog = false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

Pass footer slot or render function to customize footer buttons. Setting footer to false can disable footer buttons.

<script lang="ts" setup>
import { h, ref } from 'vue'

const isShowDialog = ref(false)
const isShowRenderDialog = ref(false)
const isShowFooterDialog = ref(false)

function renderFooter() {
  return h('div', 'Render footer')
}
</script>

<template>
  <ElButton link type="primary" @click="isShowDialog = true">
    Click to open slot dialog
  </ElButton>
  <ElButton link type="primary" @click="isShowRenderDialog = true">
    Click to open render dialog
  </ElButton>
  <ElButton link type="primary" @click="isShowFooterDialog = true">
    Click to open footer dialog
  </ElButton>
  <z-dialog
    v-model="isShowDialog"
    title="Dialog Title"
  >
    <template #footer>
      <ElButton size="default" @click="isShowDialog = false">
        Close dialog
      </ElButton>
    </template>
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShowRenderDialog"
    title="Dialog Title"
    :footer="renderFooter"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
  <z-dialog
    v-model="isShowFooterDialog"
    title="Dialog Title"
    :footer="false"
  >
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

before-close

Callback before closing

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

const isShowDialog = ref(false)

function handleConfirm(done: () => void) {
  console.log(done, 'sdf')
}

async function handleBeforeClose(done: () => void) {
  console.log('handleBeforeClose')
  await delay(200)
  done()
}

function handleOpen() {
  isShowDialog.value = true
}

function openDialog() {
  window.ZDialogTip({
    type: 'warning',
    message: 'Content message',
    title: 'Dialog Title',
    beforeClose: (done) => {
      console.log('before close extend')
      done()
    },
    onConfirm: ({ confirmButtonLoading }) => {
      confirmButtonLoading.value = true
    },
    onCancel: ({ done }) => {
      done()
    },
  })
}

function handleClose() {
  console.log('handleClose')
}

function delay(time: number) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}
</script>

<template>
  <el-button link type="primary" @click="handleOpen">
    Click to open Dialog
  </el-button>
  <el-button link type="primary" @click="openDialog">
    Click to open Dialog
  </el-button>
  <z-dialog
    v-model="isShowDialog"
    type="warning"
    :before-close="handleBeforeClose"
    @closed="handleClose"
    @confirm="handleConfirm"
  >
    <template #header>
      <span>slotTitle</span>
    </template>
    <span>This is a piece of information.</span>
  </z-dialog>
</template>

z-dialog Attributes

Attribute	Description	Type	Default
model-value / v-model	Whether to show Dialog	`boolean`	—
title	Dialog title	`string` / `() => VNode`	''
type	Dialog type	`normal` / `info` / `warning` / `danger`	'normal'
footer	Custom Dialog footer	`() => VNode`	''
confirmButtonLabel	Confirm button text	`string`	'Confirm'
confirmButtonLoading	Confirm button loading state	`boolean`	false
confirmButtonProps	Confirm button properties	`object`	—
cancelButtonLabel	Cancel button text	`string`	'Cancel'
cancelButtonLoading	Cancel button loading state	`boolean`	false
cancelButtonProps	Cancel button properties	`object`	—
width	Dialog width, default value is 50%	`string` / `number`	''
fullscreen	Whether Dialog is fullscreen	`boolean`	false
top	Dialog CSS margin-top value, default is 15vh	`string`	''
modal	Whether to show modal	`boolean`	true
modal-class	Custom class name for modal	`string`	—
append-to-body	Whether Dialog itself is inserted into body element. Nested Dialog must specify this attribute and assign it to `true`	`boolean`	false
lock-scroll	Whether to lock body scroll when Dialog appears	`boolean`	true
custom-class deprecated	Custom class name for Dialog	`string`	''
open-delay	Dialog opening delay time in milliseconds	`number`	0
close-delay	Dialog closing delay time in milliseconds	`number`	0
close-on-click-modal	Whether Dialog can be closed by clicking modal	`boolean`	true
close-on-press-escape	Whether Dialog can be closed by pressing ESC	`boolean`	true
show-close	Whether to show close button	`boolean`	true
before-close	Callback before closing, will pause Dialog closing. Dialog will only close when done parameter method is executed in callback function.	`Function`	—
draggable	Enable draggable feature for Dialog	`boolean`	false
center	Whether to center align Dialog header and footer	`boolean`	false
align-center 2.2.16	Whether to horizontally and vertically align dialog	`boolean`	false
destroy-on-close	Destroy elements in Dialog when closing	`boolean`	false
close-icon	Custom close icon, default Close	`string` / `Component`	—
z-index	Same as native CSS z-index, changes z-axis order	`number`	—
header-aria-level a11y	`aria-level` attribute for header	`string`	2

z-dialog Slots

Slot Name	Description
—	Dialog content
header	Content for dialog title; replaces title section but does not remove close button.
footer	Content for Dialog button operation area

z-dialog Events

Event Name	Description	Type
open	Callback when Dialog opens	`Function`
opened	Callback when Dialog opening animation ends	`Function`
close	Callback when Dialog closes	`Function`
closed	Callback when Dialog closing animation ends	`Function`
open-auto-focus	Callback when input focus is on Dialog content	`Function`
close-auto-focus	Callback when input focus leaves Dialog content	`Function`
confirm	Callback when confirm button is clicked	`Function`
cancel	Callback when cancel button is clicked	`Function`

Form

Crud

Dialog

Basic Dialog

Info, Warning, Error Dialog

Import Usage

Operation Buttons

Custom Title

Custom Footer Buttons

before-close

z-dialog Attributes

z-dialog Slots

z-dialog Events

Dialog ​

Basic Dialog ​

Info, Warning, Error Dialog ​

Import Usage ​

Operation Buttons ​

Custom Title ​

Custom Footer Buttons ​

before-close ​

z-dialog Attributes ​

z-dialog Slots ​

z-dialog Events ​

Dialog

Basic Dialog

Info, Warning, Error Dialog

Import Usage

Operation Buttons

Custom Title

Custom Footer Buttons

before-close

z-dialog Attributes

z-dialog Slots

z-dialog Events