Mask

A screen mask that blocks user actions

Examples

Fetch data

import {
  DialogMask,
  DialogAlertError,
  DialogMessageSuccess
} from 'v-dialogs'

function loadDataList () {
  // Open a mask before fetching data
  const destroy = DialogMask()

  fetchData()
    .then(data => {
      list.value = data.list
      // Dismiss mask overlay when data loading complete
      destroy()
      DialogMessageSuccess('Data loaded successfully')
    })
    .catch(() => {
      DialogAlertError('Data Load Failure')
    })
}

Covering the specified area

<template>
  <div id="user-content-area">
    <div>content</div>
    ...
  </div>
</template>

<script setup>
import { DialogMask } from 'v-dialogs'

DialogMask('Loading...', { appendTo: '#user-content-area' })
</script>

content

content

content

content

content

content

UI customization

DialogMask('Loading', { icon: false })
DialogMask('Loading', { pill: false })
DialogMask('Loading', { panel: false })

<script setup>
DialogMask('Loading', { panel: false, customClass:'my-custom-class' })
</script>

<style lang="sass">
.my-custom-class
  .v-dialog-body
    color: white
</style>

API

function DialogMask(
  /**
   * Message content(string|VNode)
   */
  message?: MessageContent,
  /**
   * Callback after Mask dialog closed
   */
  callback?: Function,
  options?: MaskOptions
): Function

The setting options MaskOptions details

interface MaskOptions {
  /**
   * Plugin language
   * @default `en`
   */
  language?: string
  /**
   * Custom class name
   */
  customClass?: string
  /**
   * The element that mask append to
   * @default `body`
   */
  appendTo?: string
  /**
   * Pill style border
   * @default true
   */
  pill?: boolean
  /**
   * Display spinner icon
   * @default true
   */
  icon?: boolean
  /**
   * Display the content panel
   * @default true
   */
  panel?: boolean
}