您的位置:

Vue.js中$message的使用

一、$message的概述

Vue.js是一个轻量级、高性能、易于上手的前端框架,其提供了一系列便捷的API和组件,其中$message组件是其中的一员。$message组件可以很好地提供一个友好的弹窗提示,例如告知用户操作的结果。

在Vue.js中,$message组件可通过this.$message的方式调用。它可以用来显示如成功、错误、提示等信息,在用户对某些操作进行响应时使用。需要注意的是,$message组件通常需要先引入vue框架,以便正常使用。

二、$message的使用

使用$message组件,需要先引入vue组件:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引入完成后,便可以在Vue对象的methods中使用this.$message来调用$message函数。例如:

methods: {
  submitForm() {
    // 发送请求
    axios.post(XXX).then(function(response) {
      // 如果请求成功
      this.$message({
        message: '操作成功',
        type: 'success'
      });
    }).catch(function(error) {
      // 如果请求失败
      this.$message.error('操作失败,请稍后重试!');
    });
  }
}

上面的例子中,当用户点击提交按钮时,会触发submitForm()方法,该方法中会调用axios方法发送请求。请求成功后,会显示操作成功,并以success类型的弹窗来通知用户。请求失败时,会显示操作失败,并以error类型的弹窗来通知用户。

三、$message的自定义

$message组件还可以自定义,以适应不同的需求,例如自定义样式、持续时间等。下面是一些自定义的例子:

1、修改样式

通过在CSS文件中覆盖$message的样式,可以达到自定义弹窗效果的目的。例如,现在我们要将提醒框中的文字改为橙色,可以这样实现:

.el-message__content {
    color: orange;
}

2、修改持续时间

默认情况下,$message组件的弹窗持续时间为3s。如果需要修改它的持续时间,可以使用duration参数。例如:

this.$message({
  message: '操作成功',
  type: 'success',
  duration: 2000 // 持续2s
});

3、修改位置

$message组件弹窗的默认位置为居中显示,如果需要修改它的位置,可以使用position参数。例如:

this.$message({
  message: '操作成功',
  type: 'success',
  position: 'bottom-right' // 在右下角显示
});

四、总结

$message组件是Vue.js框架提供的一种友好的弹窗提示,可以轻松地实现成功、错误、提示等信息的弹窗展示。使用时,需要先引入vue组件,然后在Vue对象的methods中使用this.$message来调用$message函数。除此之外,我们还可以自定义$message组件的样式、持续时间以及位置,以适应不同的需求。