关于前端:Elementui-Message-消息提示

Element-ui Message 音讯提醒

原文链接：https://note.noxussj.top/?source=sifo

罕用于被动操作后的反馈提醒。

按需引入形式

如果是残缺引入可跳过此步骤

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)

根底应用

<template>
    <el-button :plain="true" @click="open"> 关上音讯提醒 </el-button>
</template>

<script>
export default {
    methods: {open() {this.$message('这是一条音讯提醒')
        }
    }
}
</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

原文链接：https://note.noxussj.top/?source=sifo