Vue自定义全局弹出询问框、输入框、提示框、toast

在Vue中，我们可以通过创建自定义的全局组件来实现自定义的弹出询问框、输入框、提示框和toast。下面是一些示例代码和步骤。
一、创建一个全局组件
首先，我们需要创建一个全局组件。这可以通过在Vue的原型上添加一个新的方法来实现。例如，我们可以创建一个名为GlobalDialog的组件，它包含一个弹出询问框、输入框、提示框和toast的方法。

// GlobalDialog.js
import Vue from 'vue';
Vue.prototype.$globalDialog = {
showConfirmDialog(message, title) {
// 弹出询问框的逻辑
},
showInputDialog(message, title) {
// 弹出输入框的逻辑
},
showMessageDialog(message, title) {
// 弹出提示框的逻辑
},
showToast(message) {
// 弹出toast的逻辑
},
};

二、弹出询问框
在showConfirmDialog方法中，我们可以创建一个弹出询问框的逻辑。例如，我们可以使用一个模态对话框来显示询问消息，并提供“确定”和“取消”按钮供用户选择。当用户点击“确定”按钮时，我们可以返回一个布尔值来表示用户的选择。

showConfirmDialog(message, title) {
const confirm = window.confirm(message);
return confirm === true;
},

三、弹出输入框
在showInputDialog方法中，我们可以创建一个弹出输入框的逻辑。例如，我们可以使用一个模态对话框来显示输入消息，并提供一个文本输入框供用户输入数据。当用户点击“确定”按钮时，我们可以返回用户输入的数据。

showInputDialog(message, title) {
const inputValue = window.prompt(message);
return inputValue !== null ? inputValue : '';
},

四、弹出提示框
在showMessageDialog方法中，我们可以创建一个弹出提示框的逻辑。例如，我们可以使用一个模态对话框来显示一条消息，并提供一个“关闭”按钮供用户关闭对话框。我们可以返回一个字符串来表示消息的内容。

showMessageDialog(message, title) {
const messageValue = window.confirm(message);
return messageValue === true ? 'Success' : 'Error';
},

五、弹出toast提示
在showToast方法中，我们可以创建一个弹出toast的逻辑。例如，我们可以使用一个简单的JavaScript函数来显示一条简单的提示消息。这个函数可以接受一个字符串作为参数，并在控制台中输出该字符串。如果需要在页面上显示提示消息，可以使用一个第三方的Toast组件或者使用CSS创建一个简单的动画效果。需要注意的是，这里的示例只是将提示消息输出到控制台，实际使用时需要根据具体需求进行修改。

showToast(message) {
console.log(message); // 输出提示消息到控制台
},

六、使用全局组件
现在我们已经创建了一个全局组件GlobalDialog，可以在应用程序中的任何位置使用它来弹出询问框、输入框、提示框和toast。例如，在Vue组件中，我们可以这样使用它：
```javascript
this.$globalDialog.showConfirmDialog(‘Are you sure?’, ‘Confirmation’); // 弹出询问框