最近搜索
vue3 消息 提示 Message 消息提示 窗口提示
管理员
2025-01-04 16:49
普通用法
1 2 3 4 5 6 | <template> <el-button :plain="true" @click="open">Show message</el-button> <el-button :plain="true" @click="openVn">VNode</el-button></template> <script lang="ts" setup>import { h } from 'vue'import { ElMessage } from 'element-plus'const open = () => { ElMessage('This is a message.')} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <template> <el-button :plain="true" @click="open2">Success</el-button> <el-button :plain="true" @click="open3">Warning</el-button> <el-button :plain="true" @click="open1">Message</el-button> <el-button :plain="true" @click="open4">Error</el-button></template><script setup>import { ElMessage } from 'element-plus'const open1 = () => { ElMessage('This is a message.')}const open2 = () => { ElMessage({ message: 'Congrats, this is a success message.', type: 'success', })}const open3 = () => { ElMessage({ message: 'Warning, this is a warning message.', type: 'warning', })}const open4 = () => { ElMessage.error('Oops, this is a error message.')}</script> |
相对比上面，背景更白了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <template> <el-button :plain="true" @click="open1">Success</el-button> <el-button :plain="true" @click="open2">Warning</el-button> <el-button :plain="true" @click="open3">Message</el-button> <el-button :plain="true" @click="open4">Error</el-button></template><script setup>import { ElMessage } from 'element-plus'const open1 = () => { ElMessage({ message: 'Congrats, this is a success message.', type: 'success', plain: true, })}const open2 = () => { ElMessage({ message: 'Warning, this is a warning message.', type: 'warning', plain: true, })}const open3 = () => { ElMessage({ message: 'This is a message.', type: 'info', plain: true, })}const open4 = () => { ElMessage({ message: 'Oops, this is a error message.', type: 'error', plain: true, })}</script> |
可关闭的消息提示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <template> <el-button :plain="true" @click="open1">Message</el-button> <el-button :plain="true" @click="open2">Success</el-button> <el-button :plain="true" @click="open3">Warning</el-button> <el-button :plain="true" @click="open4">Error</el-button></template><script setup>import { ElMessage } from 'element-plus'const open1 = () => { ElMessage({ showClose: true, message: 'This is a message.', })}const open2 = () => { ElMessage({ showClose: true, message: 'Congrats, this is a success message.', type: 'success', })}const open3 = () => { ElMessage({ showClose: true, message: 'Warning, this is a warning message.', type: 'warning', })}const open4 = () => { ElMessage({ showClose: true, message: 'Oops, this is a error message.', type: 'error', })}</script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <el-button plain @click="openCenter">Centered text</el-button></template><script setup>import { ElMessage } from 'element-plus'const openCenter = () => { ElMessage({ showClose: true, message: 'Centered text', center: true, })}</script> |
1 | <br> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <el-button :plain="true" @click="openHTML">Use HTML string</el-button></template><script setup>import { ElMessage } from 'element-plus'const openHTML = () => { ElMessage({ dangerouslyUseHTMLString: true, message: '<strong>This is <i>HTML</i> string</strong>', })}</script> |
分组消息合并
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <el-button :plain="true" @click="open">Show message</el-button></template><script setup>import { ElMessage } from 'element-plus'const open = () => { ElMessage({ message: 'This is a message.', grouping: true, type: 'success', })}</script> |
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组