@amirafa/vue3-pull-to-refresh NPM

Vue 3 Pull-to-Refresh

A Vue 3 package that enables a pull-to-refresh experience for touch screens.

Installation

To install the package, use the following command:

npm i @amirafa/vue3-pull-to-refresh

Usage

Props

Prop	Type	Default	Description
`distance`	`Number`	`50`	Specifies the height of pulling.
`duration`	`Number`	`2000`	Delay (in milliseconds) since the refresh action.
`size`	`Number`	`32`	Size of the icon (in pixels).
`coefficient`	`Number`	`2.5`	Power of reaching the distance.
`noreload`	`Boolean`	`false`	Reload window on refresh.
`options`	`Object`	`{}`	Customization options for icon color and background color.

Options Object Properties

Property	Type	Default	Description
`color`	`String`	`#000`	The color of the icon.
`bgColor`	`String`	`#fff`	The background color of the icon or element.

Emit

Emit	Description
`onrefresh`	`Emit after refreshing`

Slot

Slot	Description
`default`	`Customized Element for icon`

Example Usage

Here's an example of how to use the vue3-pull-to-refresh component in your Vue 3 project:

<template>
  <Vue3PullToRefresh 
    :distance="50" 
    :duration="2000" 
    :size="32" 
    noreload
    :options="{ color: '#111', bgColor: '#fff' }"
    @onrefresh="()=>{console.log('refreshed')}"
  />
</template>

<script setup lang="ts">
//@ts-ignore
import Vue3PullToRefresh from '@amirafa/vue3-pull-to-refresh';
//import '@amirafa/vue3-pull-to-refresh/dist/style.css'; deprecated
</script>

Note on `@ts-ignore`

To prevent TypeScript type-checking errors when importing third-party libraries that may lack complete type definitions, you can use // @ts-ignore above the import statement. This directive tells the TypeScript compiler to ignore the next line, avoiding potential type-related warnings or errors.