查看“Element: 消息提示”的源代码
←
Element: 消息提示
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==基础用法== 从顶部出现,3 秒后自动消失 [[文件:vue2022082303.png|600px]] Message 在配置上与 Notification 非常类似,所以部分 options 在此不做详尽解释,文末有 options 列表,可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用,Message 可以接收一个字符串或一个 VNode 作为参数,它会被显示为正文内容。 ===代码=== <nowiki> <template> <div> <el-button :plain="true" @click="open">打开消息提示</el-button> <el-button :plain="true" @click="openVn">VNode</el-button> </div> </template> <script> export default { methods: { open() { this.$message('这是一条消息提示'); }, openVn() { const h = this.$createElement; this.$message({ message: h('p', null, [ h('span', null, '内容可以是 '), h('i', { style: 'color: teal' }, 'VNode') ]) }); } } } </script> </nowiki> ==不同状态== 用来显示「成功、警告、消息、错误」类的操作反馈。 [[文件:vue2022082304.png|600px]] <nowiki> <template> <div> <el-button :plain="true" @click="open2">成功</el-button> <el-button :plain="true" @click="open3">警告</el-button> <el-button :plain="true" @click="open1">消息</el-button> <el-button :plain="true" @click="open4">错误</el-button> </div> </template> <script> export default { methods: { open1() { this.$message('这是一条消息提示'); }, open2() { this.$message({ message: '恭喜你,这是一条成功消息', type: 'success' }); }, open3() { this.$message({ message: '警告哦,这是一条警告消息', type: 'warning' }); }, open4() { this.$message.error('错了哦,这是一条错误消息'); } } } </script> </nowiki>
返回至
Element: 消息提示
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息