Я пытаюсь реализовать функцию всплывающего окна для одного из своих мобильных приложений, где мне нужно всплывающее окно со стрелкой на значке разных игроков и отображать информацию. игрока в поповере. для этого после некоторых исследований и разработок я обнаружил, что могу использовать этот плагин nativescript-popup. Но я не вижу всплывающего окна, когда пытаюсь его реализовать. Вот мои коды. Это не дает никаких ошибок, но и не открывает всплывающих окон.
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>
Подскажите, пожалуйста, что я делаю не так? Любая помощь будет оценена по достоинству.
Примечания: После обновления кода функции openPopup () ее работа и всплывающее окно открывается корректно. Как я могу использовать его напрямую с компонентом Vue (Test.vue) вместо создания представления внутри функции?
