开发文档Umo Editor消息提醒

消息提醒

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

示例

<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', { content: 'Hello World' })
}
</script>

组件使用说明

useAlert

Alert 对话框组件,详细说明见方法列表

useConfirm

Confirm 对话框组件,详细说明见方法列表

useMessage

Message 组件,详细说明见方法列表