消息提醒
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 组件,详细说明见方法列表。