Open hsz1273327 opened 3 months ago
{ ... "dependencies": { "@nativescript-community/ui-popover": "^0.1.15", "@nativescript/core": "~8.6.2", "nativescript-vue": "3.0.0-beta.11" }, "devDependencies": { "@nativescript/android": "8.6.2", "@nativescript/ios": "8.6.3", "@nativescript/tailwind": "~2.0.1", "@nativescript/types": "~8.6.1", "@nativescript/webpack": "~5.0.0", "@types/node": "~17.0.21", "tailwindcss": "^3.1.8", "typescript": "^5.2.2" } }
<template> <Frame> <Page actionBarHidden="true"> <ListView ref="collection" height="100%" width="100%" separatorColor="transparent" :items="itemList" colWidth="50%" rowHeight="100"> <template #default="{ item }"> <StackLayout :backgroundColor="item.color" height="100" @tap="show"> <Label :text="item.name" /> </StackLayout> </template> </ListView> </Page> </Frame> </template> <script lang="ts" setup> import { ref } from 'nativescript-vue' import { EventData, StackLayout } from "@nativescript/core" // import { usePopover } from "../utils/popover" import { usePopover } from '@nativescript-community/ui-popover/vue3' import ColorHelp from '../components/ColorHelp.vue' const { showPopover }=usePopover() interface Card { name: string color: string } const itemList = ref<Card[]>([ { name: 'TURQUOISE', color: '#1abc9c' }, { name: 'EMERALD', color: '#2ecc71' }, { name: 'PETER RIVER', color: '#3498db' }, { name: 'AMETHYST', color: '#9b59b6' }, { name: 'WET ASPHALT', color: '#34495e' }, { name: 'GREEN SEA', color: '#16a085' }, { name: 'NEPHRITIS', color: '#27ae60' }, { name: 'BELIZE HOLE', color: '#2980b9' }, { name: 'WISTERIA', color: '#8e44ad' }, { name: 'MIDNIGHT BLUE', color: '#2c3e50' }, { name: 'SUN FLOWER', color: '#f1c40f' }, { name: 'CARROT', color: '#e67e22' }, { name: 'ALIZARIN', color: '#e74c3c' }, { name: 'CLOUDS', color: '#ecf0f1' }, { name: 'CONCRETE', color: '#95a5a6' }, { name: 'ORANGE', color: '#f39c12' }, { name: 'PUMPKIN', color: '#d35400' }, { name: 'POMEGRANATE', color: '#c0392b' }, { name: 'SILVER', color: '#bdc3c7' }, { name: 'ASBESTOS', color: '#7f8c8d' } ]); async function show(evt: EventData) { let anchor = evt.object as StackLayout let color = anchor.backgroundColor try { await showPopover(ColorHelp, { anchor: anchor, props: { "color": color } }) } catch (error) { console.log(`get error ${error.message}`) } } </script>
click the StackLayout will get error Maximum call stack size exceeded on ios. but on android every thing works.
StackLayout
Maximum call stack size exceeded
@hsz1273327 please share a full zip or github repro example
platform
version
how to recreate the issue
phenomenon
click the
StackLayout
will get errorMaximum call stack size exceeded
on ios. but on android every thing works.