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:

vue-aplayer/types/test.tsx

Lines 1 to 43 in dd10c50

	import Vue from 'vue';
	import Comopnent from 'vue-class-component';
	import APlayerPlugin, { APlayer } from './'; // eslint-disable-line
	Vue.use<APlayer.InstallOptions>(APlayerPlugin, {
	defaultCover: '',
	productionTip: true,
	});
	console.log(APlayer.version);
	@Comopnent
	export default class App extends Vue {
	readonly $refs!: {
	aplayer: APlayer;
	};
	async created() {
	const { aplayer } = this.$refs;
	console.log(aplayer.$refs.container);
	console.log(aplayer.media.currentTime);
	console.log(aplayer.media.duration);
	console.log(aplayer.media.paused);
	console.log(aplayer.currentMusic);
	console.log(aplayer.currentSettings);
	await aplayer.play();
	aplayer.toggle();
	aplayer.pause();
	aplayer.seek(0);
	aplayer.switch(0);
	aplayer.switch('');
	aplayer.skipBack();
	aplayer.skipForward();
	aplayer.showLrc();
	aplayer.hideList();
	aplayer.toggleLrc();
	aplayer.showList();
	aplayer.hideList();
	aplayer.toggleList();
	aplayer.showNotice('');
	aplayer.showNotice('', 1e3);
	aplayer.showNotice('', 1e3, 0.8);
	}

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>