Popper

Popper is built on the third-party library popper.js. Refer to its documentation for configuration. All overlay components in the library are built on this base component. You can also create your own extensions.

Basic Usage

<template>
  <div style="width: 200px">
    <b-popper trigger="click" theme="light" :z-index="1000">
      <template #default>This is some contentThis is some contentThis is some content</template>
      <template #trigger>
        <b-button>Triggerpopper</b-button>
      </template>
    </b-popper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
</script>

Column Select

[
  {
    "name": "Name",
    "checked": false
  },
  {
    "name": "Age",
    "checked": false
  },
  {
    "name": "Phone",
    "checked": false
  },
  {
    "name": "Gender",
    "checked": false
  },
  {
    "name": "Address",
    "checked": false
  },
  {
    "name": "Remarks",
    "checked": false
  }
]

<template>
  <div>
    <div style="width: 200px">
      <b-popper
        trigger="click"
        theme="light"
        :show-arrow="false"
        :offset="4"
        placement="bottom-start"
        transition="zoom-in-top"
        popper-class="bin-select__popper"
        :gpu-acceleration="false"
      >
        <template #default>
          <div style="width: 120px">
            <div style="padding: 8px 10px 10px; border-bottom: 1px solid #eee">Select columns</div>
            <div v-for="(item, index) in list" :key="index" style="padding: 4px 8px">
              <b-checkbox v-model="item.checked">{{ item.name }}</b-checkbox>
            </div>
          </div>
        </template>
        <template #trigger>
          <b-button>Select columns</b-button>
        </template>
      </b-popper>
    </div>

    <pre>{{ list }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
  { name: 'Name', checked: false },
  { name: 'Age', checked: false },
  { name: 'Phone', checked: false },
  { name: 'Gender', checked: false },
  { name: 'Address', checked: false },
  { name: 'Remarks', checked: false }
])
</script>

Props

Parameter	Description	Type	Options	Default
v-model:visible	Whether the popper is visible	Boolean	—	false
trigger	Trigger mode	string	hover / click / focus	click
appendToBody	Append the overlay to body	Boolean	—	false
placement	Position of the popper	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	—
disabled	Disable the popper	Boolean	—	false
transition	Custom transition animation. After setting a custom animation, GPU acceleration must be disabled, otherwise it will not apply	string	—	fade-in-linear
gpu-acceleration	GPU acceleration for the default animation	Boolean	—	true
stop-popper-mouse-event	Whether to stop popper mouse events	Boolean	—	true
show-arrow	Whether to show arrow	Boolean	—	true
manual-mode	Whether to use manual control. When enabled, :visible must be set explicitly	Boolean	—	true
theme	Theme	string	dark or light	dark
show-after	Delay before showing, in milliseconds	number	—	0
close-delay	Delay before hiding, in milliseconds	number	—	0
offset	Position offset amount	Number	—	12
arrow-offset	Arrow offset	Number	—	5
class	Trigger element class	string	—	—
popper-class	Additional class for the popper element	string	—	—
popper-options	Additional popper options. See popper.js docs. Usually not needed	Object	—	—
z-index	Z-index level. Default is 2000. The dialog auto-increments. If set, it appends and then auto-increments	Number	—	0
style	Style for the popper element	Object	—	—

Slot

Name	Description
default	Popper content slot. Required. Can be extended for various business use cases
trigger	Trigger slot. Required. Must contain a single DOM element or component for attaching event listeners.