Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/HJ29/vue3-scroll-picker
https://github.com/HJ29/vue3-scroll-picker
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/HJ29/vue3-scroll-picker
- Owner: HJ29
- Created: 2020-09-27T09:16:41.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-23T12:25:46.000Z (over 3 years ago)
- Last Synced: 2024-07-15T05:03:30.838Z (4 months ago)
- Language: Vue
- Size: 1.47 MB
- Stars: 29
- Watchers: 1
- Forks: 11
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-3 - vue3-scroll-picker - A scroll picker component for Vue 3. (Packages)
README
# vue3-scroll-picker
Vue 3 scroll picker plugin.
### Demo
[Demo](https://hj29.github.io/vue3-scroll-picker/)
[Demo Code](https://github.com/HJ29/vue3-scroll-picker/tree/master/example/src/)
### Install
```bash
yarn add vue3-scroll-picker
npm i --save vue3-scroll-picker
```
### Register Global Component
```js
import { createApp } from 'vue';
import App from './App.vue'
import ScrollPicker from 'vue3-scroll-picker';
const app = createApp(App);
app.use(ScrollPicker);
app.mount('#app')
```
### Register Local Component
```js
import ScrollPicker from 'vue3-scroll-picker';
export default {
components: {
ScrollPicker,
},
};
```
### Example
```vue
```
```vue
import { defineComponent, reactive, toRefs } from 'vue';
const exampleOptions = [
[
{
label: "A1",
value: "a1"
},
{
label: "A2",
value: "a2"
},
],
[
{
label: "B1",
value: "b1"
},
{
label: "B2",
value: "b2"
},
],
];
export default defineComponent({
setup() {
const state = reactive({
options: exampleOptions,
selections: ['a2','b1'],
});
return {
...toRefs(state),
};
}
});
```
### Props
| Name | Type | Required | Default | Notes |
| ---------------------- | -------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| :options | string[][]
{ label: string; value: string }[][] | yes | [] | Options use can select.
label value type: label as display, value to emit
label value example: [ [ { label: 'A1', value: 'a1' }, { label: 'A2', value: 'a2' } ], [ { label: 'B1', value: 'b1' } ] ]
string type: same label and value
string type example: [ [ 'a1', 'a2' ], [ 'b1' ] ] |
| :valueModel \| v-model | string[] | yes | [] | Array value emit
Example: [ 'a2', 'b1' ] |
| active-style | string | no | '' | css (change active option style)style |
| inactive-style | string | no | '' | css (change inactive option style)style |
| active-class | string | no | '' | css class |
| inactive-class | string | no | '' | css class |
| wheel-speed | number | no | 1 | adjust mouse wheel speed with this value.
lower wheel speed, slower scroller |
### Event
| Name | Description |
| ------------------ | -------------------------- |
| @update:modelValue | event emit when use select |
### Slot
| Name | prop | Description |
| --------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| v-slot:option | active: boolean
item: string \| { label: string; value: string } | override option card |
| v-slot:center-overlay | | override center active option area, able to add seperator to active area |
| v-slot:top-overlay | | override top inactive option area, able to change top gradient color |
| v-slot:bottom-overlay | | override bottom inactive option area, able to change bottom gradient color |
## Project setup
```
yarn
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).