Merge pull request #4 from HJ29/feature/2-wheel-speed

#2 wheel speed

Author: HJ29

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.<br>lower wheel speed, slower scroller                                                                                                                                                                                                                                                                             |
 
 ### Event
 | Name               | Description                |

example/src/examples/Basic.vue

@@ -1,11 +1,16 @@
 <template>
   <h3>Basic Example</h3 >
   <scroll-picker 
+    :wheel-speed="wheelSpeed"
     :options="options" 
     v-model="selections" />
   <div style="margin-top: 30px;">
     {{ selections }}
   </div>
+  <div style="padding-top: 30px;">
+    <span style="font-size: 14px; padding-right: 10px;">Wheel Speed:</span>
+    <input v-model="wheelSpeed">
+  </div>
   <button style="margin-top: 30px;" @click="onClickRandom">
     Random
   </button>
@@ -64,17 +69,13 @@ interface Option {
   value: string;
 }
 
-interface State {
-  options: Option[][];
-  selections: (string | null)[];
-}
-
 export default defineComponent({
   name: 'Basic',
   setup() {
-    const state = reactive<State>({
+    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)]);
       })

example/src/examples/Custom.vue

@@ -1,6 +1,7 @@
 <template>
   <h3>Custom Example</h3 >
   <scroll-picker 
+    :wheel-speed="wheelSpeed"
     style="background: white; height: 200px;"
     :options="options" 
     v-model="selections"
@@ -24,6 +25,10 @@
   <div style="margin-top: 30px;">
     {{ selections }}
   </div>
+  <div style="padding-top: 30px;">
+    <span style="font-size: 14px; padding-right: 10px;">Wheel Speed:</span>
+    <input v-model="wheelSpeed">
+  </div>
   <button style="margin-top: 30px;" @click="onClickRandom">
     Random
   </button>
@@ -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() {

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 <[email protected]>",

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);