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組件的樣式、持續時間以及位置，以適應不同的需求。