选择声轨增加 滚轮事件

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
   name: 'choosePartName',
   props: {
     partListNames: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<any[]>,
       default: () => [],
     },
     partIndex: {
@@ -21,37 +21,41 @@ export default defineComponent({
   },
   emits: ['close'],
   setup(props, { emit }) {
-    // #9463 bug，未更换声轨点击确定不应该重新加载，现在会导致切换错误
-    const partIndexChanged = ref(false);
-    const { partListNames, partIndex } = toRefs(props)
-    let idx = partListNames.value.findIndex((item: any) => item.value === partIndex.value);
-    idx = idx > -1 ? idx : 0;
-    const selectIndex = ref(idx);
-    const columns = computed(() => {
-      return partListNames.value
-    })
-    // console.log(1111,partListNames.value, partIndex.value, selectIndex.value, columns.value, 999999)
-    /**
-     * 默认选中的
-     * picker组件，3.x的版本可以使用defaultIndex，4.x的版本只能使用v-model传递
-     * */ 
-    const selValues = ref([partIndex.value]);
+    const selValues = ref([props.partIndex]);
     const myPicker = ref();
-    onMounted(() => {
-			// console.log(myPicker.value,99999,selValues.value,props.partIndex)
-		});
-
     watch(
       () => toggleMusicSheet.show,
       () => {
         if (toggleMusicSheet.show) {
-          selectIndex.value = partIndex.value
-          selValues.value = [partIndex.value]
+          selValues.value = [props.partIndex]
         }
-        //console.log('声轨',selValues.value,partIndex.value,selectIndex.value)
       }
     );
-
+    watch(() => toggleMusicSheet.show, ()=>{
+        // 支持滚轮事件
+        if (toggleMusicSheet.show) {
+          nextTick(() => {
+            myPicker.value.$el.addEventListener('wheel', handleWheel)
+          })
+        } else {
+            myPicker.value.$el.removeEventListener('wheel', handleWheel)
+        }
+      },{immediate:true}
+    )
+    function handleWheel(e: WheelEvent){
+      e.preventDefault()
+      // 先停止 惯性滚动
+      myPicker.value.confirm()
+      const direction = e.deltaY > 0 ? 1 : -1
+      const targetObject = myPicker.value.getSelectedOptions(0)[0]
+      const index = props.partListNames.findIndex(
+          obj => obj == targetObject
+      )
+      const newIndex = index + direction
+      if (newIndex >= 0 && newIndex < props.partListNames.length) {
+        selValues.value = [props.partListNames[newIndex].value]
+      }
+    }
     return () => (
       <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer, styles[state.modeType]]}>
         <div class={[styles.head, "top_draging"]}>
@@ -63,27 +67,16 @@ export default defineComponent({
             <Picker
               ref={myPicker}
               class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
-              defaultIndex={props.partIndex}
               v-model={selValues.value}
               showToolbar={false}
-              columns={columns.value}
+              columns={props.partListNames}
               visible-option-num={5}
               option-height={"1.06666rem"}
-              onChange={(row) => {
-                console.log(1111,'选择的索引', row)
-                if (!partIndexChanged.value) partIndexChanged.value = true
-                selectIndex.value = row.selectedValues[0]
-              }}
             />
             <img src={ okBtn } class={styles.button} onClick={() => {
                 myPicker.value.confirm()
                 nextTick(()=>{
-                  // console.log(1111,selectIndex.value)
-                  if (partIndexChanged.value) {
-                    emit('close', selectIndex.value)
-                  } else {
-                    emit('close', partIndex.value)
-                  }
+                  emit('close', selValues.value[0])
                 })
               }
             }></img>