Question

我正在尝试为我的一个移动应用程序实现弹出式窗口功能，在该应用程序中我需要在不同播放器图标上带有箭头的弹出式窗口并显示信息。弹窗中的玩家的身影。为此，经过一些研发，我发现我可以使用此插件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）一起使用它，而不是在函数内部创建视图？

Answer 1

此插件没有对Vue的明确支持，因此您不能传递Test（我猜是Vue组件），您必须传递{N} View或本机视图实例。

编辑：您可以实用地创建Vue组件实例，并将根元素的nativeView传递给弹出窗口。

Playground Sample

无法看到nativescript-vue popup＃ref- nativescript-popup插件

1 个答案: