零基础学习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实战步骤7---配置elementUI的Message弹框提示)