Vue-slim-popup NPM

vue-slim-popup

yarn add vue-slim-popup # OR npm i -S vue-slim-popup

// *.vue
import SlimPopup from 'vue-slim-popup'
export default {
  /* ... */
  components: {
    SlimPopup,
  },
  /* ... */
}

  <SlimPopup :show.sync="show">
    <!-- this is a slot, here you can place any element -->
  </SlimPopup>

Name	Description	Type	Default
show	.sync	Boolean	false
hideOnMaskClick	click on the mask to hide the popup	Boolean	false
forceRenderOnShow	force render in the popup show	Boolean	false
maskTransition	mask transition	String	slim-fade
popupTransition	popup transition. Optional: 'slim-scale-center', 'slim-zoom-center', 'slim-slide-top', 'slim-slide-bottom', 'slim-slide-left', 'slim-slide-right'. If it is empty, select the default animation according to popupPosition	String	null
maskClass	mask class	Array	null
popupClass	popup class	Array	null
maskStyle	mask style	Object	null
popupStyle	popup style	Object	null
popupPosition	popup position. Optional: 'center', 'top', 'bottom', 'left', 'right'	String	center
preventMaskTouchmove	prevent touchmove event in the mask	Boolean	true
preventPopupTouchmove	prevent touchmove event in the popup(it will cause the popup area to unable to scroll)	Boolean	true
preventBodyScroll	prevent body scroll, indirect blocking the effect of scrolling through(popup area can to sroll). Enable this option and disable preventPopupTouchmove, you can scroll the popup area while blocking the effect of scrolling through	Boolean	false