弹层组件

Umo Editor 采用 TDesign Vue Next 作为基础组件库，为了方便开发者使用，对外提供了封装的 Alert，Confirm，Message 等常用弹层组件的方法。您可以访问 https://demo.umodoc.com/editor?tab=events&lang=cn ，点击对应的按钮查看示例。

示例

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

组件使用说明