# 8.7 音乐播放器（Music Player）

# 实例 :

# 基础用法

<template>
  <div class="demo">
    <dof-minibar
      :left-button="leftButton"
      title="音乐播放器"
      text-color="#ffffff"
      background-color="rgba(38,122,255,1)"
      @dof-minibar-left-button-clicked="back"
    ></dof-minibar>
    <div class="content-container">
      <dof-music-player
        :volume="30"
        :min="0"
        :max="100"
        :play="playFlag"
        :title="'早间新闻'"
        @dof-volume-changed="dofVolumeChanged"
        @dof-play-clicked="dofPlayClicked"
        @dof-next-clicked="dofNextClicked"
      ></dof-music-player>
      <div class="h-10"></div>
      <dof-music-player
        :volume="50"
        :min="0"
        :max="100"
        :play="!playFlag"
        :title="'早间新闻到底是怎么'"
        @dof-volume-changed="dofVolumeChanged"
        @dof-play-clicked="dofPlayClicked"
        @dof-next-clicked="dofNextClicked"
      ></dof-music-player>
      <div class="h-10"></div>
      <dof-music-player
        :volume="80"
        :min="0"
        :max="100"
        :play="playFlag"
        :title="'早间新闻到底是怎么进行一场场播报的'"
        @dof-volume-changed="dofVolumeChanged"
        @dof-play-clicked="dofPlayClicked"
        @dof-next-clicked="dofNextClicked"
      ></dof-music-player>
    </div>
  </div>
</template>

<script>
import { DofMinibar, DofMusicPlayer } from 'dolphin-intl-ui'
const modal = weex.requireModule('modal')
export default {
  components: {
    DofMinibar,
    DofMusicPlayer
  },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    playFlag: true
  }),
  created() {},
  mounted() {},
  computed: {},
  methods: {
    dofVolumeChanged(val) {
      modal.toast({
        message: val
      })
    },
    dofPlayClicked(type) {
      modal.toast({
        message: type
      })
    },
    dofNextClicked() {
      modal.toast({
        message: 'Next Clicked'
      })
    }
  }
}
</script>

<style scoped>
.demo {
  background-color: #f9f9f9;
}
.content-container {
  padding: 32px;
}

.h-10 {
  width: 100%;
  height: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

# Attributes

Prop Type Required Default Description
title String N '' 标题
play Boolean N false 是否播放
volume Number N 0 当前音量
min Number N 0 最小音量
max Number N 100 最大音量
step Number N 1 音量调节步长
theme String N brand 音量滑杆主题
track-height Number N - 音量滑杆轨道高度；未传时使用主题默认值
track-color String N '' 音量滑杆轨道颜色
bar-color String N '' 音量滑杆已选区域颜色
button-size Number N - 音量滑杆按钮尺寸；未传时使用主题默认值
button-color String N #ffffff 音量滑杆按钮颜色
readonly Boolean N false 音量滑杆是否只读
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

向内部 Slider 透传暗黑开关；trackColor、barColor、buttonColor 可覆盖滑块配色。

# Events

事件名 说明 回调参数
dofVolumeChanged 音量变化时触发 volume
dofPlayClicked 点击播放或暂停时触发 play 或 pause
dofNextClicked 点击下一首时触发 -

← 8.8 评分（Rate） →