菜园前端

Appearance

Message 消息提示 ​

常用于主动操作后的反馈提示。

按需引入方式 ​

如果是完整引入可跳过此步骤

javascript
import Vue from 'vue'
import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/message.css'

Vue.use(Message)
import Vue from 'vue'
import { Message } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/message.css'

Vue.use(Message)

基础使用 ​

vue
<template>
    <el-button :plain="true" @click="open">打开消息提示</el-button>
</template>

<script>
export default {
    methods: {
        open() {
            this.$message('这是一条消息提示')
        }
    }
}
</script>
<template>
    <el-button :plain="true" @click="open">打开消息提示</el-button>
</template>

<script>
export default {
    methods: {
        open() {
            this.$message('这是一条消息提示')
        }
    }
}
</script>

不同状态 ​

用来显示「成功、警告、消息、错误」类的操作反馈。

vue
<template>
    <el-button :plain="true" @click="open1">成功</el-button>
    <el-button :plain="true" @click="open2">警告</el-button>
    <el-button :plain="true" @click="open3">消息</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
export default {
    methods: {
        open1() {
            this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' })
        },
        open2() {
            this.$message({ message: '警告哦，这是一条警告消息', type: 'warning' })
        },
        open3() {
            this.$message('这是一条消息提示')
        },
        open4() {
            this.$message.error('错了哦，这是一条错误消息')
        }
    }
}
</script>
<template>
    <el-button :plain="true" @click="open1">成功</el-button>
    <el-button :plain="true" @click="open2">警告</el-button>
    <el-button :plain="true" @click="open3">消息</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
export default {
    methods: {
        open1() {
            this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' })
        },
        open2() {
            this.$message({ message: '警告哦，这是一条警告消息', type: 'warning' })
        },
        open3() {
            this.$message('这是一条消息提示')
        },
        open4() {
            this.$message.error('错了哦，这是一条错误消息')
        }
    }
}
</script>

Options ​

参数说明类型默认值
message消息文字string
type消息状态stringinfo
...