vue3 使用 this.$prompt
时间: 2023-12-13 10:29:58 浏览: 427
vue3.js
Vue3中使用`this.$prompt`需要先引入`ElMessageBox`组件,然后在组件中使用`this.$prompt`方法。该方法可以弹出一个带有输入框的提示框,用户可以在输入框中输入内容,然后点击确定或取消按钮。具体用法如下:
```
import { ElMessageBox } from 'element-plus';
ElMessageBox.prompt('请输入内容', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /\S/,
inputErrorMessage: '内容不能为空',
inputValidator: (value) => {
if (!value) {
return '内容不能为空';
}
},
}).then(({ value }) => {
console.log('输入框的值', value);
}).catch(() => {
console.log('取消');
});
```
其中,第一个参数为提示框中显示的文本内容,第二个参数为提示框的标题,第三个参数为配置项,可以设置确定和取消按钮的文本、输入框的验证规则等。`then`方法中的回调函数会在用户点击确定按钮后执行,可以获取用户在输入框中输入的内容。`catch`方法中的回调函数会在用户点击取消按钮后执行。
阅读全文