Skip to content

💇‍♀️ A simple and elegant mobile popup component for Vue 2.x | 简洁易用的 vue 移动端弹出层/弹窗组件

License

Notifications You must be signed in to change notification settings

komomoo/vue-slim-popup

Repository files navigation

vue-slim-popup

English | 简体中文

✨ Feature

  • Solve the mobile terminal scroll penetration
  • Stability: Experienced various large-scale event page verification

🌰 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 ~

License

MIT

Copyright (c) 2018-present, komo

About

💇‍♀️ A simple and elegant mobile popup component for Vue 2.x | 简洁易用的 vue 移动端弹出层/弹窗组件

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published