IndexPage.vue

<!--
 * 设计
  -->
<script lang="ts">
export default {
  name: 'PAGE10',
};
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { list } from './config';

import { QMediaPlayer } from '@quasar/quasar-ui-qmediaplayer';
import MyPoems from './element/MyPoems.vue';

const show = ref(false);
const name = ref('');
const title = ref('');
const draggingFab = ref(false);
const btnPos = ref([18, 18]);
// const source = ref(require('./media/江上清风游.mp3'));
const isPlaying = ref(false);

const sources = ref([
  {
    src: require('./media/江上清风游.mp3'),
    type: 'audio/mp3',
  },
]);

onMounted(() => {
  //
});

function clickItem(data: any) {
  name.value = data.name;
  title.value = data.title;
  btnPos.value = [18, 18];
  show.value = true;
}
function goBack() {
  show.value = false;
  name.value = '';
  title.value = '';
}
function moveFab(ev: any) {
  draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
  btnPos.value = [btnPos.value[0] - ev.delta.x, btnPos.value[1] - ev.delta.y];
}

function onPaused() {
  isPlaying.value = false;
}
function onPlaying() {
  isPlaying.value = true;
}
</script>
<template>
  <div>
    <div v-if="show">
      <q-page-sticky position="bottom-right" :offset="btnPos" class="z-top">
        <q-btn
          :disable="draggingFab"
          v-touch-pan.prevent.mouse="moveFab"
          round
          color="white"
          text-color="primary"
          icon="bi-arrow-left"
          title="返回，按住可拖动"
          @click="goBack"
        />
      </q-page-sticky>
      <MyPoems v-if="name === 'MyPoems'" />
    </div>
    <div v-else class="q-pa-sm q-gutter-sm">
      <q-list dense>
        <q-item
          clickable
          active
          v-for="(item, index) in list"
          :key="index"
          @click="clickItem(item)"
        >
          <q-item-section>
            <q-item-label>{{ item.title }}</q-item-label>
            <q-item-label caption v-if="item.remark">
              {{ item.remark }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      <div>
        <!-- 
          :source="source"
          dense
          loop
          hide-volume-btn
          no-video
           style="
            border-radius: 20px;
            width: 100px;
            min-width: 100px !important;
            --mediaplayer-background: #cccc99;
            --mediaplayer-background-dark: #cccc99;
            --mediaplayer-color: #ffffff;
            --mediaplayer-color-dark: #ffffff;
          "
         -->
        <q-media-player
          type="audio"
          dense
          loop
          hide-volume-btn
          no-video
          :sources="sources"
          @paused="onPaused"
          @playing="onPlaying"
          style="
            border-radius: 20px;
            width: 100px;
            min-width: 100px !important;
            --mediaplayer-background: #cccc99;
            --mediaplayer-background-dark: #cccc99;
            --mediaplayer-color: #ffffff;
            --mediaplayer-color-dark: #ffffff;
          "
        >
          <template #play>
            <q-btn
              round
              flat
              :icon="
                isPlaying ? 'fa-solid fa-compact-disc' : 'bi-play-circle-fill'
              "
              :class="{ 'rotate-animate': isPlaying }"
              style="
                font-size: 1rem;
                padding: 4px;
                min-width: 40px;
                max-width: 40px;
                min-height: 40px;
                max-height: 40px;
              "
            />
          </template>

          <!-- <template #positionSlider> </template> -->
          <!-- <template #durationTime></template> -->
        </q-media-player>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotate-animate {
  animation: rotate 3s linear infinite;
}
</style>