iview $modal 的封装

Posted 2020-12-25 haonanya

<template>
    <Modal
            v-model="isShow"
            :width="width"
            :title="title">
        <slot name="content"></slot>
        <div slot="footer" class="modalFooterStyle">
            <span class="editFormErrorStyle">{{ WarnMsg }}</span>
            <div>
                <Button type="success" :loading="loading" @click="submit">确认</Button>
                <Button class="cancelButton" @click="cancel">取消</Button>
            </div>
        </div>
    </Modal>
</template>

<script>
export default {
    name: ‘ModalBlock‘,
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        width: {
            type: Number
        },
        loading: {
            type: Boolean,
            default: false
        },
        WarnMsg: {
            type: String
        }
    },
    methods: {
        cancel: function () {
            this.$emit(‘cancel‘);
        },
        submit () {
            this.$emit(‘submit‘);
        }

    }
}
</script>

<style scoped>

</style>

　　

引入

 <modal-block
            :isShow="true"
            :title="‘123‘"
            :width="800"
            :WarnMsg="‘WarnMsg‘"
        >
            <div slot="content">123</div>
        </modal-block>



import ModalBlock from  ‘../public/ModalBlock‘;

      components: {
          
            ModalBlock
        },