完善自定义列表、新增右键菜单
This commit is contained in:
lyswhut
@@ -1,52 +1,54 @@
|
||||
<template lang="pug">
|
||||
div(:class="$style.songList")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(v-show="list.length" :class="$style.list")
|
||||
div(:class="$style.list")
|
||||
div(:class="$style.thead")
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.nobreak.center(style="width: 10px;") #
|
||||
th.nobreak(style="width: 25%;") {{$t('material.song_list.name')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.singer')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.album')}}
|
||||
th.nobreak(style="width: 10%;") {{$t('material.song_list.time')}}
|
||||
th.nobreak(style="width: 20%;") {{$t('material.song_list.action')}}
|
||||
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu="handleContextMenu" ref="dom_tbody")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick($event, index)")
|
||||
td.nobreak.center(style="width: 37px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
td.break(style="width: 25%;")
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
|
||||
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.singer}}
|
||||
td.break(style="width: 20%;")
|
||||
span.select {{item.albumName}}
|
||||
td(style="width: 10%;")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
td(style="width: 20%; padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :search-btn="true" :class="$style.btns"
|
||||
:remove-btn="false" @btn-click="handleListBtnClick"
|
||||
:listAdd-btn="assertApiSupport(item.source)"
|
||||
:play-btn="assertApiSupport(item.source)"
|
||||
:download-btn="assertApiSupport(item.source)")
|
||||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||||
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
|
||||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(v-show="!list.length" :class="$style.noitem")
|
||||
p(v-html="noItem")
|
||||
material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
th.nobreak.center(:style="{ width: rowWidth.r1 }") #
|
||||
th.nobreak(:style="{ width: rowWidth.r2 }") {{$t('material.song_list.name')}}
|
||||
th.nobreak(:style="{ width: rowWidth.r3 }") {{$t('material.song_list.singer')}}
|
||||
th.nobreak(:style="{ width: rowWidth.r4 }") {{$t('material.song_list.album')}}
|
||||
th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
|
||||
th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
|
||||
div(:class="$style.content")
|
||||
div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
|
||||
table
|
||||
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
|
||||
tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
|
||||
td.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
|
||||
td.break(:style="{ width: rowWidth.r2 }")
|
||||
span.select {{item.name}}
|
||||
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
|
||||
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
|
||||
td.break(:style="{ width: rowWidth.r3 }")
|
||||
span.select {{item.singer}}
|
||||
td.break(:style="{ width: rowWidth.r4 }")
|
||||
span.select {{item.albumName}}
|
||||
td(:style="{ width: rowWidth.r5 }")
|
||||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||||
td(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
|
||||
material-list-buttons(:index="index" :class="$style.btns"
|
||||
:remove-btn="false" @btn-click="handleListBtnClick"
|
||||
:listAdd-btn="assertApiSupport(item.source)"
|
||||
:play-btn="assertApiSupport(item.source)"
|
||||
:download-btn="assertApiSupport(item.source)")
|
||||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||||
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
|
||||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||||
div(:class="$style.pagination")
|
||||
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(v-show="!list.length" :class="$style.noitem")
|
||||
p(v-html="noItem")
|
||||
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
|
||||
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { scrollTo, clipboardWriteText, assertApiSupport } from '../../utils'
|
||||
import { scrollTo, clipboardWriteText, assertApiSupport, findParentNode } from '../../utils'
|
||||
export default {
|
||||
name: 'MaterialSongList',
|
||||
model: {
|
||||
@@ -83,26 +85,63 @@ export default {
|
||||
type: String,
|
||||
default: '列表加载中...',
|
||||
},
|
||||
rowWidth: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
r1: '5%',
|
||||
r2: 'auto',
|
||||
r3: '22%',
|
||||
r4: '22%',
|
||||
r5: '8%',
|
||||
r6: '13%',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['setting']),
|
||||
listItemMenu() {
|
||||
return [
|
||||
{
|
||||
name: this.$t('material.song_list.list_play'),
|
||||
action: 'play',
|
||||
disabled: !this.listMenu.itemMenuControl.play,
|
||||
},
|
||||
{
|
||||
name: this.$t('material.song_list.list_download'),
|
||||
action: 'download',
|
||||
disabled: !this.listMenu.itemMenuControl.download,
|
||||
},
|
||||
{
|
||||
name: this.$t('material.song_list.list_add_to'),
|
||||
action: 'addTo',
|
||||
disabled: !this.listMenu.itemMenuControl.addTo,
|
||||
},
|
||||
{
|
||||
name: this.$t('material.song_list.list_search'),
|
||||
action: 'search',
|
||||
disabled: !this.listMenu.itemMenuControl.search,
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectdList(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isShowEditBtn = true
|
||||
} else {
|
||||
this.isShowEditBtn = false
|
||||
}
|
||||
},
|
||||
// selectdList(n) {
|
||||
// const len = n.length
|
||||
// if (len) {
|
||||
// this.isShowEditBtn = true
|
||||
// } else {
|
||||
// this.isShowEditBtn = false
|
||||
// }
|
||||
// },
|
||||
selectdData(n) {
|
||||
const len = n.length
|
||||
if (len) {
|
||||
this.isShowEditBtn = true
|
||||
// this.isShowEditBtn = true
|
||||
this.selectdList = [...n]
|
||||
} else {
|
||||
this.isShowEditBtn = false
|
||||
// this.isShowEditBtn = false
|
||||
this.removeAllSelect()
|
||||
}
|
||||
},
|
||||
@@ -122,6 +161,19 @@ export default {
|
||||
isShiftDown: false,
|
||||
isModDown: false,
|
||||
},
|
||||
listMenu: {
|
||||
isShowItemMenu: false,
|
||||
itemMenuControl: {
|
||||
play: true,
|
||||
addTo: true,
|
||||
download: true,
|
||||
search: true,
|
||||
},
|
||||
menuLocation: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -245,9 +297,9 @@ export default {
|
||||
handleTogglePage(page) {
|
||||
this.emitEvent('togglePage', page)
|
||||
},
|
||||
handleFlowBtnClick(action) {
|
||||
this.emitEvent('flowBtnClick', action)
|
||||
},
|
||||
// handleFlowBtnClick(action) {
|
||||
// this.emitEvent('flowBtnClick', action)
|
||||
// },
|
||||
emitEvent(action, data) {
|
||||
this.$emit('action', { action, data })
|
||||
},
|
||||
@@ -256,6 +308,7 @@ export default {
|
||||
},
|
||||
handleContextMenu(event) {
|
||||
if (!event.target.classList.contains('select')) return
|
||||
event.stopImmediatePropagation()
|
||||
let classList = this.$refs.dom_scrollContent.classList
|
||||
classList.add(this.$style.copying)
|
||||
window.requestAnimationFrame(() => {
|
||||
@@ -269,6 +322,32 @@ export default {
|
||||
assertApiSupport(source) {
|
||||
return assertApiSupport(source)
|
||||
},
|
||||
handleListItemRigthClick(event, index) {
|
||||
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
|
||||
let dom_td = findParentNode(event.target, 'TD')
|
||||
this.listMenu.rightClickItemIndex = index
|
||||
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
|
||||
this.listMenu.menuLocation.y = dom_td.offsetParent.offsetTop + dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
|
||||
this.$nextTick(() => {
|
||||
this.listMenu.isShowItemMenu = true
|
||||
})
|
||||
},
|
||||
hideListMenu() {
|
||||
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
|
||||
if (dom_selected) dom_selected.classList.remove('selected')
|
||||
this.listMenu.isShowItemMenu = false
|
||||
this.listMenu.rightClickItemIndex = -1
|
||||
},
|
||||
handleListItemMenuClick(action) {
|
||||
// console.log(action)
|
||||
let index = this.listMenu.rightClickItemIndex
|
||||
this.hideListMenu()
|
||||
if (!action) return
|
||||
|
||||
this.emitEvent('menuClick', { action: action.action, index })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -290,6 +369,7 @@ export default {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.thead {
|
||||
flex: none;
|
||||
@@ -298,8 +378,13 @@ export default {
|
||||
// padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
.content {
|
||||
flex: auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.tbody {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
td {
|
||||
font-size: 12px;
|
||||
|
||||
Reference in New Issue
Block a user