Element使用Message消息提示

左手的ㄟ右手 2024-04-06 15:27 75阅读 0赞

#### Element使用Message消息提示 ####

*  一、导入Element
 *   *  1、npm 安装
     *  2、引入 Element
     *  3、实现代码
     *  4、效果

--------------------

## 一、导入Element ##

### 1、npm 安装 ###

推荐使用 npm 的方式安装

npm i element-ui -S

### 2、引入 Element ###

在 main.js 中写入以下内容

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    
    Vue.use(ElementUI);

### 3、实现代码 ###

Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<el-button type="primary" :plain="true" @click="login">登录</el-button>
    
    <script>
    import request from "@/axios/baseURL";
    
    // 接口数据初始化
    const FORM_DATA = {
          
      userName: "",
      password: "",
    };
    export default {
          
      data() {
          
        return {
          
          FORM_DATA,
        };
      },
      created() {
          
        console.log("登录界面");
      },
      methods: {
          
        login() {
          
          request.post("/systemUser/login", this.FORM_DATA).then((res) => {
          
            var code = res.data.code;
            var message = res.data.message;
            if (code == 0) {
          
              this.$message(message);
            } else {
          
              this.$message(message);
            }
            console.log(res);
          });
        },
      },
    };
    </script>

### 4、效果 ###

![在这里插入图片描述][710f6bf5b2b44450ad932d0e8ac47d75.png]

*  梦想是前行的方向，努力是脚下的力量。
 *  勇敢直面挑战，奋力前行，必将突破困境。
 *  人生没有终点，只有不断超越的起点。
 *  经历风雨才能见彩虹，踏过荆棘才能达果实。
 *  无论前方多艰辛，心怀希望便是光明的开始。

[710f6bf5b2b44450ad932d0e8ac47d75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4aa683c8852f4896b4879680a16f6c39.png