this.$message的综合应用

发布时间：2023-05-19

一、基本使用

this.$message是Element UI框架中的一个弹窗提示组件，主要用于进行短时的提示或对用户的行为进行反馈。在使用之前，需先在main.js中引入和注册组件：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
new Vue({
  render: h => h(App),
}).$mount('#app')

然后就可以在Vue实例中通过this.$message调用组件并设置相应的属性进行使用了。例如：

this.$message({
  message: '操作成功！',
  type: 'success'
});

二、常用属性

在使用组件时，经常需要设置不同的属性，例如类型、显示位置、持续时间等。下面列出了一些常用的属性：

  • 1. message：提示的内容，可以为字符串或HTML。
  • 2. type：提示的类型，包括'success'、'warning'、'info'、'error'四种。
  • 3. iconClass：自定义图标的类名，用于替换默认图标。
  • 4. duration：提示的持续时间，单位为毫秒，默认值为3000。
  • 5. showClose：是否显示关闭按钮，默认为false。
  • 6. center：是否居中显示，默认为false。
  • 7. dangerouslyUseHTMLSTring：是否将message作为HTML渲染，可以用于自定义图标等场景，需谨慎使用。 例如：
this.$message({
  message: '操作失败，请检查网络连接！',
  type: 'error',
  duration: 5000,
  showClose: true,
  center: true
})

三、方法调用

除了在Vue实例中通过this.$message调用组件外，也可以通过单独引入和调用组件方法的方式进行使用。例如：

import { Message } from 'element-ui';
Message({
  message: '单独引入的Message组件',
  type: 'warning'
});

四、全局配置

在进行全局配置之前，先要调用Vue.use(ElementUI)方法进行注册，然后可以通过Vue.prototype.$message配置全局的message属性，这样在组件调用时就无需设置属性，直接使用即可。例如：

Vue.prototype.$message({
  duration: 2000,
  showClose: true,
  center: true
})

五、常见问题

  • 1. 如何关闭所有提示？ 可以通过调用this.$message.closeAll()方法关闭所有提示。 
    this.$message.closeAll()
  • 2. 如何禁用所有提示？ 可以通过设置Vue.prototype.$message的disabled属性为true禁用所有提示。 
    Vue.prototype.$message.disabled = true
  • 3. 如何设置提示的全局样式？ 可以通过在项目中引入CSS文件进行样式覆盖。例如： 
    @import '~element-ui/lib/theme-chalk/message.css';
.el-message__content{
  color: red;
  font-size: 16px;
}

六、总结

this.$message是一个在Vue项目中非常常用的组件，通过多方面的应用，可以实现各种定制化需求。因此，在进行Vue项目开发时，应该熟练掌握其使用方法，并结合具体需求进行灵活配置和调用。

推荐文章