Popover Component For Vue 3 – popper

Description:

A simple yet customizable and themeable popover component for Vue 3. Based on the known PopperJS library.

How to use it:

1. Import and register the component.

import { defineComponent } from "vue";
import Popper from "vue3-popper";
export default defineComponent({
  components: {
    Popper,
  },
});

2. Add the popover component to the template.

<template>
  <Popper>
    <button>Click me</button>
    <template #content>
      <div>This is the Popper content</div>
    </template>
  </Popper>
</template>

3. Available props to customize the popover component.

/**
 * Preferred placement (the "auto" placements will choose the side with most space.)
 */
placement: {
  type: String,
  default: "bottom",
  validator: function(value) {
    return [
      "auto",
      "auto-start",
      "auto-end",
      "top",
      "top-start",
      "top-end",
      "bottom",
      "bottom-start",
      "bottom-end",
      "right",
      "right-start",
      "right-end",
      "left",
      "left-start",
      "left-end",
    ].includes(value);
  },
},
/**
 * Disables automatically closing the popover when the user clicks away from it
 */
disableClickAway: {
  type: Boolean,
  default: false,
},
/**
 * Offset in pixels along the trigger element
 */
offsetSkid: {
  type: String,
  default: "0",
},
/**
 * Offset in pixels away from the trigger element
 */
offsetDistance: {
  type: String,
  default: "12",
},
/**
 * Trigger the popper on hover
 */
hover: {
  type: Boolean,
  default: false,
},
/**
 * Manually open/close the Popper, other events are ignored if this prop is set
 */
show: {
  type: Boolean,
  default: null,
},
/**
 * Disables the Popper. If it was already open, it will be closed.
 */
disabled: {
  type: Boolean,
  default: false,
},
/**
 * Open the Popper after a delay (ms).
 */
openDelay: {
  type: [Number, String],
  default: 0,
},
/**
 * Close the Popper after a delay (ms).
 */
closeDelay: {
  type: [Number, String],
  default: 0,
},
/**
 * The z-index of the Popper.
 */
zIndex: {
  type: [Number, String],
  default: 9999,
},
/**
 * Display an arrow on the popper
 */
arrow: {
  type: Boolean,
  default: false,
},
/**
 * Stop arrow from reaching the edge of the popper
 */
arrowPadding: {
  type: String,
  default: "0",
},
/**
 * If the Popper should be interactive, it will close when clicked/hovered if false
 */
interactive: {
  type: Boolean,
  default: true,
},
/**
 * Lock the Popper into place, it will not flip dynamically when it runs out of space if true
 */
locked: {
  type: Boolean,
  default: false,
},
/**
 * If the content is just a simple string, it can be passed in as a prop
 */
content: {
  type: String,
  default: null,
},

4. Events.

  • @open:popper
  • @close:popper

Preview:

Popover Component For Vue 3 - popper

Changelog:

v1.3.0 (10/05/2021)

  • Add the locked prop to disable flipping the Popper.

v1.2.1 (08/11/2021)

  • Updated for Vue version 3.2.x

v1.2.0 (07/27/2021)

  • Add zIndex prop to set the z-index of the Popper

v1.1.0 (07/22/2021)

  • Add show prop to manually control the Popper

v1.0.0 (07/15/2021)

  • Updated props

v0.5.0 (07/14/2021)

  • Provide isOpen as a scoped slot property

v0.4.0 (07/09/2021)

  • Proper reactions when slot content is defined/undefined
  • Fix “close slot property is undefined” error

v0.3.0 (07/08/2021)

  • Added more props.

v0.2.3 (07/07/2021)

  • Bugfix

Download Details:

Author: valgeirb

Live Demo: https://valgeirb.github.io/vue3-popper/

Download Link: https://github.com/valgeirb/vue3-popper/archive/refs/heads/main.zip

Official Website: https://github.com/valgeirb/vue3-popper

Install & Download:

# Yarn
$ yarn add vue3-popper

# NPM
$ npm i vue3-popper --save

You Might Be Interested In:

Tags:

Add Comment