首先用vue-cli创建前端项目
参考：
新建play.vue文件
编写play组件
我要评论<template>
<div>
<el-row>
<el-col :span="4">
<el-popover placement="top-start" trigger="hover">
<div style="text-align: center">
<el-progress
color="#67c23a"
type="circle"
:percentage="music.volume"
></el-progress
><br />
<el-button
@click="changevolume(-10)"
icon="el-icon-minus"
circle
></el-button>
<el-button
@click="changevolume(10)"
icon="el-icon-plus"
circle
></el-button>
</div>
<el-button
@click="play"
id="play"
slot="reference"
:icon="music.isplay ? 'el-icon-refresh' : 'el-icon-caret-right'"
circle
></el-button>
</el-popover>
</el-col>
<el-col :span="14" style="padding-left: 20px">
<el-slider
@change="changetime"
:format-tooltip="formattime"
:max="music.maxtime"
v-model="music.currenttime"
style="width: 100%;"
></el-slider>
</el-col>
<el-col
:span="6"
style="padding: 9px 0px 0px 10px;color:#909399;font-size: 13px"
>
{{ formattime(music.currenttime) }}/{{ formattime(music.maxtime) }}
</el-col>
</el-row>
<audio ref="music" loop autoplay>
<source src="../mp4/pkn0m-iuv0i.mp3" type="audio/mpeg" />
</audio>
</div>
</template>
<script>
export default {
data () {
return {
music: {
isplay: false,
currenttime: 0,
maxtime: 0,
volume: 100
}
}
},
mounted () {
this.$nexttick(() => {
setinterval(this.listenmusic, 1000)
})
},
methods: {
listenmusic () {
if (!this.$refs.music) {
return
}
if (this.$refs.music.readystate) {
this.music.maxtime = this.$refs.music.duration
}
this.music.isplay = !this.$refs.music.paused
this.music.currenttime = this.$refs.music.currenttime
},
play () {
if (this.$refs.music.paused) {
this.$refs.music.play()
} else {
this.$refs.music.pause()
}
this.music.isplay = !this.$refs.music.paused
this.$nexttick(() => {
document.getelementbyid('play').blur()
})
},
changetime (time) {
this.$refs.music.currenttime = time
},
changevolume (v) {
this.music.volume += v
if (this.music.volume > 100) {
this.music.volume = 100
}
if (this.music.volume < 0) {
this.music.volume = 0
}
this.$refs.music.volume = this.music.volume / 100
},
formattime (time) {
let it = parseint(time)
let m = parseint(it / 60)
let s = parseint(it % 60)
return (m < 10 ? '0' : '') + parseint(it / 60) + ':' + (s < 10 ? '0' : '') + parseint(it % 60)
}
}
}
</script>
以上代码直接复制保存即可
引用组件，在app.vue 中的 script 导入组件，并且在components中声明
<script>
import play from '../src/components/play'
export default {
name: 'app',
components: {
play
}
}
</script>
在app.vue template 里面的div 里面添加自定义play组件
<play />
运行项目：npm run dev
成功引用！
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论