APlayer内部组件ts改造

2023-01-25 02:00:10 +08:00
parent 34b92fbd1a
commit b49bebf654
15 changed files with 688 additions and 849 deletions
@@ -2,26 +2,23 @@
  <img class="icon-svg" :src="svg" :style="style" />
 </template>

-<script>
-  const requireAssets = require.context('../assets', false, /\.svg$/)
-  const SVGs = requireAssets.keys().reduce((svgs, path) => {
-    const svgFile = requireAssets(path)
-    svgs[path.match(/^.*\/(.+?)\.svg$/)[1]] = svgFile
-    return svgs
-  }, {})
-  export default {
-    props: ['type'],
-    computed: {
-      svg () {
-        return SVGs[this.type] || {}
-      },
-      style () {
-        if (this.type === 'next') {
-          return {
-            transform: 'rotate(180deg)',
-          }
-        }
-      }
-    }
+<script lang="ts" setup>
+import { computed } from 'vue'
+const props = defineProps<{type: string}>()
+const requireAssets = require.context('../assets', false, /\.svg$/)
+const SVGs = requireAssets.keys().reduce((svgs: {[propName:string]: string}, path: string) => {
+  const svgFile = requireAssets(path)
+  const fileNameMatch = path.match(/^.*\/(.+?)\.svg$/)
+  if (fileNameMatch) {
+    svgs[fileNameMatch[1]] = svgFile
  }
+  return svgs
+}, {})
+
+const svg = computed(() => SVGs[props.type])
+const style = computed(() => {
+  if (props.type === 'next') {
+    return { transform: 'rotate(180deg)' }
+  }
+})
 </script>