Element使用Message消息提示

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

Element使用Message消息提示

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

一、导入Element

1、npm 安装

推荐使用 npm 的方式安装

  1. npm i element-ui -S

2、引入 Element

在 main.js 中写入以下内容

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

3、实现代码

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

  1. <!-- type="primary"设置按钮背景颜色为绿色 
  2.       :plain="true"窗体主体部分背景颜色透明
  3.       -->
  4.       <el-button type="primary" :plain="true" @click="login">登录</el-button>
  6. <script>
  7. import request from "@/axios/baseURL";
  9. // 接口数据初始化
  10. const FORM_DATA = {
  12.   userName: "",
  13.   password: "",
  14. };
  15. export default {
  17.   data() {
  19.     return {
  21.       FORM_DATA,
  22.     };
  23.   },
  24.   created() {
  26.     console.log("登录界面");
  27.   },
  28.   methods: {
  30.     login() {
  32.       request.post("/systemUser/login", this.FORM_DATA).then((res) => {
  34.         var code = res.data.code;
  35.         var message = res.data.message;
  36.         if (code == 0) {
  38.           this.$message(message);
  39.         } else {
  41.           this.$message(message);
  42.         }
  43.         console.log(res);
  44.       });
  45.     },
  46.   },
  47. };
  48. </script>

4、效果

在这里插入图片描述

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

发表评论

表情：
评论列表 （有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Notice-Message消息提示

    常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，

    忘是亡心i忘是亡心i/ 0 赞/ 369 阅读