vue popup

vue-popup

Vue 2.x Right-click menu component

characteristic:

• Dynamically calculate pop-up box position
• Edge detection to ensure that the edge of the pop-up frame does not exceed the view area
• A single pop-up can match multiple trigger elements (multiple elements are written under the same template)

Install

CDN

 < script src =" //cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js " > </ script >

NPM

npm install @xunlei/vue-popup --save

use

First, you need to register the plugin.

 import Vue from 'vue'
import VuePopup from '@xunlei/vue-popup'

Vue . use ( VuePopup )

Use popup component in your .vue file.

 < template >
  < div >
    < popup ref =" popup1 " :display.sync =" showPop " >
      < h3 >标题</ h3 >
      < p >这是一段内容。 </ p >
    </ popup >
    < a v-popup:popup1 href =" javascript:; " >展示弹出框</ a >
  </ div >
</ template >

< script >
export default {
  data ( ) {
    return {
      showPop : false
    }
  }
}
</ script >

Add a ref reference on your popup component and use the v-popup directive to map the button to the popup box. display feature is used to configure whether the pop-up box is visible.

Here is a simple online example.

interface

Prop

Attribute name	describe	type	Optional value	default value
append-to-body	Put it under body	Boolean	-	true
arrow-class	Arrow's class	String	-	-
Direction	Pop-up box direction	String	top/topStart/topEnd/right/rightStart/rightEnd/bottom/bottomStart/bottomEnd/left/leftStart/leftEnd	bottom
display (.sync)	Is it visible	Boolean	-	false
padding	Spacing between pop-up box and trigger element	Number	-	0
trigger	The event type that triggers the pop-up box	String	hover / focus / click	hover
scroll-show	Is the pop-up box visible when the page is scrolling	Boolean	-	true

event

Event name	describe	Callback parameters
show	Pop-up box display event	value
Hide	Pop-up box hides events	value

instruction

v-popup

• Description: Directives need to be added to the element that triggers the pop-up box.

• parameter:

  • popupRef (required) - Used to match specific popup boxes.

• type:

  • any (optional) - Callback parameter passed in when the event is triggered.

• Example:

 < popup
  ref =" popup1 "
  :display.sync =" showPop "
  @show =" handleShow "
  @hide =" handleHide " >
</ popup >
< a v-popup:popup1 =" val " > </ a >

< scirpt >
export default {
  ...
  methods: {
    handleShow (val) { },
    handleHide (val) { }
  }
}
</ script >

style

The pop-up component will only add necessary styles and classes, such as top, left... The specific style needs to be given by the user.

When the pop-up box changes direction, the following four classes will be added to the root element of the pop-up box to match styles in different directions.

• When the popup box is above the trigger element: popup-top
• When the pop-up box is below the trigger element: popup-bottom
• When the pop-up box is triggered to the left of the element: popup-left
• When the pop-up box is triggered to the right of the element: popup-right

Build steps

 # clone the project repo
git clone https://github.com/beyoursun/vue-popup.git

# install dependencies
cd vue-popup && npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

License

MIT