27 lines
743 B
Vue
27 lines
743 B
Vue
<template>
|
|
<div
|
|
class="pull-indicator fixed left-1/2 -translate-x-1/2 z-50 transition-all duration-200"
|
|
:style="{ top: `${Math.max(pullDistance - 40, -40)}px`, opacity: pullDistance / threshold }"
|
|
>
|
|
<div
|
|
class="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center"
|
|
:class="{ 'animate-spin': isRefreshing }"
|
|
>
|
|
<i
|
|
class="pi text-neutral-600"
|
|
:class="isRefreshing ? 'pi-spinner' : (pullDistance >= threshold ? 'pi-check' : 'pi-arrow-down')"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const emit = defineEmits<{
|
|
refresh: []
|
|
}>()
|
|
|
|
const { pullDistance, isRefreshing, threshold } = usePullToRefresh(async () => {
|
|
emit('refresh')
|
|
})
|
|
</script>
|