vue：通用询问弹框

vue：通用询问弹框

原生js中每次执行删除操作的时候都会调用ifConfirm(msg)来询问是否确定执行，在vue中也可以如此使用，只是页面显示不大协调，故写个通用的询问弹框比较好用。

1，单独组件方便调用 enquireDialog.vue   ui使用vuetify

<template><v-row justify="center"><v-dialog v-model="showConfirmDialog" persistent max-width="290" ><v-card><v-card-title class="h5">{{confirmContent}}</v-card-title><!-- <v-card-text >{{confirmContent}}</v-card-text> --><v-card-actions><v-spacer></v-spacer><v-btn color="green darken-1" text @click="showConfirmDialog = false">取消</v-btn><v-btn color="red darken-1" text @click="showConfirmDialog = false,$emit(parentMethod,parentData)">确认</v-btn></v-card-actions></v-card></v-dialog></v-row>
</template><script>
export default {name:'',data(){return{// deleteDialog:this.dialogshowConfirmDialog:false,//  title: "操作提示",confirmContent:"是否确认删除？",parentMethod:null,//回调函数parentData:null,//回调函数的参数     }},},methods:{show(contents,cmethod,cdata){firmContent=contents||"是否确认删除？";this.parentMethod=cmethod;this.parentData=cdata;this.showConfirmDialog=true;},hidden(){this.showConfirmDialog=false;}}
}
</script>>

2，父组件中调用

先引入子组件，可以在同一个页面多处使用互不干扰

<enquireDialog ref="controllDialog" @deleteType="deleteType" @deleteTalbe="deleteTable" ></enquireDialog>//具体使用
<v-btn text small color="red" @click="$llDialog.show(null,'deleteType',type.id)">删除</v-btn><v-btn text small color="red" @click="$llDialog.show(null,'deleteTable',table.id)">删除</v-btn>

点击“删除”按钮便可弹出弹框

点击确认便可回调父组件中真正的删方法。