@onmouseup 没有在 vuejs 2 上开火
@onmouseup not firing at vuejs 2
完整代码: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");
},
回答这个问题以供将来寻找类似问题的人参考:
问题是调用事件的名称错误,因为 VueJS 使用 @even
语法,其中 @
替换 'on`,因此您必须使用:
- @mouseup
- @点击
- @keyup:键名
- @input
- @customEventEmitedByComponent
完整代码: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");
},
回答这个问题以供将来寻找类似问题的人参考:
问题是调用事件的名称错误,因为 VueJS 使用 @even
语法,其中 @
替换 'on`,因此您必须使用:
- @mouseup
- @点击
- @keyup:键名
- @input
- @customEventEmitedByComponent