Skip to content

Instantly share code, notes, and snippets.

@interjc interjc/remove.vue
Created Aug 23, 2016

Embed
What would you like to do?
Use Vue Modal Component
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.