首页 > 其他 > 详细

iview $modal 的封装

时间:2018-07-24 16:30:57      阅读:636      评论:0      收藏:0      [点我收藏+]
<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
        },

  

 

iview $modal 的封装

原文:https://www.cnblogs.com/haonanya/p/9360504.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!