5.18.1.快速使用
消息提示组件是对 ElMessage 的扩展，与 ElMessage 的使用方式完全一致，使用示例：
运行代码 新窗口打开
5.18.2.属性列表
支持 ElMessage 的全部属性(请查看 Element 文档)，这里只列出额外增加的属性：
需要注意 EleMessage 并不是组件的形式，所以按需加载插件无法自动引入样式，确保 App.vue 中使用了 EleApp 组件，当然也可以手动引入样式：
// 如果使用按需引入方式又不想使用 EleApp 组件可以手动引入 EleMessage 的样式
import 'ele-admin-plus/es/ele-app/style/message/index';
5.18.3.加载提示
EleMessage 还额外提供了一个 loading 用于显示一个全屏的加载提示，且会锁住整个页面使无法点击，使用示例：
setTimeout(() => {
loading.close();
}, 3000);
};
/** 显示遮罩层 */
const showLoading2 = () => {
const loading = EleMessage.loading({ message: '正在加载中..', mask: true });
setTimeout(() => {
loading.close();
}, 3000);
};
/** 设置更多参数 */
const showLoading3 = () => {
const loading = EleMessage.loading({
message: '正在加载中..',
mask: true,
plain: true, // 简约风格
centered: true, // 居中显示
duration: 3000 // 3s后自动关闭, 默认不会自动关闭
});
//loading.close();
};
</script>
运行代码 新窗口打开
如果需要消息内容响应式修改，可以将 message 参数设置为一个函数，示例：
<template>
<el-button @click="showLoading">打开加载框</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useMessage } from 'ele-admin-plus';
const message = useMessage();
const progress = ref(0);
const showLoading = () => {
progress.value = 0;
const loading = message.loading({
message: () => `正在导入......${progress.value}`,
plain: true,
mask: true,
centered: true
});
const timer = setInterval(() => {
progress.value += 5;
if (progress.value >= 100) {
loading.close();
clearInterval(timer);
}
}, 100);
};
</script>
运行代码 新窗口打开
5.18.4.useMessage
还封装了 hook 的使用形式(v1.2.0新增)，通过 useMessage 使用会有上下文，支持限制在主体区域展示，支持全局配置，使用示例：
<template>
<div>
<el-button @click="showMessage">success</el-button>
<el-button @click="showMessage2">限制在主体区域展示</el-button>
</div>
</template>
<script lang="ts" setup>
import { useMessage } from 'ele-admin-plus';
const message = useMessage();
/*
// 还可以设置局部的全局参数, 还支持在 ele-config-provider 中设置全局参数
const message = useMessage({
inner: true,
mask: true,
centered: true,
plain: true,
offset: 100
});
*/
const showMessage = () => {
message.success('这是一条成功的提示');
// 设置更多参数
message.success({
message: '这是一条成功的提示',
showClose: true,
plain: true
});
};
const showMessage2 = () => {
message.success({
type: 'success',
message: '这是一条成功的提示',
// 这些参数在全局参数中配置后就可以不用每个调用都写了
inner: true, // 限制在主体区域展示
plain: true
});
};
</script>
运行代码 新窗口打开
ElMessage 的内容部分本质也是一个 vue 组件，为了使用方便 ElMessage 是直接提供 js 方法调用动态创建组件， 但这种形式没有上下文，无法读取到 config-provider 的全局配置，组件的生命周期也有问题， 比如用户管理页面卸载了，但用户管理页面创建的消息提示的组件是不会进入 unmount 生命周期的， 而限制在主体区域展示的功能需要监听生命周期，所以需要使用 useMessage 的形式调用。
限制在指定区域
还可以通过 appendTo 参数自定义需要限制显示的位置，示例：
<template>
<div>
<el-button @click="showMessage">限制在指定区域展示</el-button>
<!-- 为指定区域增加 ref 以便能获取到区域引用 -->
<div
ref="demoMessageWrapRef"class="ele-message-wrapper":style="{
width: '600px',
height: '280px',
border: '1px solid red',
position: 'relative'
}">
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useMessage } from 'ele-admin-plus';
const message = useMessage();
const demoMessageWrapRef = ref();
const showMessage = () => {
message.success({
message: '这是一条成功的提示',
plain: true,
inner: true,
showClose: true,
// 通过 appendTo 设置需要显示的指定区域
appendTo: demoMessageWrapRef.value
});
};
</script>
运行代码 新窗口打开
例如使用抽屉组件时想限制提示消息显示在抽屉的内容区域：
<template>
<div>
<el-button @click="visible=true">打开抽屉</el-button>
<ele-drawer :size="430" v-model="visible" title="抽屉">
<el-button @click="showMessage">显示提示</el-button>
<div ref="demoMessageWrapRef" class="ele-message-wrapper"></div>
<template #footer>
<el-button @click="visible=false">取消</el-button>
<el-button type="primary">保存</el-button>
</template>
</ele-drawer>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useMessage } from 'ele-admin-plus';
const message = useMessage();
const visible = ref(false);
const demoMessageWrapRef = ref();
const showMessage = () => {
message.success({
message: '这是一条成功的提示',
plain: true,
inner: true,
showClose: true,
// 通过 appendTo 设置需要显示的指定区域
appendTo: demoMessageWrapRef.value
});
};
</script>
运行代码 新窗口打开
5.18.5.useMessageBox
消息弹出框还封装了 hook 的使用形式(v1.2.0新增)，使用 useMessageBox 会有上下文，支持限制在主体区域展示，支持全局配置，使用示例：
<template>
<div>
<el-button @click="showMessageBox">打开消息弹出框</el-button>
<el-button @click="showMessageBox2">限制在主体区域展示</el-button>
</div>
</template>
<script lang="ts" setup>
import { useMessageBox } from 'ele-admin-plus';
const messageBox = useMessageBox();
/*
// 还可以设置局部的全局参数, 还支持在 ele-config-provider 中设置全局参数
const messageBox = useMessageBox({
inner: true,
draggable: true,
closeOnClickModal: false
});
*/
const showMessageBox = () => {
messageBox.confirm(
'您的专业版会员还有 6 天到期，请及时续费，以免影响正常使用！',
'到期提醒',
{
type: 'warning',
cancelButtonText: '下次再说',
confirmButtonText: '前往续费'
}
).then(() => {
console.log('点击了前往续费');
}).catch(() => {});
};
const showMessageBox2 = () => {
messageBox.confirm(
'您的专业版会员还有 6 天到期，请及时续费，以免影响正常使用！',
'到期提醒',
{
type: 'warning',
cancelButtonText: '下次再说',
confirmButtonText: '前往续费',
inner: true // 限制在主体区域展示
}
).then(() => {
console.log('点击了前往续费');
}).catch(() => {});
};
</script>
限制在主体区域展示的功能需要监听生命周期，而 ElMessageBox 方法调用的形式没有上下文， 弹框生命周期是同 App.vue 的不是同调用方法的页面的，所以需要使用 useMessageBox 这种 hook 的形式调用。
运行代码 新窗口打开
