Skip to content

Commit d9e8618

Browse files
wan2landwan2land
committed
doc: update README
1 parent 330478e commit d9e8618

File tree

2 files changed

+50
-41
lines changed

2 files changed

+50
-41
lines changed

‎README.md

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,31 @@
99
<img alt="Language Typescript" src="https://img.shields.io/badge/language-Typescript-007acc.svg?style=flat-square" />
1010
</p>
1111

12-
iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also
13-
MouseWheel) and Touch.
12+
Vue Scroll Picker is an iOS-style scroll picker component for Vue 3. It supports all gestures, including mouse and touch interactions, ensuring a smooth and intuitive user experience.
1413

15-
If you are using vue 2, please refer to the
16-
[v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
14+
If you are using Vue 2, please refer to the [v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
1715

18-
[See Example](http://vue-scroll-picker.dist.be) ([sources](./example))
16+
[Live Demo](http://vue-scroll-picker.dist.be) ([source](./example))
17+
18+
## Features
19+
20+
- **TypeScript Support**: Uses generics for strict type checking and improved developer experience.
21+
- **Native-like Behavior**: Mimics `<select>` element behavior for consistency.
22+
- **Lightweight & Performant**: Minimal dependencies with optimized rendering.
1923

2024
## Installation
2125

2226
```bash
23-
npm i vue-scroll-picker
27+
npm install vue-scroll-picker
2428
```
2529

2630
## Usage
2731

28-
**Global Registration**
32+
Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.
33+
34+
### Global Registration
35+
36+
To register Vue Scroll Picker globally in your Vue application, import it in your main file and apply it as a plugin:
2937

3038
[Vue3 Global Registration Guide](https://v3.vuejs.org/guide/component-registration.html#global-registration)
3139

@@ -40,56 +48,57 @@ const app = createApp(); /* */
4048
app.use(VueScrollPicker); // export default is plugin
4149
```
4250

43-
**Local Registration**
51+
### Local Registration
52+
53+
To use Vue Scroll Picker in a specific component, import it and register it locally:
4454

4555
[Vue3 Local Registration Guide](https://v3.vuejs.org/guide/component-registration.html#local-registration)
4656

4757
```vue
48-
<template>
49-
<VueScrollPicker :options="options" />
50-
</template>
51-
<script>
58+
<script setup>
5259
import { VueScrollPicker } from 'vue-scroll-picker'
5360
54-
export default {
55-
components: {
56-
VueScrollPicker, // export VueScrollPicker is component
57-
},
58-
}
5961
</script>
62+
<template>
63+
<VueScrollPicker :options="options" />
64+
</template>
6065
<style src="vue-scroll-picker/dist/style.css"></style>
6166
```
6267

6368
## Options
6469

6570
### Props
6671

67-
| Name | Type | Default | Example |
68-
| ----------------- | :------------------------------------------------ | ------------ | ----------------------------------------------------------------------------------------- |
69-
| modelValue | `any` | `null` | |
70-
| placeholder | `string` | `null` | |
71-
| empty | `string` | `'No Items'` | |
72-
| options | `string[]`<br /> `{ name: string, value: any, disabled: boolean }[]` | `[]` | `["10KG", "20KG", "30KG"]`<br /> `[{value: 10, name: "10KG"}, {value: 20, name: "20KG"}]` |
73-
| dragSensitivity | `number` | `1.7` | |
74-
| touchSensitivity | `number` | `1.7` | |
75-
| scrollSensitivity | `number` | `1` | |
72+
Vue Scroll Picker accepts several props to customize its behavior:
73+
74+
| Prop | Type | Default | Description |
75+
|------|------|---------|-------------|
76+
| `modelValue` | `string \| number \| boolean \| null` | `undefined` | The selected value of the picker. |
77+
| `options` | `Array<{ name: string; value: any; disabled?: boolean }>` | `[]` | The list of options displayed in the picker. |
78+
| `emptyText` | `string` | `'No options available'` | Text displayed when there are no options available. |
79+
| `dragSensitivity` | `number` | `1.7` | Sensitivity of dragging interaction. |
80+
| `touchSensitivity` | `number` | `1.7` | Sensitivity of touch interaction. |
81+
| `wheelSensitivity` | `number` | `1` | Sensitivity of mouse wheel scrolling. |
7682

7783
### Events
7884

79-
| Name | Type |
80-
| ----------------- | :------------------------------------ |
81-
| update:modelValue | `(value: any) => void` |
82-
| start | `() => void` |
83-
| move | `(value: any) => void` |
84-
| end | `(value: any) => void` |
85-
| cancel | `() => void` |
86-
| wheel | `(value: any) => void` |
87-
| click | `(value: any, oldValue: any) => void` |
85+
Vue Scroll Picker emits several events to notify changes:
86+
87+
| Event | Payload | Description |
88+
|-------|---------|-------------|
89+
| `update:modelValue` | `string \| number \| boolean \| null` | Fired when the selected value changes. |
90+
| `start` | `void` | Fired when interaction starts. |
91+
| `move` | `string \| number \| boolean \| null` | Fired when the selection moves. |
92+
| `end` | `string \| number \| boolean \| null` | Fired when interaction ends. |
93+
| `cancel` | `void` | Fired when interaction is canceled. |
94+
| `wheel` | `string \| number \| boolean \| null` | Fired when using the mouse wheel. |
95+
| `click` | `string \| number \| boolean \| null` | Fired when the picker is clicked. |
8896

8997
### Slots
9098

91-
| Name | Prop | Default |
92-
| ----------- | :----------------------------------------- | ------------------- |
93-
| default | `{ option: { name: string, value: any } }` | `{{ option.name }}` |
94-
| placeholder | `{ text: string }` | `{{ placeholder }}` |
95-
| empty | `{ text: string }` | `No Items` |
99+
Vue Scroll Picker provides slots for custom rendering:
100+
101+
| Slot | Props | Description |
102+
|------|-------|-------------|
103+
| `default` | `{ option: { name: string; value: any; disabled?: boolean } }` | Custom rendering for each option. |
104+
| `empty` | `{ text: string }` | Custom rendering when no options are available. |

‎src/components/VueScrollPicker.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const emit = defineEmits<{
3939
4040
const props = withDefaults(
4141
defineProps<{
42-
modelValue: string | number | boolean | null | undefined
42+
modelValue: ScrollPickerValue | undefined
4343
options?: ScrollPickerOptionable<T>[]
4444
dragSensitivity?: number
4545
touchSensitivity?: number

0 commit comments

Comments
 (0)