安装上插件后显示样式有问题

[LiHongYu324]

请打开下面的链接后点击右上角 fork，然后放您的代码上去复现问题，最后将链接发出来，以便作者排查，谢谢。（Please open the link below and click on the top right corner fork, then put your code to duplicate the problem, and finally post the link for the author to check, thank you.）

https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?file=/src/App.vue&resolutionWidth=320&resolutionHeight=675

package.json

"dependencies": {
    "@liripeng/vue-audio-player": "^1.4.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.19.1",
    "echarts": "4.9.0",
    "element-ui": "2.15.6",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.2.1",
    "nprogress": "0.2.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "vue": "2.6.12",
    "vue-aliplayer": "^1.0.0",
    "vue-aplayer": "^1.6.1",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-json-viewer": "^2.2.14",
    "vue-meta": "2.4.0",
    "vue-mini-player": "^0.2.1",
    "vue-mobile-audio": "^0.1.3",
    "vue-router": "3.4.9",
    "vue-video-player": "^5.0.2",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },

main.js

import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/style.css'

Vue.use(AudioPlayer)

声明处

<el-form-item label="在线试听" prop="previewFileUrl">
  <audio-player v-if="!audioDestroy"
                ref="audioPlayer"
                :audio-list="audioPreviewConfig.audioList"
                :playback-rates="audioPreviewConfig.playbackRates"
                :show-play-button="audioPreviewConfig.showPlayButton"
                :show-prev-button="audioPreviewConfig.showPrevButton"
                :show-next-button="audioPreviewConfig.showNextButton"
                :theme-color="audioPreviewConfig.themeColor"
  ></audio-player>
</el-form-item>

data数据

audioPreviewConfig: {
        // 是否显示播放按钮
        showPlayButton: true,
        // 是否显示上一首按钮
        showPrevButton: false,
        // 是否显示下一首按钮
        showNextButton: false,
        // 倍速播放频率
        playbackRates:[0.5, 1, 1.5, 2],
        // 音频播放列表
        audioList:[],
        // 插件主题
        themeColor : "#409eff",
      }

页面效果

[1014156094]

你仔细检查下你的代码，你看这里都是没问题的 https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?file=/src/App.vue&resolutionWidth=320&resolutionHeight=675

[LiHongYu324]

感觉作者回答，我按照示例的思路一步步排查，最终发现，是我的项目中使用的vue版本2.6.12更改为2.6.14后问题解决