基本完成单曲搜索
This commit is contained in:
zilong
332
src/components/Songlist.vue
Normal file
332
src/components/Songlist.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
h,
|
||||
watch,
|
||||
toRaw,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { RouterLink, useRoute, useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
NButton,
|
||||
NButtonGroup,
|
||||
NSpace,
|
||||
NIcon,
|
||||
NDropdown,
|
||||
NMenu,
|
||||
NLayout,
|
||||
NLayoutHeader,
|
||||
NLayoutFooter,
|
||||
NLayoutContent,
|
||||
NLayoutSider,
|
||||
NTag,
|
||||
NDataTable,
|
||||
useMessage,
|
||||
} from "naive-ui";
|
||||
import Play from "@/assets/svgs/Play_.svg";
|
||||
import Pause from "@/assets/svgs/Pause.svg";
|
||||
import svgDots from "@/assets/svgs/Dots.svg";
|
||||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import pubsub from "pubsub-js";
|
||||
import ArtistsSpan from "@/components/ArtistsSpan.vue";
|
||||
import AlbumSpan from "@/components/AlbumSpan.vue";
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
dayjs.extend(duration);
|
||||
|
||||
const props = defineProps({
|
||||
songs: Array,
|
||||
});
|
||||
|
||||
// const s = ref(props.songs)
|
||||
// console.log(s.value.value);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wp-list" ref="wpTable" v-if="false">
|
||||
<div
|
||||
class="tr"
|
||||
v-for="(p, idx) in songs"
|
||||
:key="idx"
|
||||
draggable="true"
|
||||
@dragstart="dragstart(idx)"
|
||||
@dragenter="dragenter($event, idx)"
|
||||
@dragover="dragover($event, idx)"
|
||||
@drop="drop($event, idx)"
|
||||
@dblclick="pubsub.publish('zp.play', { id: p.id, im: true })"
|
||||
>
|
||||
<div class="icon">
|
||||
<NButton
|
||||
v-show="p.id === store.state.settings.songId"
|
||||
text
|
||||
type="primary"
|
||||
size="tiny"
|
||||
>
|
||||
<NIcon style="bottom: -1px; left: -2px; position: absolute">
|
||||
<Play v-if="store.state.settings.playing"></Play>
|
||||
<Pause v-else></Pause>
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span class="ntext">{{ p.name }}</span>
|
||||
<span class="nm">
|
||||
<n-dropdown
|
||||
placement="right-start"
|
||||
@select="handleSelect($event, p.id)"
|
||||
trigger="click"
|
||||
:show-arrow="true"
|
||||
>
|
||||
<NButton
|
||||
class="mn"
|
||||
text
|
||||
type="primary"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
<NIcon>
|
||||
<svg-dots />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</n-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ar">
|
||||
<ArtistsSpan :artists="p.artists" />
|
||||
</div>
|
||||
<div class="al">{{ p.album.name }}</div>
|
||||
<div class="dt">
|
||||
{{ dayjs.duration(p.duration).format("mm:ss") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="tbList">
|
||||
<tr class="tr trh">
|
||||
<td class="icon"></td>
|
||||
<td class="name">音乐标题</td>
|
||||
<td class="ar">歌手</td>
|
||||
<td class="al">专辑</td>
|
||||
<td class="dt">时长</td>
|
||||
|
||||
</tr>
|
||||
<tr
|
||||
class="tr"
|
||||
v-for="p in songs"
|
||||
:key="p.id"
|
||||
draggable="false"
|
||||
@dblclick="pubsub.publish('zp.play', { id: p.id, im: true })"
|
||||
>
|
||||
<td class="icon">
|
||||
<NButton
|
||||
v-show="p.id === store.state.settings.songId"
|
||||
text
|
||||
type="primary"
|
||||
size="tiny"
|
||||
>
|
||||
<NIcon style="bottom: -1px; left: -2px; position: absolute">
|
||||
<Play v-if="store.state.settings.playing"></Play>
|
||||
<Pause v-else></Pause>
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</td>
|
||||
<td class="name">
|
||||
<span class="ntext">{{ p.name }}</span>
|
||||
<span class="nm">
|
||||
<n-dropdown
|
||||
placement="right-start"
|
||||
@select="handleSelect($event, p.id)"
|
||||
trigger="click"
|
||||
:show-arrow="true"
|
||||
>
|
||||
<NButton
|
||||
class="mn"
|
||||
text
|
||||
type="primary"
|
||||
style="font-size: 18px"
|
||||
>
|
||||
<NIcon>
|
||||
<svg-dots />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</n-dropdown>
|
||||
</span>
|
||||
</td>
|
||||
<td class="ar"><ArtistsSpan :artists="p.artists" /></td>
|
||||
<td class="al"><AlbumSpan :album="p.album" /></td>
|
||||
<td class="dt">
|
||||
{{ dayjs.duration(p.duration).format("mm:ss") }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Songlist",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/common.less";
|
||||
.tbList {
|
||||
border-spacing: 0;
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// table-layout: fixed;
|
||||
user-select: none;
|
||||
|
||||
.trh{
|
||||
background-color: #eee;
|
||||
font-weight: 600;
|
||||
td{
|
||||
// background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// line-height: 1.8;
|
||||
|
||||
&:nth-child(2n + 1):not(.trh) {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
td {
|
||||
padding: 6px 6px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
|
||||
.name .mn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
}
|
||||
.name {
|
||||
flex: 3;
|
||||
.text-el-line-normal();
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ntext {
|
||||
.text-el-line-normal();
|
||||
}
|
||||
|
||||
.mn {
|
||||
flex: 1;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ar {
|
||||
flex: 2;
|
||||
.text-el-line-normal();
|
||||
}
|
||||
.ar,
|
||||
.al,
|
||||
.dt {
|
||||
font-size: 12px;
|
||||
}
|
||||
.al,
|
||||
.dt {
|
||||
color: #999;
|
||||
}
|
||||
.al {
|
||||
flex: 1;
|
||||
.text-el-line-normal();
|
||||
}
|
||||
.dt {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.wp-list {
|
||||
// position: absolute;
|
||||
// bottom: 0px;
|
||||
// top: 80px;
|
||||
// right: 0;
|
||||
// left: 160px;
|
||||
overflow-y: auto;
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border-top: 1px #eee solid;
|
||||
border-bottom: 1px #eee solid;
|
||||
margin-bottom: -1px;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
|
||||
.name .mn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-left: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
.name {
|
||||
flex: 3;
|
||||
.text-el-line();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ntext {
|
||||
.text-el-line();
|
||||
}
|
||||
|
||||
.mn {
|
||||
flex: 1;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ar {
|
||||
width: 120px;
|
||||
// flex: 2;
|
||||
// color: #999;
|
||||
margin-top: 1px;
|
||||
font-size: 12px;
|
||||
.text-el-line();
|
||||
}
|
||||
.al {
|
||||
width: 80px;
|
||||
// flex: 1;
|
||||
margin-top: 1px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
.text-el-line();
|
||||
}
|
||||
.dt {
|
||||
margin-top: 1px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/components/SongsList.vue
Normal file
60
src/components/SongsList.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
h,
|
||||
watch,
|
||||
toRaw,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { RouterLink, useRoute, useRouter } from "vue-router";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
NButton,
|
||||
NButtonGroup,
|
||||
NSpace,
|
||||
NIcon,
|
||||
NDropdown,
|
||||
NMenu,
|
||||
NLayout,
|
||||
NLayoutHeader,
|
||||
NLayoutFooter,
|
||||
NLayoutContent,
|
||||
NLayoutSider,
|
||||
NTag,
|
||||
NDataTable,
|
||||
useMessage,
|
||||
} from "naive-ui";
|
||||
import Play from "@/assets/svgs/Play_.svg";
|
||||
import Pause from "@/assets/svgs/Pause.svg";
|
||||
import svgDots from "@/assets/svgs/Dots.svg";
|
||||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/zh-cn";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import pubsub from "pubsub-js";
|
||||
import ArtistsSpan from "@/components/ArtistsSpan.vue";
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
dayjs.extend(duration);
|
||||
|
||||
const props = defineProps({
|
||||
songs: Array,
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
{{songs}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user