完整代码:https://github.com/kenpeter/test_vue_simple_audio_1
我将@onmouseup
附加到input range
。当我拖动滑块时,似乎没有调用progressChange
。
<input
type="range"
:min="0"
:step="1"
v-model="current"
:value="current"
:max="duration"
@onmouseup="progressChange()"
/>
以下是methods
methods: {
timeChange: function () {
this.current = this.$refs.player.currentTime;
},
getDuration: function () {
this.duration = this.$refs.player.duration;
},
toggleStatus: function () {
var player = this.$refs.player;
this.isPause ? player.play() : player.pause();
this.isPause = !this.isPause;
},
next: function () {
if (this.audioIndex == this.songs.length - 1) {
if (this.repeat) {
this.audioIndex = 0;
}
} else {
this.audioIndex++;
}
},
prev: function () {
if (this.audioIndex == 0) {
if (this.repeat) {
this.audioIndex = this.songs.length - 1;
}
} else {
this.audioIndex--;
}
},
progressChange() {
console.log("progress change");
},
答案 0 :(得分:1)
要回答这个问题以供将来参考类似问题的人参考:
问题是调用事件的名称错误,因为VueJS使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
的语法@even
替换'on`,所以你必须使用: