我已经创建了一个组件,我想用它来 Select 一名球员.可以有两个不同的玩家,我试图让每个玩家调用不同的函数.
但是,当我在任一组件上 Select 一个选项时,IS总是调用seltP1函数.
App.svelte
:
<script lang="ts">
import SwapIcon from '~icons/tabler/arrows-diff';
import PlayerSelector from '../components/PlayerSelector.svelte';
import type { AutocompleteOption } from '@skeletonlabs/skeleton';
function selectP1(e: CustomEvent<AutocompleteOption>): void {
console.log('P1 is ' + e.detail.value);
}
function selectP2(e: CustomEvent<AutocompleteOption>): void {
console.log('P2 is ' + e.detail.value);
}
</script>
<div class="container h-1/5 w-3/4 mx-auto flex justify-between items-center">
<PlayerSelector on:selection={(e) => selectP1(e)} />
<button type="button" class="btn-icon variant-filled-primary"><SwapIcon /></button>
<PlayerSelector on:selection={(e) => selectP2(e)} />
</div>
PlayerSelector.svelte
:
<script lang="ts">
import {
Autocomplete,
type AutocompleteOption,
type PopupSettings
} from '@skeletonlabs/skeleton';
import { popup } from '@skeletonlabs/skeleton';
let popupSettings: PopupSettings = {
event: 'focus-click',
target: 'popupAutocomplete',
placement: 'bottom'
};
let player: string = '';
const players: AutocompleteOption[] = [
{ label: 'John Smith', value: 'JSmith' },
{ label: 'Tom Smith', value: 'TSmith' },
{ label: 'Joe Jones', value: 'JJones' }
];
</script>
<div class="card w-3/4 max-w-sm max-h-48 p-4 overflow-y-auto">
<input
class="input autocomplete p-1"
type="search"
name="autocomplete-search"
bind:value={player}
placeholder="Search..."
use:popup={popupSettings}
/>
<div data-popup="popupAutocomplete">
<Autocomplete bind:input={player} options={playerList} on:selection />
</div>
</div>
不管我更新哪一个PlayerSelector
,它总是叫selectP1
.我想不出怎么才能让这件事像预期的那样奏效.
我从https://www.skeleton.dev/components/autocomplete开始进行自动完成设置