Vue3+Element-Plus 登录功能配置弹框提示实现十五

1.配置弹框提示

 1.1 如何配置Message 

配置弹框的目的，给用户更友好的视觉信息提示作用，而不是日志输出形式

---

① 配置使用官网的Message组件 | Element

② 打开element.js 进行导入提示框组件

③ Message 配置方式和其他的稍微不同，它需要进行全局挂载。

小技巧：当前Vue3.0需要使用element-plusr如果是Vue2.0是使用element-ui

Vue3.0 前面需要加上El 

例如，Vue2.0 直接写Message,Vue3.0就需要加上ElMessage

再如，全局挂载方式，Vue2.0 使用prototype，Vue3.0 就使用globalProperties

如上，把弹框组件挂载Vue 原型对象上。这样每一个组件都可以通过this来访问到自定义属性$message，从而调用到弹框组件。

1.2 如何使用Message

①  在组件中通过this.自定义属性$message来使用。 

② 效果图片

1.3 代码 

element.js

import { ElButton, ElForm, ElFormItem, ElInput, ElRow, ElMessage } from 'element-plus'
export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.config.globalProperties.$message = ElMessage
}

Login.vue

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=1