this.$message入门使用

this.$message的入门使用

念头通达を

10039人浏览 · 2022-06-22 18:14:40

念头通达を · 2022-06-22 18:14:40 发布

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>

官网

message学习官网

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport