快要登頂了... 千萬別放棄!
Where there’s a will, there’s a way.
有志者事竟成。
倒數2天,就可以完成 30篇~
今日要講解 OverlayPanel ,一種可以在點擊按鈕或其他觸發事件後,浮動顯示在頁面上的 UI 元件,通常用來展示額外的內容或操作選項。
<template>
<div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op">
<!-- OverlayPanel 內部的內容 -->
</OverlayPanel>
</div>
<OverlayPanel ref="op">
.....
</OverlayPanel>
</template>
<script setup>
import { ref } from "vue";
const op = ref();
const members = ref([
{ name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
]);
const toggle = (event) => {
op.value.toggle(event);
}
</script>
以上是 OverlayPanel 簡單介紹~
明天見!