Modal Universal

Basic usage

<div>
    <el-button @click="openModalNew">Show modal</el-button>

    <mu-modal-common :visible.sync="modalNew" :can-close="true">
        <template slot="headerTitle">
            <span>This is modal header-title...</span>
        </template>

        <template slot="headerSubtitle">
            <span>This is modal header-subtitle...</span>
        </template>

        <template slot="headerSubtitleGrayText">
            <span>This is modal header-subtitle gray...</span>
        </template>

        <template slot="body">
            <span>This is modal body...</span>
        </template>

        <template slot="footer">
            <span>This is modal footer...</span>
        </template>
    </mu-modal-common>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
    data() {
        return {
            modalNew: false,

        }
    },
        methods: {
        openModalNew() {
            this.modalNew = !this.modalNew;
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13

Attributes

Attribute Description Type Accepted Values Default
visible.sync ModalUniversal toggle Boolean true / false false
beforeClose Action before close modal Function () => {} undefined
canClose ModalUniversal can be closed Boolean true / false true