APlayer内部组件ts改造

src/views/api/aplayer/components/aplayer-thumbnail.vue

@@ -13,139 +13,121 @@
     </div>
   </div>
 </template>
-<script>
-  import IconButton from './aplayer-iconbutton.vue'
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import IconButton from './aplayer-iconbutton.vue'
 
-  export default {
-    components: {
-      IconButton,
-    },
-    props: {
-      pic: String,
-      theme: String,
-      playing: {
-        type: Boolean,
-        default: false,
-      },
-      enableDrag: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        hasMovedSinceMouseDown: false,
-        dragStartX: 0,
-        dragStartY: 0
-      }
-    },
-    computed: {
-      currentPicStyleObj () {
-        if (!this.pic) return {}
-        return {
-          backgroundImage: `url(${this.pic})`,
-          backgroundColor: this.theme
-        }
-      },
-    },
-    methods: {
-      onDragBegin (e) {
-        if (this.enableDrag) {
-          this.hasMovedSinceMouseDown = false
-          this.$emit('dragbegin')
-          this.dragStartX = e.clientX
-          this.dragStartY = e.clientY
-          document.addEventListener('mousemove', this.onDocumentMouseMove)
-          document.addEventListener('mouseup', this.onDocumentMouseUp)
-        }
-      },
-      onDocumentMouseMove (e) {
-        this.hasMovedSinceMouseDown = true
-        this.$emit('dragging', {offsetLeft: e.clientX - this.dragStartX, offsetTop: e.clientY - this.dragStartY})
-      },
-      onDocumentMouseUp (e) {
-        document.removeEventListener('mouseup', this.onDocumentMouseUp)
-        document.removeEventListener('mousemove', this.onDocumentMouseMove)
+const props = withDefaults(defineProps<{
+  pic?: string,
+  theme?: string,
+  playing: boolean
+  enableDrag: boolean
+}>(), {
+  playing: false,
+  enableDrag: false
+})
 
-        this.$emit('dragend')
-      },
-      onClick () {
-        if (!this.hasMovedSinceMouseDown) {
-          this.$emit('toggleplay')
-        }
-      }
-    }
+const emit = defineEmits(['dragbegin', 'dragging', 'dragend', 'toggleplay'])
+
+const hasMovedSinceMouseDown = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+
+const currentPicStyleObj = computed(() => {
+  if (!props.pic) return {}
+  return {
+    backgroundImage: `url(${props.pic})`,
+    backgroundColor: props.theme
   }
+})
+
+const onDragBegin = (e: MouseEvent) => {
+  if (props.enableDrag) {
+    hasMovedSinceMouseDown.value = false
+    emit('dragbegin')
+    dragStartX.value = e.clientX
+    dragStartY.value = e.clientY
+    document.addEventListener('mousemove', onDocumentMouseMove)
+    document.addEventListener('mouseup', onDocumentMouseUp)
+  }
+}
+const onDocumentMouseMove = (e: MouseEvent) => {
+  hasMovedSinceMouseDown.value = true
+  emit('dragging', {offsetLeft: e.clientX - dragStartX.value, offsetTop: e.clientY - dragStartY.value})
+}
+const onDocumentMouseUp = () => {
+  document.removeEventListener('mouseup', onDocumentMouseUp)
+  document.removeEventListener('mousemove', onDocumentMouseMove)
+  emit('dragend')
+}
+const onClick = () => {
+  if (!hasMovedSinceMouseDown.value) {
+    emit('toggleplay')
+  }
+}
 </script>
 
 <style lang="less" scoped>
-  @import "../less/variables";
-
-  .aplayer-float {
-    .aplayer-pic:active {
-      cursor: move;
-    }
+@import "../less/variables";
+.aplayer-float {
+  .aplayer-pic:active {
+    cursor: move;
   }
-
-  .aplayer-pic {
-    flex-shrink: 0;
-
-    position: relative;
-    height: @aplayer-height;
-    width: @aplayer-height;
-    background-image: url(../default.jpg);
-    background-size: cover;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    &:hover {
-      .aplayer-button {
-        opacity: 1;
-      }
-    }
+}
+.aplayer-pic {
+  flex-shrink: 0;
+  position: relative;
+  height: @aplayer-height;
+  width: @aplayer-height;
+  background-image: url(../default.jpg);
+  background-size: cover;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  &:hover {
     .aplayer-button {
-      position: absolute;
-      border-radius: 50%;
-      opacity: 0.8;
-      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      background: rgba(0, 0, 0, 0.2);
-      transition: all 0.1s ease;
-
-      .aplayer-fill {
-        fill: #fff;
-      }
-    }
-
-    .aplayer-play {
-      width: 26px;
-      height: 26px;
-      border: 2px solid #fff;
-      bottom: 50%;
-      right: 50%;
-      margin: 0 -15px -15px 0;
-      .aplayer-icon-play {
-        position: absolute;
-        top: 3px;
-        left: 4px;
-        height: 20px;
-        width: 20px;
-      }
-    }
-
-    .aplayer-pause {
-      width: 16px;
-      height: 16px;
-      border: 2px solid #fff;
-      bottom: 4px;
-      right: 4px;
-      .aplayer-icon-pause {
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        height: 12px;
-        width: 12px;
-      }
+      opacity: 1;
     }
   }
-
+  .aplayer-button {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.8;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.2);
+    transition: all 0.1s ease;
+    .aplayer-fill {
+      fill: #fff;
+    }
+  }
+  .aplayer-play {
+    width: 26px;
+    height: 26px;
+    border: 2px solid #fff;
+    bottom: 50%;
+    right: 50%;
+    margin: 0 -15px -15px 0;
+    .aplayer-icon-play {
+      position: absolute;
+      top: 3px;
+      left: 4px;
+      height: 20px;
+      width: 20px;
+    }
+  }
+  .aplayer-pause {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #fff;
+    bottom: 4px;
+    right: 4px;
+    .aplayer-icon-pause {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      height: 12px;
+      width: 12px;
+    }
+  }
+}
 </style>