Popup Component

Umo Editor utilizes TDesign Vue Next as the foundational component library. To facilitate developer usage, it provides encapsulated methods for common popup components such as Alert, Confirm, and Message. You can visit https://demo.umodoc.com/editor?tab=events&lang=en to view the examples by clicking the corresponding buttons.

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
    // ...
  })
 
  // Using Alert
  const useAlert = () => {
    editorRef.value.useAlert({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
    })
  }
 
  // Using Confirm
  const useConfirm = () => {
    const confirm = editorRef.value.useConfirm({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
      onConfirm() {
        confirm.destroy()
      },
    })
  }
 
  // Using Message
  const useMessage = () => {
    editorRef.value.useMessage('info', 'Hello World')
  }
</script>

Component Usage Instructions