Use Vue Modal Component

remove.vue

<script>
import Vue from 'vue';

import Ajax from '../utils/ajax';
import Modal from './modal.vue';

let httpRes = {};

export default {
  props: {
    modal: {
      type: Object,
      default: null
    }
  },
  data(){
    return{
      title: '删除',
      okText: '删除',
      okClass: 'btn btn-danger',
      cancelText: '取消',
      cancelClass: 'btn btn-default',
      small: true,
      method: 'delete'
    };
  },
  computed: {
    itemType(){
      let self = this,
      modal = self.modal,
      ret = '本条';
      if(modal.item){
        if(modal.item.type == 2){
          ret = '此评论';
        } else {
          ret = '此回复';
        }
      }
      return ret;
    }
  },
  components: {
    Modal
  },
  methods: {
    remove(){
      let self = this,
      modal = self.modal,
      page = modal.page,
      item = modal.item,
      parent = modal.parent,
      top = modal.top,
      path = modal.path + item.id,
      method = self.method;
      // delete
      httpRes.removeReply = new Ajax({
        path,
        method,
        success(response) {
          if(item && parent){
            parent.$remove(item);
            if(page){
              page.totalRecord--;
            }
            if(top){
              Vue.nextTick(() => {
                top.replyCount = parent.length;
              });
            }
          }
        },
        beforeSend(){
          modal.processing = true;
          modal.okText = '删除中…';
        },
        complete(){
          modal.processing = false;
          modal.okText = '删除';
          modal.show = false;
        }
      });
      httpRes.removeReply.fetch();
    },
    cancel(){
      let self = this,
      modal = self.modal;
      modal.show = false;
      modal.item = null;
      modal.parent = null;
      modal.processing = false;
      modal.okText = '删除';
    }
  }
};
</script>

<template>
  <modal :title="title" :small="small" :ok-text="okText" :ok-class="okClass" :cancel-text="cancelText" :cancel-class="cancelClass" :ok-disabled="modal.processing" :show.sync="modal.show" @ok="remove" @cancel="cancel">
    <div>您确定要删除<span v-text="itemType"></span>？</div>
  </modal>
</template>