use reusable List vue component instead of withList hoc
Using slot is the preferred way in vue
This commit is contained in:
parent
4b292564d8
commit
1cec2b6969
3 changed files with 49 additions and 20 deletions
28
src/components/list/list.vue
Normal file
28
src/components/list/list.vue
Normal file
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div class="list">
|
||||
<slot name="item" v-for="item in items" :item="item" />
|
||||
<div class="list-empty-content faint" v-if="items.length === 0">
|
||||
<slot name="empty" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
&-empty-content {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue