vue弹出带确认框提示框
时间: 2024-09-14 09:14:11 浏览: 44
使用vue实现各类弹出框组件
在Vue中,你可以使用内置的`$confirm`方法来弹出一个带确认框的提示框。这通常通过Vue插件,比如`element-ui`或`vuetify`等UI框架来实现,这些框架提供了丰富的组件,包括模态对话框。
以`element-ui`为例,你可以这样使用:
```javascript
<template>
<el-button @click="openConfirm">点击弹出确认框</el-button>
</template>
<script>
export default {
methods: {
openConfirm() {
this.$confirm('你确定要执行这个操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确定按钮后的回调
console.log('用户点击了确定');
}).catch(() => {
// 点击取消按钮或者关闭对话框后的回调
console.log('用户点击了取消或关闭对话框');
});
}
}
}
</script>
```
在这个例子中,`openConfirm`方法通过调用`this.$confirm`弹出了一个模态对话框,提示用户是否确定执行操作。用户可以选择“确定”或“取消”,这两种操作都会触发对应的回调函数。
如果你没有使用任何UI框架,你也可以使用原生的JavaScript和HTML来实现一个简单的确认框:
```javascript
<template>
<button @click="openNativeConfirm">点击弹出确认框</button>
</template>
<script>
export default {
methods: {
openNativeConfirm() {
if (window.confirm('你确定要执行这个操作吗?')) {
console.log('用户点击了确定');
} else {
console.log('用户点击了取消');
}
}
}
}
</script>
```
这种方法使用了`window.confirm`,它是一个原生的JavaScript函数,可以在浏览器弹出一个简单的确认对话框。
阅读全文