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.dialog
             showConfirmDialog:false,
            //  title: "操作提示",
             confirmContent:"是否确认删除？",
             parentMethod:null,//回调函数
             parentData:null,//回调函数的参数     
        }
    },
      
    },
    methods:{
      show(contents,cmethod,cdata){
        this.confirmContent=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="$refs.controllDialog.show(null,'deleteType',type.id)">删除</v-btn>

<v-btn text small color="red" @click="$refs.controllDialog.show(null,'deleteTable',table.id)">删除</v-btn>

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

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