Question

我正在尝试通过Android设备上的triniwiz/nativescript-youtubeplayer应用中的插件nativescript-vue在youtube播放器中进行全屏显示，但无法实现。

我有以下代码：

<template>
    <Page actionBarHidden="true" class="page" >
        <GridLayout orientation="vertical" width="100%" height="100%" columns="*" rows="*,auto">
            <StackLayout col="0" row="0" backgroundColor="#f8f8f8">
                <StackLayout backgroundColor="#44557f">
                    <Label :text="name" class="font-weight-bold"
                           color="#FFFFFF" padding="15" fontSize="20" textWrap="true"></Label>
                </StackLayout>

                <ScrollView orientation="vertical" height="100%">

                    <ScrollView orientation="vertical">
                        <StackLayout class="home-panel">
                            <YoutubePlayer ref="player" :src="videoLink.substring(17)" apiKey="**********" isFullScreen="true"/>
                        </StackLayout>
                    </ScrollView>
                </ScrollView>
            </StackLayout>
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player
            player.toggleFullscreen();
        }

    }
</script>

但是我收到一个错误提示

找不到
toggleFullscreen（）

Answer 1

当您通过Ref访问元素时，返回值将是Vue元素。您应该访问nativeView才能访问实际元素。

<script>
    export default {
        props: ['videoLink','name','id'],
        mounted() {
            let player = this.$refs.player.nativeView;
            player.toggleFullscreen();
        }

    }
</script>

nativescript-youtube应用程序中的nativescript-youtubeplayer全屏切换

1 个答案: