Fix VSlider cannot drag (the1812#2892)

ZeroSkman · Jan 15, 2022 · 07b83db · 07b83db
1 parent cee9001
commit 07b83db
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/components/settings-panel/ComponentOption.vue b/src/components/settings-panel/ComponentOption.vue
@@ -55,7 +55,7 @@
       v-if="type === 'slider'"
       v-bind="option.slider"
       :value="value"
-      @change="valueChange($event)"
+      @change="debounceValueChange($event)"
     ></VSlider>
     <div v-if="type === 'unknown'" class="unknown-option-type">
       未知的选项类型
@@ -78,6 +78,11 @@ import { ComponentOption } from '../component'
 import { getDropdownItems } from './dropdown'
 import SwitchOptions from '../SwitchOptions.vue'
 
+function valueChange(newValue: unknown) {
+  const settings = this.settings as ComponentSettings
+  settings.options[this.name] = newValue
+  this.value = newValue
+}
 export default {
   name: 'ComponentOption',
   components: {
@@ -166,11 +171,8 @@ export default {
       settings.options[this.name] = numberValue
       this.value = numberValue
     },
-    valueChange(newValue: unknown) {
-      const settings = this.settings as ComponentSettings
-      settings.options[this.name] = newValue
-      this.value = newValue
-    },
+    debounceValueChange: lodash.debounce(valueChange, 200),
+    valueChange,
   },
 }
 </script>

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -28,7 +28,7 @@ declare global {
     bilibiliEvolved: ExternalApis
     [key: string]: any
   }
-  const unsafeWindow: Window
+  const unsafeWindow: Window & typeof globalThis
   const coreApis: CoreApis
   const dq: CoreApis['utils']['dq']
   const dqa: CoreApis['utils']['dqa']

diff --git a/src/ui/VSlider.vue b/src/ui/VSlider.vue
@@ -287,7 +287,7 @@ export default Vue.extend({
       ): Stopper {
         const listener0 = (e: MouseEvent | TouchEvent) => {
           e.preventDefault()
-          if (e instanceof MouseEvent) {
+          if (e instanceof MouseEvent || e instanceof unsafeWindow.MouseEvent) {
             listener(e.pageX)
           } else if (e.touches.length === 1) {
             listener(e.touches[0].pageX)
@@ -348,6 +348,7 @@ export default Vue.extend({
     background-color: #8882;
   }
   .thumb-container {
+    cursor: pointer;
     position: absolute;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
@@ -356,7 +357,6 @@ export default Vue.extend({
   .default-thumb {
     width: 16px;
     height: 16px;
-    cursor: pointer;
     @include round-corner(50%);
     background-color: var(--theme-color);
     box-shadow: 0 0 0 2px var(--theme-color-20);