允许选中列表内的部分文字,优化界面

This commit is contained in:
lyswhut
2020-01-30 11:54:04 +08:00
parent ee3d04ba23
commit 867ae2991c
10 changed files with 71 additions and 46 deletions
+6 -3
View File
@@ -19,10 +19,11 @@ div(:class="$style.download")
div.scroll(v-if="list.length" :class="$style.tbody")
table
tbody
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick(index)" :class="playListIndex === index ? $style.active : ''")
tr(v-for='(item, index) in showList' :key='item.key' @click="handleDoubleClick($event, index)" :class="playListIndex === index ? $style.active : ''")
td.nobreak.center(style="width: 37px;" @click.stop)
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
td.break(style="width: 28%;") {{item.musicInfo.name}} - {{item.musicInfo.singer}}
td.break(style="width: 28%;")
span.select {{item.musicInfo.name}} - {{item.musicInfo.singer}}
td.break(style="width: 22%;") {{item.progress.progress}}%
td.break(style="width: 15%;") {{item.statusText}}
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
@@ -133,7 +134,9 @@ export default {
let dl = this.dls[info.key]
dl ? dl.start() : this.startTask(info)
},
handleDoubleClick(index) {
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
+8 -5
View File
@@ -18,19 +18,21 @@
table
tbody
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid"
@click="handleDoubleClick(index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', (isAPITemp && item.source != 'kw') ? $style.disabled : '']")
td.nobreak.center(style="width: 37px;" @click.stop)
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
td.break(style="width: 25%;")
| {{item.name}}
span.select {{item.name}}
span(:class="$style.labelSource" v-if="isShowSource") {{item.source}}
//- span.badge.badge-light(v-if="item._types['128k']") 128K
//- span.badge.badge-light(v-if="item._types['192k']") 192K
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
td.break(style="width: 20%;") {{item.singer}}
td.break(style="width: 20%;") {{item.albumName}}
td.break(style="width: 20%;")
span.select {{item.singer}}
td.break(style="width: 20%;")
span.select {{item.albumName}}
td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" @btn-click="handleListBtnClick")
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
@@ -229,7 +231,8 @@ export default {
})
})
},
handleDoubleClick(index) {
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
+9 -12
View File
@@ -19,16 +19,18 @@
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
tbody
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick(index)")
tr(v-for='(item, index) in listInfo.list' :key='item.songmid' @click="handleDoubleClick($event, index)")
td.nobreak.center(style="width: 37px;" @click.stop)
material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
td.break(style="width: 25%;")
| {{item.name}}
span.select {{item.name}}
span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}}
td.break(style="width: 20%;") {{item.singer}}
td.break(style="width: 25%;") {{item.albumName}}
td.break(style="width: 20%;")
span.select {{item.singer}}
td.break(style="width: 25%;")
span.select {{item.albumName}}
td(style="width: 15%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
:play-btn="item.source == 'kw' || !isAPITemp"
@@ -152,7 +154,8 @@ export default {
})
})
},
handleDoubleClick(index) {
handleDoubleClick(event, index) {
if (event.target.classList.contains('select')) return
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
@@ -279,13 +282,7 @@ export default {
td {
font-size: 12px;
:global(.badge) {
margin-right: 3px;
&:first-child {
margin-left: 3px;
}
&:last-child {
margin-right: 0;
}
margin-left: 3px;
}
}
:global(.badge) {