this.$message入门使用

自律最差的编程狗

已于 2022-06-22 18:19:26 修改

阅读量9.9k

点赞数 3

分类专栏： element-ui 文章标签：前端 elementui

于 2022-06-22 18:14:40 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/125414501

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

this.$message的入门使用

知识点

type控制提示的类型，可以设置为error,warning,info,success,默认info
center控制文本居中显示
showClose控制关闭按钮显示
message编写提示文本
若this.$createElement(标签名称,标签属性填充,标签内容填充)方式，可自定义显示文本效果
还可以通过设置dangerouslyUseHTMLString为true，文本内容的html标签会被解析

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <el-button @click='showMessage'>按钮</el-button>
        <el-button @click='showMessage1'>按钮2</el-button>
    </div>
</body>
</html>

<script>
    new Vue({
        el:"#app",
        data(){
            return{

            }
        },
        methods:{
            showMessage(){
                const h = this.$createElement;
                this.$message({
                    message:h('p',null,[
                        h('span',null,'内容可以是 '),
                        h('i',{style:'color:teal'},'VNode')
                    ]),
                    type:'warning',
                    center:true,
                    showClose:true
                })
            },
            showMessage1(){
                this.$message({
                    dangerouslyUseHTMLString:true,
                    message:'<p><span>内容可以是 <span><i style="color:teal">VNode</i></p>',
                    type:'warning',
                    center:true,
                    showClose:true
                })
            }
        }
    })
</script>