零基础学习vue实战步骤7---配置elementUI的Message弹框提示

ElementUI的 Message 配置过程

首先找到项目的src--plugins--element.js 用 import 导入 Message 这个组件组件,然后把这个Message组件全局挂载

找到 element.js 
// 1. 导入弹框提示组件
import { Message } from 'element-ui'
// 2. 全局挂载 Message 组件
Vue.prototype.$message = Message

使用 Message 弹框 (如:this.$message.success("成功"))

login () {
            this.$refs.loginFormRef.validate(async valid =>{
                // console.log(valid);
                // 进行判断:如果回调函数值是 false 则直接 return 不请求接口
                if (!valid) return;
                const { data: res} = await this.$http.post("admin/login",this.loginForm);
                // console.log(res.code);
                失败时候的弹框
                if( res.code !== 200 ) return this.$message.error(res.msg);
                成功失败的弹框
                this.$message.success(res.msg);
            });
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,291评论 1 22
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,134评论 0 2
  • 上一篇文章http://www.jianshu.com/p/674e75b41642介绍了项目里文件夹的作用分类和...
    威少_吴阅读 1,286评论 0 4
  • 及时叫停 事件:下班老公看我心情比较低提议说出去走走,我本来不想去只想安静待一会,然后他说走吧走吧,家里也没有油了...
    王婷_6e05阅读 201评论 0 0
  • 《别让爱瘦成风景》(外一首) 多久没有臂弯挽着臂弯, 多久没有将“我爱你”挂在耳边, 当生活的淡漠渐成了习惯, 还...
    不语不问阅读 138评论 3 1