APlayer内部组件ts改造

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

@@ -14,12 +14,12 @@
         class="aplayer-dtime">{{secondToTime(stat.duration)}}</span>
       </div>
       <volume
-        v-if="!$parent.isMobile"
+        v-if="!isMobile"
         :volume="volume"
         :theme="theme"
         :muted="muted"
         @togglemute="$emit('togglemute')"
-        @setvolume="v => $emit('setvolume', v)"
+        @setvolume="(v: number) => $emit('setvolume', v)"
       />
       <icon-button
         class="aplayer-icon-mode"
@@ -36,112 +36,94 @@
       <icon-button
         class="aplayer-icon-menu"
         icon="menu"
-        :class="{ 'inactive': !$parent.showList }"
+        :class="{ 'inactive': !showList }"
         @click="$emit('togglelist')"
       />
     </div>
   </div>
 </template>
 
-<script>
-  import IconButton from './aplayer-iconbutton.vue'
-  import VProgress from './aplayer-controller-progress.vue'
-  import Volume from './aplayer-controller-volume.vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
+import IconButton from './aplayer-iconbutton.vue'
+import VProgress from './aplayer-controller-progress.vue'
+import Volume from './aplayer-controller-volume.vue'
+import { StatType } from '@/model/api/music'
 
-  export default {
-    components: {
-      IconButton,
-      VProgress,
-      Volume,
-    },
-    props: ['shuffle', 'repeat', 'stat', 'theme', 'volume', 'muted'],
-    computed: {
-      loadProgress () {
-        if (this.stat.duration === 0) return 0
-        return this.stat.loadedTime / this.stat.duration
-      },
-      playProgress () {
-        if (this.stat.duration === 0) return 0
-        return this.stat.playedTime / this.stat.duration
-      },
-    },
-    methods: {
-      secondToTime (second) {
-        if (isNaN(second)) {
-          return '00:00'
-        }
-        const pad0 = (num) => {
-          return num < 10 ? '0' + num : '' + num
-        }
+const props = defineProps<{
+  shuffle: boolean,
+  repeat: string,
+  stat: StatType,
+  theme: string
+  volume: number,
+  muted: boolean,
+  showList: boolean,
+  isMobile: boolean
+}>()
+const loadProgress = computed(() => {
+  if (props.stat.duration === 0) return 0
+  return props.stat.loadedTime / props.stat.duration
+})
+const playProgress = computed(() => {
+  if (props.stat.duration === 0) return 0
+  return props.stat.playedTime / props.stat.duration
+})
 
-        const min = Math.trunc(second / 60)
-        const sec = Math.trunc(second - min * 60)
-        const hours = Math.trunc(min / 60)
-        const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
-        return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
-      },
-    },
+const secondToTime = (second: number) => {
+  if (isNaN(second)) {
+    return '00:00'
   }
+  const pad0 = (num: number) => {
+    return num < 10 ? '0' + num : '' + num
+  }
+
+  const min = Math.trunc(second / 60)
+  const sec = Math.trunc(second - min * 60)
+  const hours = Math.trunc(min / 60)
+  const minAdjust = Math.trunc((second / 60) - (60 * Math.trunc((second / 60) / 60)))
+  return second >= 3600 ? pad0(hours) + ':' + pad0(minAdjust) + ':' + pad0(sec) : pad0(min) + ':' + pad0(sec)
+}
 </script>
 
 <style lang="less" scoped>
-
-  .aplayer-controller {
+.aplayer-controller {
+  display: flex;
+  align-items: center;
+  position: relative;
+  .aplayer-time {
     display: flex;
     align-items: center;
     position: relative;
-
-    .aplayer-time {
-      display: flex;
-      align-items: center;
-      position: relative;
-      height: 17px;
-      color: #999;
-      font-size: 11px;
-      padding-left: 7px;
-
-      .aplayer-volume-wrap {
-        margin-left: 4px;
-        margin-right: 4px;
+    height: 17px;
+    color: #999;
+    font-size: 11px;
+    padding-left: 7px;
+    .aplayer-volume-wrap {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+    .aplayer-icon {
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-left: 4px;
+      &.inactive {
+        opacity: .3;
       }
-
-      .aplayer-icon {
-        cursor: pointer;
-        transition: all 0.2s ease;
-        margin-left: 4px;
-
-        &.inactive {
-          opacity: .3;
-        }
-
-        .aplayer-fill {
-          fill: #666;
-        }
-
-        &:hover {
-          .aplayer-fill {
-            fill: #000;
-          }
-        }
-
-        &.aplayer-icon-menu {
-          display: none;
-        }
+      &.aplayer-icon-menu {
+        display: none;
       }
-      .aplayer-volume-wrap + .aplayer-icon {
-        margin-left: 0;
+    }
+    .aplayer-volume-wrap + .aplayer-icon {
+      margin-left: 0;
+    }
+    &.aplayer-time-narrow {
+      .aplayer-icon-mode {
+        display: none;
       }
-
-      &.aplayer-time-narrow {
-        .aplayer-icon-mode {
-          display: none;
-        }
-
-        .aplayer-icon-menu {
-          display: none;
-        }
+      .aplayer-icon-menu {
+        display: none;
       }
     }
   }
-
+}
 </style>