Modal

The Modal component is a common UI component used to display a modal dialog as an overlay on the current page. It is typically used to show important content or to facilitate user interaction.

The main purposes of the Modal component include:

1. Displaying a prompt: When it is necessary to inform the user about something, a modal dialog can be used to display a prompt, such as prompting the user to log in or indicating if an operation was successful or unsuccessful.
2. Showing detailed information: When detailed information needs to be displayed, a Modal can be used to show it, such as showing product details or user information.
3. Facilitating user interaction: When the user needs to perform certain actions, a Modal can be used to display an interactive dialog, such as confirming an operation or requesting user input.
4. Preventing accidental actions: When the user needs to perform a potentially dangerous action, a Modal can be used to display a confirmation dialog to prevent accidental actions that could have negative consequences.

In short, the Modal component can provide a better user experience by helping users better understand the context and actions they are performing.

Basic Usage

View Source

<script setup lang="ts">
import { ref } from "vue";
import { UniModal, UniButton } from "unify-ui";

const visible = ref(false);

function handleButtonClick() {
  visible.value = true;
}

function handleConfirm() {
  visible.value = false;
}

function handleCancel() {
  visible.value = false;
}

function handleKeyboardEscapeKey() {
  visible.value = false;
}
</script>

<template>
  <UniButton type="soft" @click="handleButtonClick">Open the Modal</UniButton>

  <UniModal
    :visible="visible"
    title="Tips"
    supporting-text="Are you sure you want to delete this record?"
    @click:confirm-button="handleConfirm"
    @click:cancel-button="handleCancel"
    @press:keyboard-escape-key="handleKeyboardEscapeKey"
  ></UniModal>
</template>

API

Properties

withDefaults(
  defineProps<{
    visible: boolean;
    title?: string;
    supportingText?: string;
    confirmText?: string;
    cancelText?: string;
    modalClass?: string;
  }>(),
  {
    title: undefined,
    supportingText: undefined,
    confirmText: undefined,
    cancelText: undefined,
    modalClass: undefined,
  }
);

Events

const emits = defineEmits<{
  (e: "click:confirm-button"): void;
  (e: "click:cancel-button"): void;
  (e: "press:keyboard-escape-key"): void;
}>();

Slots

• default: The content of the modal
• title: The title of the modal
• actions: The footer of the modal