MessageBox

A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.

<template>

<!-- plugin -->
<VsButton @click="$alert({title:'Sweet Alert'})$">Alert</VsButton>

<!-- component -->
<VsButton @click="toggleDialog">Confirm</VsButton>
<MessageBox v-model="isOpen" @confirm="onConfirm"
        title="Підтвердіть дію"  
        message="Ви дійсно хочете виконати дію?"/>
</template>

<!-- function -->
<script>
import { confirm } from '@opengis/core';
confirm({
  title: "Успішно",  
  message: "Дія виконана успішно",
  onConfirm:()=>alert('plugin confirm')
});
</script>

interface

interface  {
  type?: 'success' | 'error' | 'info' | 'warning';
  mode?: 'confirm' | 'alert' | 'prompt';
  title?: string;
  message?: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
  modelValue?: boolean;
  promptPlaceholder?: string;
  dark?: boolean;
}

Mode

MessageBox provides simulations of system's alert, confirm and prompt，so it's content should be simple. For more complicated contents, please use Dialog.

<MessageBox message="My message" v-model="alert" mode="alert" />
<MessageBox message="My message" v-model="confirm" mode="confirm"/>
<MessageBox message="My message" v-model="confirm" mode="prompt"/>

Type

Defines the message style and semantic meaning — e.g., success for positive feedback, warning for caution, error for failure, and info for neutral notifications.

<MessageBox message="My message" v-model="success" mode="confirm" type="success"/>
<MessageBox message="My message" v-model="error" mode="confirm" type="error"/>
<MessageBox message="My message" v-model="info" mode="confirm" type="info"/>
<MessageBox message="My message" v-model="warning" mode="confirm" type="warning"/>