99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
// Vue Mixin - 訊息提示功能
|
|
// 提供浮動訊息提示 (Toast) 功能
|
|
|
|
// 訊息類型常數
|
|
var ToastType = {
|
|
SUCCESS: 'success',
|
|
ERROR: 'error',
|
|
WARNING: 'warning',
|
|
INFO: 'info'
|
|
};
|
|
|
|
var ToastMixin = {
|
|
data: function() {
|
|
return {
|
|
// 訊息提示相關
|
|
ShowMessage: false,
|
|
MessageText: "",
|
|
MessageType: ToastType.SUCCESS,
|
|
|
|
// 預設顯示時長(ms)
|
|
defaultDuration: 5000,
|
|
|
|
// 將常數暴露給 Vue 實例使用
|
|
ToastType: ToastType
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* 顯示訊息提示
|
|
* @param {string} message - 訊息內容
|
|
* @param {string} type - 訊息類型: ToastType.SUCCESS, ToastType.ERROR, ToastType.WARNING, ToastType.INFO
|
|
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
|
*/
|
|
ShowToast: function(message, type, duration) {
|
|
if (type === undefined) {
|
|
type = ToastType.SUCCESS;
|
|
}
|
|
if (duration === undefined) {
|
|
duration = this.defaultDuration;
|
|
}
|
|
|
|
this.MessageText = message;
|
|
this.MessageType = type;
|
|
this.ShowMessage = true;
|
|
|
|
var self = this;
|
|
setTimeout(function() {
|
|
self.ShowMessage = false;
|
|
}, duration);
|
|
},
|
|
|
|
/**
|
|
* 顯示成功訊息
|
|
* @param {string} message - 訊息內容
|
|
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
|
*/
|
|
ShowSuccess: function(message, duration) {
|
|
this.ShowToast(message, ToastType.SUCCESS, duration);
|
|
},
|
|
|
|
/**
|
|
* 顯示錯誤訊息
|
|
* @param {string} message - 訊息內容
|
|
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
|
*/
|
|
ShowError: function(message, duration) {
|
|
this.ShowToast(message, ToastType.ERROR, duration);
|
|
},
|
|
|
|
/**
|
|
* 顯示警告訊息
|
|
* @param {string} message - 訊息內容
|
|
* @param {number} duration - 顯示時長（毫秒），預設 4000ms
|
|
*/
|
|
ShowWarning: function(message, duration) {
|
|
if (duration === undefined) {
|
|
duration = this.defaultDuration;
|
|
}
|
|
this.ShowToast(message, ToastType.WARNING, duration);
|
|
},
|
|
|
|
/**
|
|
* 顯示資訊訊息
|
|
* @param {string} message - 訊息內容
|
|
* @param {number} duration - 顯示時長（毫秒），預設 3000ms
|
|
*/
|
|
ShowInfo: function(message, duration) {
|
|
this.ShowToast(message, ToastType.INFO, duration);
|
|
},
|
|
|
|
/**
|
|
* 隱藏訊息提示
|
|
*/
|
|
HideToast: function() {
|
|
this.ShowMessage = false;
|
|
}
|
|
}
|
|
};
|