Modal

Basic usage

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

    <mu-modal :visible.sync="modal">
        <template slot="body">
            <span>This is modal...</span>
        </template>
    </mu-modal>
</div>
1
2
3
4
5
6
7
8
9
export default {
    data() {
        return {
            modal: false,

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

With theme

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

    <mu-modal :visible.sync="modal" :full-size="false">
        <template slot="body">
            <span>This is modal...</span>
        </template>
    </mu-modal>
</div>
1
2
3
4
5
6
7
8
9
export default {
    data() {
        return {
            modal: false,
        }
    },
        methods: {
        openModal() {
            this.modal = !this.modal;
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <el-button @click="openModal">Show modal</el-button>

    <mu-modal :visible.sync="modal" :can-close="false">
        <template slot="body">
            <p>This is modal...</p>
            <el-button @click="openModal">Close modal</el-button>
        </template>
    </mu-modal>
</div>
1
2
3
4
5
6
7
8
9
10
export default {
    data() {
        return {
            modal: false,
        }
    },
        methods: {
        openModal() {
            this.modal = !this.modal;
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11
12

Attributes

Attribute Description Type Accepted Values Default
visible.sync Modal toggle String true / false false
customStyle Custom style for modal content String any style object {}
beforeClose Action before close modal Boolean () => {} undefined
fullSize Modal size Function true / false true
canClose Modal can be closed Boolean true / false true