zoukankan      html  css  js  c++  java
  • vue:配置message全局弹框组件

    当用户登录成功或登录失败之后,目前是在console中进行提示,用户是看不到的,为了让用户能明确的知道自己是成功还是失败了,我们应该以一种友好的方式告诉用户,那怎么进行友好的弹框提示呢?可以用Elemetnt-UI中提供的“Message消息提示”

    怎么才能使用Message消息提示呢?     

    1、 在element.js中导入Message组件

    import {Message} from 'element-ui'

    2、它的配置方式与Button、Form不一样,它需要进行全局挂载,把Message挂载到vue原型的一个属性上,$message是自定义属性,可以自定义,只要合法就行。

    Vue.prototype.$message = Message

    注意:Element 为 Vue.prototype 添加了全局方法 $message。故不需要挂载到vue原型上

    代表把弹框组件Message挂载到了VUE的原型对象上。这样的话,每一个组件都可以通过this来访问$message,然后就可以弹框提示了。

    $message中提供了一系列弹框方法,设置type字段可以定义不同的状态,默认为info,如success方法表示弹出一个正确的提示框,error表示弹出一个错误的提示框。方法中可以提供正确或错误的消息

    代码修改如下:

  • 相关阅读:
    操作系统——理论知识
    BEGIN-4 Fibonacci数列
    BEGIN-3 圆的面积
    面向对象三大特征之一:多态
    面向对象三大特征之二:继承
    package---包
    面向对象三大特征之一:封装
    关键字:This(上)
    无参构造与有参构造
    面向对象
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15390360.html
Copyright © 2011-2022 走看看