Lifecycle events
The popover ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like onInit, onOpen, onPosition ... will be triggered.
For a complete list of events go to the documentation See available lifecycle events →
Demo
<MbscSelect
@close="handleClose"
@destroy="handleDestroy"
@init="handleInit"
@open="handleOpen"
@position="handlePosition"
/>
Event log
Welcome to our website!
Have fun navigating through the demos.
SFC JSSFC TS
<script setup>
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const buttonRef = ref(null)
const isPopupOpen = ref(false)
const myAnchor = ref()
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
function handleClose() {
isPopupOpen.value = false
// Your custom event handler goes here
}
function handleDestroy() {
// Your custom event handler goes here
}
function handleInit() {
// Logic running on component init
}
function handleOpen() {
// Your custom event handler goes here
}
function handlePosition() {
// Logic for component positioning
}
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
</div>
<MbscPopup
display="anchored"
:anchor="myAnchor"
:showOverlay="false"
:isOpen="isPopupOpen"
:buttons="['ok', 'cancel']"
@close="handleClose"
@destroy="handleDestroy"
@init="handleInit"
@open="handleOpen"
@position="handlePosition"
>
<div class="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="Logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style><script setup lang="ts">
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isPopupOpen = ref<boolean>(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
function handleClose() {
isPopupOpen.value = false
// Your custom event handler goes here
}
function handleDestroy() {
// Your custom event handler goes here
}
function handleInit() {
// Logic running on component init
}
function handleOpen() {
// Your custom event handler goes here
}
function handlePosition() {
// Logic for component positioning
}
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
</div>
<MbscPopup
display="anchored"
:anchor="myAnchor"
:showOverlay="false"
:isOpen="isPopupOpen"
:buttons="['ok', 'cancel']"
@close="handleClose"
@destroy="handleDestroy"
@init="handleInit"
@open="handleOpen"
@position="handlePosition"
>
<div class="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="Logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style>