Notifications

Umo Editor uses TDesign Vue Next as its base component library. To simplify usage for developers, it provides encapsulated methods for common notification components such as Alert, Confirm, and Message. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US and click the corresponding buttons to view examples.

Example

<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="useAlert">useAlert</button>
  <button @click="useConfirm">useConfirm</button>
  <button @click="useMessage">useMessage</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';
 
  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })
 
  // Use Alert
  const useAlert = () => {
    editorRef.value.useAlert({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
    })
  }
 
  // Use Confirm
  const useConfirm = () => {
    const confirm = editorRef.value.useConfirm({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
      onConfirm() {
        confirm.destroy()
      },
    })
  }
 
  // Use Message
  const useMessage = () => {
    editorRef.value.useMessage('info', {content: 'Hello World'})
  }
</script>

Component Usage Instructions

useAlert

The Alert dialog component. For detailed instructions, see Methods List.

useConfirm

The Confirm dialog component. For detailed instructions, see Methods List.

useMessage

The Message component. For detailed instructions, see Methods List.

Dialog Introduction