Add example using this.$refs.aplayer properties.

[samuil4]

Hi,

I'm trying to use this.$refs.aplayer.currentSettings but as all elements in this this.$refs are html elements typescript gives me an error Property 'currentSettings' does not exist on type 'HTMLDivElement'.

<aplayer 
      ref="aplayer"
      :audio="audio" 
      :mini="playerConfig.mini"
      :loop="playerConfig.loop"
      :autoplay="playerConfig.autoplay"
      :theme="playerConfig.theme"
      :storageName="playerConfig.storageName"
      @canplay="playSong"
      @ended="playNextSong"></aplayer>
<script lang="ts">
...
playSong() {
    // Property 'currentSettings' does not exist on type 'HTMLDivElement'.
    const currentSettings= this.$refs.aplayer.currentSettings;
  }
...

[u3u]

You can refer to this file:

https://github.com/MoePlayer/vue-aplayer/blob/dd10c503001179dec4fed6f6644e50768a938e54/types/test.tsx#L1-L43

If you don't use vue-class-component you can use as to cast:

<template>
  <aplayer
    ref="aplayer"
    :audio="audio"
    :mini="playerConfig.mini"
    :loop="playerConfig.loop"
    :autoplay="playerConfig.autoplay"
    :theme="playerConfig.theme"
    :storageName="playerConfig.storageName"
    @canplay="playSong"
    @ended="playNextSong"
  ></aplayer>
</template>

<script lang="ts">
import { APlayer } from '@moefe/vue-aplayer';

export default {
  playSong() {
    const { currentSettings } = this.$refs.aplayer as APlayer;
  }
};
</script>