jf-frock/src/components/confirm-delete/index.vue

<template>
    <div class="confirm-d">
        <Modal class-name="vertical-center-modal" :title='title' v-model="show" :width="444">
            <Form :label-width='100' class="confirm_form" v-if="formData">
                <FormItem :label='item.title' v-for="(item,index) in formData" :key="index">
                    <Select v-model="item.value" filterable clearable v-if="item.is_select" style="width:70%" filter-by-label>
                        <Option v-for="(_item,_index) in item.list" :key="_index" :label="_item.title" :value='_item.id'/>
                    </Select>
                    <Input v-model="item.value" style="width:70%" v-else/>
                </FormItem>
            </Form>
            <div class='content-modal' v-else>{{content}}</div>
            <div class="modal-footer" slot="footer">
                <Button @click="cancel">取消</Button>
                <Button @click="then" :type="type ? type :'error'">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show:false,
        }
    },
    destroyed(){
        this.show = false
    },
    methods:{
        then(){
            this.$emit('then')
        },
        cancel(){
            this.$emit('cancel')
        },
        close(){
            this.show = false
        }
    }
}
</script>

<style lang="scss" scoped>
.modal-footer{display: flex;justify-content:flex-end;}
</style>
<style lang="scss">
.confirm_form{
    
}
.content-modal{display: flex;justify-content: center;align-items: center;}
.vertical-center-modal{display: flex;align-items: center;justify-content: center;
    .ivu-modal{top: 0;}
}
</style>