vue-slim-popup

English | 简体中文

🌰 Example

Demo

Demo Source Code

🚀 QuickStart

1. Install

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

1. Import

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

1. Usage. Please refer to the Demo Source Code

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

🔌 API

Props

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

Events

Name	Description	Parameters
maskClick	mask area clicked	undefined
popupClick	popup area self clicked	undefined

---

😉😘 If it is helpful to you，please encourage me with a ⭐️Star ~

Changelog

License

MIT

Copyright (c) 2018-present, momoko