看不到 nativescript-vue popup #ref-nativescript-popup 插件

Posted 2023-04-13

【中文标题】看不到 nativescript-vue popup #ref-nativescript-popup 插件

【英文标题】：Unable to see nativescript-vue popup #ref- nativescript-popup plugin

【发布时间】：2019-07-04 14:11:10

【问题描述】：

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

【参考方案1】：

这个插件没有对 Vue 的明确支持，所以你不能传递 Test 我猜是 Vue 组件，你必须传递一个 N View 或原生视图实例。

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

Playground Sample

【讨论】：

是的，Test 是一个 vue 组件。所以你能告诉我如何传递视图或本机视图实例。它就像加载组件，给 ref 然后像上面的按钮 ref 一样使用它？

我已经添加了一个注释，它正在工作，所以你能帮忙吗？ @manoj

在代码中看起来有点大，但感谢您的帮助。如果有其他捷径，请稍后在这里写。

它并不长，与原来的内容相比几乎没有 4 行。创建实例、挂载和销毁。仅此而已。

是的，它肯定比以前缩短了，但我在想是否有类似内联函数的东西，我们可以通过传递组件或类似的东西来加载 nativeView。现在这太棒了，所以没有问题。 :)