diff --git a/README.md b/README.md
index 9e97fd5..2e3d816 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,7 @@ export default defineComponent({
| 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 |
diff --git a/example/src/examples/Basic.vue b/example/src/examples/Basic.vue
index b58b15f..18aad91 100644
--- a/example/src/examples/Basic.vue
+++ b/example/src/examples/Basic.vue
@@ -1,11 +1,16 @@
Basic Example
{{ selections }}
+
+ Wheel Speed:
+
+
@@ -64,17 +69,13 @@ interface Option {
value: string;
}
-interface State {
- options: Option[][];
- selections: (string | null)[];
-}
-
export default defineComponent({
name: 'Basic',
setup() {
- const state = reactive({
+ const state = reactive({
options: mockOptions,
- selections: [],
+ selections: [] as string[],
+ wheelSpeed: 1
});
function random(number: number) {
return Math.floor(Math.random() * number);
@@ -83,7 +84,6 @@ export default defineComponent({
return typeof option === "string" ? option : option.value;
}
function onClickRandom() {
- state.selections
state.selections = state.options.map(option => {
return getValue(option[random(option.length)]);
})
diff --git a/example/src/examples/Custom.vue b/example/src/examples/Custom.vue
index e6faf0b..f0cf8ac 100644
--- a/example/src/examples/Custom.vue
+++ b/example/src/examples/Custom.vue
@@ -1,6 +1,7 @@
Custom Example
{{ selections }}
+
+ Wheel Speed:
+
+
@@ -83,11 +88,12 @@ export default defineComponent({
const state = reactive({
options: mockOptions,
selections: ['a2','b2','c1'],
+ wheelSpeed: 1
});
function random(number: number) {
return Math.floor(Math.random() * number);
}
- function getValue(option) {
+ function getValue(option: any) {
return typeof option === "string" ? option : option.value;
}
function onClickRandom() {
diff --git a/package.json b/package.json
index c464cf0..58b5728 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue3-scroll-picker",
- "version": "0.1.14",
+ "version": "0.1.15",
"private": false,
"description": "Vue 3 scroll picker plugin.",
"author": "hj ",
diff --git a/src/ScrollPicker.vue b/src/ScrollPicker.vue
index a79ebb1..2759e3d 100644
--- a/src/ScrollPicker.vue
+++ b/src/ScrollPicker.vue
@@ -131,6 +131,10 @@ export default defineComponent({
inactiveStyle: {
default: "",
type: String
+ },
+ wheelSpeed: {
+ default: 1,
+ type: Number
}
},
emits: ["update:modelValue"],
@@ -263,7 +267,7 @@ export default defineComponent({
preventDefault(event);
const content = getContent(event);
if (content) {
- content.scrollTop += (event as WheelEvent).deltaY;
+ content.scrollTop += (event as WheelEvent).deltaY * props.wheelSpeed;
const { columnIndex, rowIndex } = getColumnRowIndex(content);
const newSelections = getSelections(columnIndex, rowIndex);
setSelections(newSelections);