volume.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!-- 音量控制组件 -->
  2. <template>
  3. <div class="volume">
  4. <mm-icon
  5. class="pointer volume-icon"
  6. :type="getVolumeIconType()"
  7. :size="30"
  8. @click="handleToggleVolume"
  9. />
  10. <div class="volume-progress-wrapper">
  11. <mm-progress
  12. :percent="volumeProgress"
  13. @percentChange="handleVolumeChange"
  14. />
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import MmProgress from '@base/mm-progress/mm-progress'
  20. export default {
  21. name: 'Volume',
  22. components: {
  23. MmProgress
  24. },
  25. props: {
  26. volume: {
  27. type: Number,
  28. required: true
  29. }
  30. },
  31. computed: {
  32. volumeProgress() {
  33. return this.volume
  34. },
  35. isMute: {
  36. get() {
  37. return this.volumeProgress === 0
  38. },
  39. set(newMute) {
  40. const volume = newMute ? 0 : this.lastVolume
  41. if (newMute) {
  42. this.lastVolume = this.volumeProgress
  43. }
  44. this.handleVolumeChange(volume)
  45. }
  46. }
  47. },
  48. methods: {
  49. getVolumeIconType() {
  50. return this.isMute ? 'volume-off' : 'volume'
  51. },
  52. // 是否静音
  53. handleToggleVolume() {
  54. this.isMute = !this.isMute
  55. },
  56. handleVolumeChange(percent) {
  57. this.$emit('volumeChange', percent)
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="less" scoped>
  63. .volume {
  64. display: flex;
  65. align-items: center;
  66. width: 150px;
  67. &-icon {
  68. margin-right: 5px;
  69. color: #fff;
  70. }
  71. &-progress-wrapper {
  72. flex: 1;
  73. }
  74. @media (max-width: 768px) {
  75. top: 2px;
  76. width: 36px;
  77. }
  78. }
  79. </style>