I am trying to implement popover functionality for one of my mobile app where I need popover with an arrow on different players icon and display info. of a player in a popover. for this after some R & D, I found that I can use this plugin nativescript-popup. But I am unable to see a popup when I try to implement it. Here are my codes. It's not giving any error but it's not opening any popup too.
Home.vue
<template>
<Page actionBarHidden="true">
<Button @tap="openPopup" ref="btn" style="width:100;height:40;"/>
</Page>
</template>
<script>
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { Label } from 'tns-core-modules/ui/label';
import { ScrollView } from 'tns-core-modules/ui/scroll-view';
import { Popup } from 'nativescript-popup';
import Test from './Test'
export default {
components: {
Test
},
data() {
return {
popup: Popup
}
},
methods: {
_showPopup(source, view) {
this.popup = new Popup({
height: 30,
width: 80,
unit: '%',
elevation: 10,
borderRadius: 25
});
this.popup.showPopup(source, view).then(data => {
console.log('aaaa',data);
}).catch(error => {
console.log('aaaa',error);
});
},
openPopup(arg) {
//this._showPopup(this.$refs.btn.nativeView, Test);
const stack = new StackLayout();
stack.height = '100%';
const lbl = new Label();
lbl.text = 'Osei';
stack.addChild(lbl);
const sv = new ScrollView();
sv.content = stack;
this._showPopup(this.$refs.btn.nativeView, sv);
}
}
</script>
Test.vue
<template>
<StackLayout>
<Label text="NativeScript is the bomb.com" color="#ff4801" fontSize="22" textWrap="true"></Label>
</StackLayout>
</template>
Please suggest to me what am I doing wrong? Any help will be appreciated.
Notes: After openPopup() function code update, its working and popup is opening correctly. How can I use it with directly with the Vue component(Test.vue) instead of creating a view inside a function?
