VUE创建播发器组件并调用_良笙_前端开发者

欢迎来到我的友链小屋

 

首先用vue-cli创建前端项目

参考:https://www.cnblogs.com/ouyangkai/p/11549290.html

https://www.cnblogs.com/ouyangkai/p/11549290.html

新建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>

View Code

<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>
<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>

4top-starthovertext-align: centerprogress
color
#67C23A
type
circle
:percentage
music.volumeprogress
button
@click
changeVolume(-10)
icon
el-icon-minus
circle
button
@click
changeVolume(10)
icon
el-icon-plus
circle
button
@click
play
id
play
slot
reference
:icon
music.isPlay ? ‘el-icon-refresh’ : ‘el-icon-caret-right’
circle
14padding-left: 20pxslider
@change
changeTime
:format
formatTime
:max
music.maxTime
v
music.currentTime
style
width: 100%;col
:span
6
style
padding: 9px 0px 0px 10px;color:#909399;font-size: 13px
{{ formatTime(music.currentTime) }}
{{ formatTime(music.maxTime) }}
refmusic../mp4/pkn0m-iuv0i.mp3audio/mpeg
export
default {
data () {
return {
music: {
isPlay:
false,
currentTime:
0,
maxTime:
0,
volume:
100
}
}
},
mounted () {
this {
setInterval(
this1000)
})
},
methods: {
listenMusic () {
ifthis.$refs.music) {
return
}
ifthis.$refs.music.readyState) {
thisthis.$refs.music.duration
}
thisthis.$refs.music.paused
thisthis.$refs.music.currentTime
},
play () {
ifthis.$refs.music.paused) {
this.$refs.music.play()
}
else {
this.$refs.music.pause()
}
thisthis.$refs.music.paused
this {
document.getElementById(
play).blur()
})
},
changeTime (time) {
this time
},
changeVolume (v) {
this v
ifthis100) {
this100
}
ifthis0) {
this0
}
thisthis100
},
formatTime (time) {
let it
parseInt(time)
let m
60)
let s
60)
return10060:10060)
}
}
}
View Code

以上代码直接复制保存即可

 

 引用组件,在app.vue 中的 script 导入组件,并且在components中声明

<script>
import play from '../src/components/play'
export default {

  name: 'App',
  components: {
    play
  }

}
</script>
<script>
import play from '../src/components/play'
export default {

  name: 'App',
  components: {
    play
  }

}
</script>


import play
from../src/components/play
export
default {

name: App,
components: {
play
}

}

 

在app.vue  template 里面的div 里面添加自定义play组件

<play />
<play />

 

运行项目:npm run dev

成功引用!

» 本文来自:前端开发者 » 《VUE创建播发器组件并调用_良笙_前端开发者》
» 本文链接地址:https://www.rokub.com/73265.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!