mt-vue2-modal

API Reference

$mtModal.showDefaultModal(options)

This is default modal method, we recommend to use custom modal to customize your need.

The API methods accepts these options:

componentAttrs: Set default modal style (width, height, color, etc.) and content

AttributeTypeDefaultDescription
widthString80vwSet default modal style width
maxWidthString600pxSet default modal style maxWidth
heightString60vhSet default modal style height
maxHeightString300pxSet default modal style maxHeight
themeColorString#ffdf5eSet default modal theme color
contentStringLoremDefault modal content
showCancelButtonBooleantrueshow cancel button
cancelButtonTextStringcancelcancel button text
submitButtonTextStringsubmitbutton text

overlay: Set default modal overlay (background, transition)

AttributeTypeDefaultDescription
backgroundStringrgba(0, 0, 0, .8)Set default modal style background
transitionNameStringmt-modal-overlay-fadeSet default modal transition name

modal: Set default modal body

AttributeTypeDefaultDescription
transitionNameStringmt-modal-overlay-slide-fadeSet default modal body transition name

example:

await this.$mtModal.showDefaultModal({
  componentAttrs: {
    width: '80vw',
    maxWidth: '600px',
    height: '60vh',
    maxHeight: '300px',
    themeColor: '#ffdf5e',
    content: 'content',
    showCancelButton: true,
    cancelButtonText: 'cancel',
    submitButtonText: 'submit',
  },
  overlay: {
    background: 'rgba(0, 0, 0, .8)',
    transitionName: 'mt-modal-overlay-fade',
  },
  modal: {
    transitionName: 'mt-modal-overlay-slide-fade',
  },
})

$mtModal.show(options)

This is custom modal method, use custom component and props to customize modal.

The API methods accepts these options:

AttributeTypeDefaultDescription
component(required)Vue componentnullPass custom component
componentAttrsObject{}Custom Props
overlayObject{ background: 'rgba(0, 0, 0, .8)', transitionName: 'mt-modal-overlay-fade' }Custom Overlay
modalObject{ transitionName: 'mt-modal-overlay-slide-fade' }Custom modal transition

example:

<script>
import customModal from './customModal.vue'

export default {
  async created() {
    const value = await this.$mtModal.show({
      component: customModal,
      componentAttrs: {
        text: 'something',
      },
      overlay: {
        background: 'rgba(0, 0, 0, .8)',
        transitionName: 'mt-modal-overlay-fade',
      },
      modal: {
        transitionName: 'mt-modal-overlay-slide-fade',
      },
    })

    console.log(value)
  },
}
</script>

customModal.vue:

<template>
  <button @click="$emit('closed', 'return value')">click</button>
</template>