vue框架自己好像没有弹出框,而vuetify有弹出框v-dialog,没有确认框confirm,虽然确认框本身就是弹出框,但是弹出框的功能有个特点,就是确定做一件事情,而取消了就是做另一件事情,类似一个Promise要做的事情。
今天主要就是要自定义一个确认框,我们利用组件的思维,先定义组件结构,然后定义组件如何配合文档document工作,最后声明和调用。按照这个思路,我们分如下几步:
1、定义组件结构体src/components/Confirm.vue
<template>
<div class="dialogwrapper" v-if="show">
<div class="overlay"></div>
<v-card class="dialog">
<v-card-title>提示</v-card-title>
<v-card-text>
您确定这么做吗?
</v-card-text>
<v-card-actions>
<v-btn @click="ok">确定</v-btn>
<v-btn @click="cancel">取消</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
data() {
return {
promiseStatus: n