github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

优化播放组件渲染性能

pull/96/head
lyswhut 2019-09-25 13:05:30 +08:00
parent 3cf39ea48b
commit f3dd306f54
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/components/core/Player.vue
View File

@ -9,8 +9,8 @@ div(:class="$style.player")
div(:class="$style.container") div(:class="$style.container")
div(:class="$style.title" @click="handleCopy(title)" :title="title + '（点击复制）'") {{title}} div(:class="$style.title" @click="handleCopy(title)" :title="title + '（点击复制）'") {{title}}
div(:class="$style.volumeContent") div(:class="$style.volumeContent")
div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量：${volumeStr}%`") div(:class="$style.volume" @click.stop='handleChangeVolume' :title="`当前音量：${parseInt(volume * 100)}%`")
div(:class="$style.volumeBar" :style="{ width: volumeStr + '%' }") div(:class="$style.volumeBar" :style="{ transform: `scaleX(${volume || 0})` }")
//- div(:class="$style.playBtn" @click='handleNext' title="音量") //- div(:class="$style.playBtn" @click='handleNext' title="音量")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve') svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 291.063 291.064' space='preserve')
@ -23,11 +23,11 @@ div(:class="$style.player")
use(xlink:href='#icon-pause') use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve') svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play') use(xlink:href='#icon-play')
div(:class="$style.column2" @click='setProgess' ref="dom_progress") div(:class="$style.column2")
div(:class="$style.progress") div(:class="$style.progress")
//- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ width: progress + '%' }") //- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="[$style.progressBar, $style.progressBar2]" :style="{ width: (progress * 100 || 0) + '%' }") div(:class="[$style.progressBar, $style.progressBar2]" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="$style.progressMask" @click='setProgess' ref="dom_progress")
div(:class="$style.column3") div(:class="$style.column3")
span {{nowPlayTimeStr}} span {{nowPlayTimeStr}}
span(:class="$style.statusText") {{status}} span(:class="$style.statusText") {{status}}
@ -100,15 +100,11 @@ export default {
return this.maxPlayTime ? formatPlayTime2(this.maxPlayTime) : '00:00' return this.maxPlayTime ? formatPlayTime2(this.maxPlayTime) : '00:00'
}, },
progress() { progress() {
// return 50
return this.nowPlayTime / this.maxPlayTime || 0 return this.nowPlayTime / this.maxPlayTime || 0
}, },
isAPITemp() { isAPITemp() {
return this.setting.apiSource == 'temp' return this.setting.apiSource == 'temp'
}, },
volumeStr() {
return parseInt(this.volume * 100)
},
}, },
mounted() { mounted() {
this.init() this.init()
@ -554,7 +550,11 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 0; transform: scaleX(0);
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease;
width: 100%;
height: 100%; height: 100%;
border-radius: @radius-progress-border; border-radius: @radius-progress-border;
transition-duration: 0.2s; transition-duration: 0.2s;
@ -591,7 +591,7 @@ export default {
.column2 { .column2 {
flex: none; flex: none;
padding: 3px 0; padding: 3px 0;
cursor: pointer; position: relative;
} }
.progress { .progress {
@ -606,12 +606,23 @@ export default {
position: relative; position: relative;
border-radius: @radius-progress-border; border-radius: @radius-progress-border;
} }
.progress-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.progress-bar { .progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 0; width: 100%;
height: 100%; height: 100%;
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease;
border-radius: @radius-progress-border; border-radius: @radius-progress-border;
} }
.progress-bar1 { .progress-bar1 {