Element的$prompt方法的使用及自定义显示内容

在Vue.js中，Element UI库提供了一种方便的方法来显示prompt对话框，以便用户输入文本。这通常通过$prompt方法实现，它是MessageBox.prompt的别名。

以下是一个使用Element UI的$prompt方法的示例：

// 引入Element UI的MessageBox组件
import { MessageBox } from 'element-ui';
 
// 在Vue组件中使用$prompt方法
export default {
  methods: {
    openPromptBox() {
      this.$prompt('请输入内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '内容不能为空'
      }).then(({ value }) => {
        // 用户点击确定并输入了内容
        console.log(value);
      }).catch(() => {
        // 用户点击取消或关闭对话框
        console.log('取消输入');
      });
    }
  }
}

在这个例子中，$prompt方法打开了一个prompt对话框，并要求用户输入内容。如果用户输入了内容并点击确定，则会执行then方法中的回调，并打印输入的内容。如果用户点击取消或关闭对话框，则会执行catch方法中的回调。

$prompt方法接收三个参数：提示信息、标题和选项对象。选项对象可以包含inputPattern和inputErrorMessage属性，用于验证和错误提示，这些属性是可选的。