106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<section class="g-custom-list">
|
||
|
|
<div v-if="showHeader" class="g-custom-list-header">
|
||
|
|
<custom-header
|
||
|
|
:title="title"
|
||
|
|
:count="data.length"
|
||
|
|
:showCount="showCount"
|
||
|
|
>
|
||
|
|
<template #actions>
|
||
|
|
<slot name="actions">
|
||
|
|
<d-button class="g-custom-list-button">新建Star列表</d-button>
|
||
|
|
</slot>
|
||
|
|
</template>
|
||
|
|
</custom-header>
|
||
|
|
</div>
|
||
|
|
<div class="g-custom-list-content">
|
||
|
|
<div
|
||
|
|
v-for="(item, index) in data"
|
||
|
|
:key="`${item.id}_${index}`"
|
||
|
|
class="g-custom-list-item"
|
||
|
|
:class="{'is-last': index === data.length - 1}"
|
||
|
|
>
|
||
|
|
<slot name="item" :data="item" :index="index">
|
||
|
|
<div class="g-custom-list-item-name">
|
||
|
|
<slot name="item-name" :data="item" :index="index">{{ item.name }}</slot>
|
||
|
|
</div>
|
||
|
|
<div class="g-custom-list-item-extra">
|
||
|
|
<slot name="item-extra" :data="item" :index="index">
|
||
|
|
{{ item.extra }}
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default {
|
||
|
|
name: 'custom-list'
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import CustomHeader from '@/components/CustomHeader/index.vue';
|
||
|
|
withDefaults(defineProps<{
|
||
|
|
title?: string;
|
||
|
|
data: {
|
||
|
|
name: string;
|
||
|
|
extra: string;
|
||
|
|
[propName: string]: any;
|
||
|
|
}[];
|
||
|
|
showCount?: boolean;
|
||
|
|
showHeader?: boolean;
|
||
|
|
}>(), {
|
||
|
|
title: '',
|
||
|
|
data: () => [],
|
||
|
|
showCount: true,
|
||
|
|
showHeader: true
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
$g-custom-list-color: #000000;
|
||
|
|
$g-custom-list-color-second: #606060;
|
||
|
|
$g-custom-list-color-white: #ffffff;
|
||
|
|
$g-custom-list-bg-color: #333333;
|
||
|
|
$g-custom-list-border-color: #D3D3D3;
|
||
|
|
$g-custom-list-border-radius: 4px;
|
||
|
|
.g-custom-list {
|
||
|
|
&-header {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
&-button {
|
||
|
|
padding: 8px 16px;
|
||
|
|
line-height: 1;
|
||
|
|
background-color: $g-custom-list-bg-color;
|
||
|
|
color: $g-custom-list-color-white;
|
||
|
|
}
|
||
|
|
&-content {
|
||
|
|
border: 1px solid $g-custom-list-border-color;
|
||
|
|
border-radius: $g-custom-list-border-radius;
|
||
|
|
}
|
||
|
|
&-item {
|
||
|
|
border-bottom: 1px solid $g-custom-list-border-color;
|
||
|
|
padding: 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
line-height: 1;
|
||
|
|
&.is-last {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
&-name {
|
||
|
|
font-size: 18px;
|
||
|
|
color: $g-custom-list-bg-color;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
&-extra {
|
||
|
|
color: $g-custom-list-color-second;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|