YesPlayMusic/src/components/ArtistsInLine.vue
GalvinGao ea4b20755d
feat: add copy track link & fixed various visual defects (#1489)
* feat: add copy track link

* fix: various visual defects

* feat: add track low res fallback

* chore: remove redundant locale strings

* chore: separate playbackState for a new PR

* build: fix netlify failing to build site
2022-04-12 16:16:46 +08:00

53 lines
1.1 KiB
Vue

<template>
<span class="artist-in-line">
{{ computedPrefix }}
<span v-for="(ar, index) in filteredArtists" :key="index">
<router-link v-if="ar.id !== 0" :to="`/artist/${ar.id}`">{{
ar.name
}}</router-link>
<span v-else>{{ ar.name }}</span>
<span v-if="index !== filteredArtists.length - 1" class="separator"
>,</span
>
</span>
</span>
</template>
<script>
export default {
name: 'ArtistInLine',
props: {
artists: {
type: Array,
required: true,
},
exclude: {
type: String,
default: '',
},
prefix: {
type: String,
default: '',
},
},
computed: {
filteredArtists() {
return this.artists.filter(a => a.name !== this.exclude);
},
computedPrefix() {
if (this.filteredArtists.length !== 0) return this.prefix;
else return '';
},
},
};
</script>
<style lang="scss" scoped>
.separator {
/* make separator distinct enough in long list */
margin-left: 1px;
margin-right: 4px;
position: relative;
top: 0.5px;
}
</style>